Context：一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
- Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
- props传值的缺陷：使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢逐层向上寻找初值。
相关API
-
React.createContext：创建一个上下文的容器(组件), defaultValue可以设置共享的
默认数据
const {Provider, Consumer} = React.createContext(defaultValue); -
Provider(生产者)：用于生产共享数据的地方。 value:放置共享的数据。
<Provider value={/*共享的数据*/}> /*里面可以渲染对应的内容*/ </Provider> -
Consumer(消费者)： 接收Provider产生数据。
Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。
当然也可以单独使用，那就只能接收到上文提到的defaultValue
<Consumer> {value => /*根据上下文 进行渲染相应内容*/} </Consumer>
注意：在应用开发中一般不用context, 一般都用它的封装react插件
网友评论