接上一篇文章继续学习组件通讯

兄弟组件

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• 思想：状态提升

• 公共父组件职责：

  • 提供共享状态
  • 提供操作共享状态的方法

• 要通讯的子组件只需通过 props 接收状态或操作状态的方法

组件通讯-context

基本概念

处理方式：使用 props 一层层组件往下传递（繁琐）

作用：跨组件传递数据（比如：主题、语言等）

实现思路

• 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。

const { Provider, Consumer } = React.createContext()

• 使用 Provider 组件作为父节点。

<Provider>
    <div className="App">
        <Child1 />
    </div>
</Provider>

• 设置 value 属性，表示要传递的数据。

<Provider value="pink">

• 调用 Consumer 组件接收数据。

<Consumer>
    {data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>

总结：

1. 如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯
2. Context提供了两个组件：Provider 和 Consumer
3. Provider组件：用来提供数据
4. Consumer组件：用来消费数据

props深入

children属性

children属性：表示该组件的子节点，只要组件有子节点，props就有该属性

children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

function Hello(props) {
  return (
    <div>
      该组件的子节点：{props.children}
    </div>
  )
}
​
<Hello>我是子节点</Hello>
​

props校验

目的：校验接收的props的数据类型，增加组件的健壮性

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据

如果传入的数据格式不对，可能会导致组件内部报错。组件的使用者不能很明确的知道错误的原因。 props校验允许在创建组件的时候，就约定props的格式、类型等

作用：规定接收的props的类型必须为数组，如果不是数组就会报错，增加组件的健壮性。