组件之间如何进行通信？
组件通信
组件的通信主要借助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 = 0count ++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节点
