1.组件通讯介绍
组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。而在这个过程串,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。
2.组件的props
- 组件是封闭的,要接收外部数据应该通过props来实现
- props的作用:接收传递给组件的数据
- 传递数据∶给组件标签添加属性
接收数据︰函数组件通过参数props接收数据,类组件通过this.props接收数据
//类组件接受
class He1lo extends React.component {render () {
return (
<div>接收到的数据:{this.props.age}</div>)
t
)
}
<Hello name="jack" age={19]/>
//函数组件接收
<Hello name="jack" age={19] />
function Hello (props){
console.log (props)return(
<div>接收到数据: {props.name}</div>
)
)
props特点
- 1.可以给组件传递任意类型的数据
- 2. props是只读的对象,只能读取属性的值,无法修改对象
- 3.注意∶使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props !
3.组件通讯的三种方式
3.1父组件传递数据给子组件
- 1.父组件提供要传递的state数据
- 2.给子组件标签添加属性,值为state 中的数据3.子组件中通过props接收父组件中传递的数据
class Parent extends React.component {state = { lastName: '王·}
render() {
return (
<div>
传递数据给子组件:<child name={this.state.lastName} /></div>
)
}}
function child(props) {
return <div>子组件接收到数据:{props. name}</div>
3.2子组件传递数据给父组件
思路∶利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数
- 1.父组件提供一个回调函数(用于接收数据)
- 2.将该函数作为属性的值,传递给子组件
- 3.子组件通过props调用回调函数
- 4.将子组件的数据作为参数传递给回调函数
3.3兄弟组件
- 将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态思想︰状态提升
- 公共父组件职责∶1.提供共享状态⒉.提供操作共享状态的方法
- 要通讯的子组件只需通过props接收状态或操作状态的方法
4.Context
总结:
- 1.如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯2. Context提供了两个组件:Provider和Consumer
- 3. Provider组件:用来提供数据
- 4. Consumer组件:用来消费数据