组件之间如何进行通信？
组件通信
组件的通信主要借助props传递值
分为整体接收、解构接收
整体接收
import PropTypes from 'prop-types';
//子组件
function Welcome(props){
return (
<div>
hello Welcome,{props.count},{props.msg}
</div>
)
}
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 count 属性为字符串类型
count: PropTypes.string,
// 验证 msg 属性为字符串类型
msg: PropTypes.string
};
// 父组件
function App(){
return (
<div>
hello App
<Welcome count="123" msg="hi react"/>
</div>
)
}
export default App解构接收
import PropTypes from 'prop-types';
//子组件
function Welcome({count,msg}){
return (
<div>
hello Welcome,{count},{msg}
</div>
)
}
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 count 属性为字符串类型
count: PropTypes.string,
// 验证 msg 属性为字符串类型
msg: PropTypes.string
};
// 父组件
function App(){
return (
<div>
hello App
<Welcome count="123" msg="hi react"/>
</div>
)
}
export default App传递属性但是不传值，实际传的是true
点击事件：
import PropTypes from 'prop-types';
//子组件
function Welcome({onClick,getData}){
getData('我是子组件的数据')
return (
<div onClick={onClick}>
hello Welcome
</div>
)
}
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 onClick 属性为函数类型
onClick: PropTypes.func.isRequired,
// 验证 getData 属性为函数类型
getData: PropTypes.func.isRequired
};
// 父组件
function App(){
const handleClick =()=>{
console.log(1234)
}
const getData = (data)=>{
console.log(data)
}
return (
<div>
hello App
<Welcome onClick={handleClick} getData={getData}/>
</div>
)
}
export default App组件内容如何组合到一起
主要是通过props的children属性，传递多组内容只要是大括号可以接收的都可以进行传递，比如样式
通信的数据如何添加默认值和限定类型
通信数据添加默认值：
import PropTypes from 'prop-types';
function Welcome({count,msg}){
return (
<div>
hello Welcome,{count},{msg}
</div>
)
}
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 count 属性为数字类型
count: PropTypes.number,
// 验证 msg 属性为字符串类型
msg: PropTypes.string
};
// 为 Welcome 组件的属性设置默认值
Welcome.defaultProps = {
count: 0,
msg: 'default content'
};
function App(){
return (
<div>
hello App
<Welcome count={123} msg="hello react"/>
<Welcome count={123}/>
</div>
)
}
export default App这样也可以：
import PropTypes from 'prop-types';
function Welcome({count=0,msg='default'}){
return (
<div>
hello Welcome,{count},{msg}
</div>
)
}
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 count 属性为数字类型
count: PropTypes.number,
// 验证 msg 属性为字符串类型
msg: PropTypes.string
};
function App(){
return (
<div>
hello App
<Welcome count={123} msg="hello react"/>
<Welcome count={123}/>
</div>
)
}
export default App怎么限定类型捏？
很简单，就是使用Protypes
我的版本高格式检测严格都不允许不添加这个勒：
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 count 属性为数字类型
count: PropTypes.number,
// 验证 msg 属性为字符串类型
msg: PropTypes.string
};不添加这个则会强制的报错
想要限定多种类型的话可以这样做：
import PropTypes from 'prop-types';
function Welcome({count=0,msg='default'}){
return (
<div>
hello Welcome,{count},{msg}
</div>
)
}
// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
// 验证 count 属性为数字类型
count: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
// 验证 msg 属性为字符串类型
msg: PropTypes.string
};
function App(){
return (
<div>
hello App
<Welcome count={123} msg="hello react"/>
<Welcome count={123}/>
</div>
)
}
export default App组件需要是纯函数
什么是纯函数？
纯函数只负责自己的任务，他不会更改该函数调用前就已经存在的对象或者变量
输入相同，则输出相同，给定相同的输入，纯函数应该总是返回相同的结果，使用严格模式检测不纯的计算
function App({msg}){
let count = 0
count ++
console.log(count)
return (
<div>
hello App,{msg}
</div>
)
}
export default App
// 不纯函数
// let bar = 1
// function foo(){
// bar++
// }
// foo()组件的状态和useState函数
瞬间变化的数据被称为状态（state），状态可以进行数据驱动视图，普通变量不行
useState可创建状态和修改状态的方法
状态如何改变视图
为什么普通变量不能呢？是因为无法重新渲染jsx
state状态可行就是因为可以重新触发函数组件，并且state状态具备组件的记忆
import { useState } from "react";
function App(){
const [count,setCount] = useState(0) //可记忆
const handleClick = ()=>{
setCount(count+1) //可以重新触发函数组件的执行
}
console.log(123)
return (
<div>
hello App
<button onClick={handleClick}>点击</button>
{count}
</div>
)
}
export default App渲染与提交的过程分为三个步骤
步骤一：触发一次渲染
组件的初次渲染，createRoot().render()
内部状态更新，触发渲染送入队列
步骤二：渲染您的组件
在初次进行渲染的时候，react会调用根组件
内部状态更新会渲染对应的函数组件
步骤三：提交到DOM上
初次渲染，appendChild() DOM API
内部状态更新，更新差异的DOM节点
