React16:Context API

React16:Context API的使用

Posted by wang chong on April 14, 2019

Context API是 react16中重点推荐使用的。

Context API 主要解决props向对层嵌套的子组件传递的问题(爷孙组件props传递),原理是定义一个全局对象,通过订阅发布的方式进行数据的传递。

React.crateContext

Context Api使用React.crateContext方法构建,并且定义一个默认值。

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

返回的对象中有两个组件。这两个组件组合成订阅发布模式

  • Provider 提供者(发布者)
  • Consumer 消费者(订阅者)

在爷孙组件传值的场景中,爷爷组件负责数据的提供,孙子组件负责数据的消费。

Provider组件

Provide是提供者,在爷孙组件中,provide就相当于爷爷组件向孙子组件提供数据的组件。

所有需要传递的数据放在Provider中,所有的在子组件都可以接受的到。形成子孙节点传递的扁平化。

使用Provider
<Provider
    value =     
>
    {this.props.children}
</Provider>

注意:value不是传值中的属性,而是必须要这样写。

使用Consumer

Consumer是消费者,也就是说,在爷孙组件中,爷爷组件提供资源,孙子组件来消费。

Consumer同样也是一个组件。接受到的是爷爷组件中Provider组件发送过来的值。

const Child = (props,context) => {
    return (
        <Consumer>
            {value => (
                <p className="text-warning">子节点=》newContext :{value.newContext}</p>
            )}
        </Consumer>
    

由于Provider组件中所传递的对象是this.props.children,所以必须这样写:

export default class Context extends React.Component {
    render(){
        return (
            <Parent>
                <Child/>
            </Parent>
        )
    }
}

总结

Context API提供了一套订阅发布者机制,这套机制出现,在爷孙组件传值上方便了很多。同时,我认为这个机制的出现,可以尝试取代react-reduxProvider