React组件通信

• 父组件向子组件通信

  • 父组件通过props向子组件传递需要的信息

• 子组件向父组件通信

  • 子组件间接回调父组件的setState的方法来改变父组件的state
  • 新的state通过props的形式再次被子组件获取
  • 回调函数
    • 子组件通过父组件传递的函数，将参数传递给父组件使用

React16.3新特性：Context API

• 跨级组件通信Context（发布订阅者模式）

  • 类似于有个数据源，组件可以订阅这个数据源
  • 在简单场景下可以代替部分redux的功能

使用方法：

• React.createContext()方法

  • 创建一个context，它可以接收一个变量或者对象作为参数
  • 这个传入值为context的默认值

const PriceContext = React.createContext(‘price')

这样就创建了一个Context

• Provider组件

  • Provider就是用来创建数据源的，它是给所有子组件提供数据源的根组件

  • 一个provider可以包含多个Consumer组件，如果Provider组件嵌套的话

  • 它接受一个value作为props，用来传递值，它会改变context的默认值

<PriceContext.Provider value={100}>
</PriceContext.Provider>

• Consumer组件

  • Consumer表示接受数据的组件，它接受一个函数作为子元素

  • 这个函数会接收context传递的值，返回一个react组件

  • Consumer组件必须包含在Provider里面(层级上)

<PriceContext.Consumer>
    { /*这里是一个函数*/}
    {
        price => <div>price: {price}</div>
    }
</PriceContext.Consumer>