React学习(9)——组件Context

 学习 React  原创  管理员  2017-09-08 07:05

概要:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递。但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传递,我们希望在某一级子组件中,直接得到上N级父组件中props中的值。

虽然Redux应用全局就只有一个Store,在我们的大部分组件中,经常会直接导入Store,以此来访问全局的Store。

在实际的工作中,一个应用的规模会很大,不会所有的组件都放在一个库中。想想看,当开发一个独立的组件的时候时候,都不知道自己的这个组件会被哪个应用所使用,当然不可能预先知道定义唯一的Redux Store的文件位置。所以,在组件中直接导入Store是非常不利于组件的复用。

一个应用,最好只有一个地方直接导入Store,这个位置当然应该是在调用最顶层React组件的位置。比如,应用的入口文件src/index.js中导入即可。

不让组件直接导入Store,那就只能让组件的上层组件把Store传递下来。首先想到的当然是props,毕竟,React组件就是用props来传递父子组件之间的数据的。不过,这种方法有一个很大的缺陷,就是从上到下,所有的组件都需要传递这个props,不管中间的组件是否真的有用到。

React提供了一个叫Context的功能,可以完美地解决这个问题。Context就是上下文的意思,让一个树状组件上的所有组件都能访问一个共同的对象,这个需要上级组件与下级组件的配合。

上级组件需要宣称自己支持context,并且提供一个函数来返回代表Context的对象。然后,这个上级组件之下的所有组件,只要宣称自己需要这个context,就可以通过this.context得到这个对象。

注意:

  1. 宣称自己支持Context的组件:即最外层的Provider组件必须要实现getChildContext,必须要定义childContextTypes的类型约束条件。
  2. 宣称自己需要使用Context的组件:必须定义contextTypes的类型约束条件

对于Redux,因为Redux的Store封装得很好,就是说一个组件能访问全局的Store,却不可能直接修改Store的状态,这样就克服了作为全局对象的缺点。而且一个应用只有一个Store,这个Store是Context里面唯一需要的东西,所以,使用Context来传递Store是一个不错的选择。当然,您也可以用Context来传递普通对象。

完整示例:

 

深入浅出React和Redux  

编辑:myweb   最后更新于:2017-09-07 22:30


版权声明:本站所有原创内容受到法律的严格保护,版权归本站所有。如果您觉得我们的内容有价值,您仍然可以进行自由传播,但必须显著地标识或说明此内容在本站的链接地址。




联系我:help@wodeabc.com鄂ICP备14016278号-2
©2016-2021 我的ABC All Rights Reserved.
友情链接: 一起编程网
点击这里给我发消息
我的ABC交流群