REACT--组件通信

组件之间如何进行通信？

组件通信

组件的通信主要借助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

渲染与提交的过程分为三个步骤