React 组件高级 组件之间的关系

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组件:用来消费数据