|
| 1 | +--- |
| 2 | +id: context-zh-CN |
| 3 | +title: Context |
| 4 | +permalink: context-zh-CN.html |
| 5 | +prev: advanced-performance-zh-CN.html |
| 6 | +--- |
| 7 | + |
| 8 | +React最大的优势之一是他很容易从你的React组件里跟踪数据流动。当你看着一个组件，你可以很容易准确看出哪个props被传入，这让你的APP很容易推断。 |
| 9 | + |
| 10 | +偶尔，你想通过组件树传递数据，而不在每一级上手工下传prop，React的 "context" 让你做到这点。 |
| 11 | + |
| 12 | +＞ 注意： |
| 13 | +＞ |
| 14 | +＞ Context是一个先进的实验性特性．这个 API 很可能在未来版本变化. |
| 15 | +> |
| 16 | +> 大多数应用将不会需要用到 context. 尤其是如果你刚开始用React,你很可能不会想用 context.使用 context 将会使你的代码很难理解因为它让数据流不清晰.它类似于在你的应用里使用全局变量传递state. |
| 17 | +> |
| 18 | +> **如果你必须使用 context ,保守的使用它** |
| 19 | +> |
| 20 | +> 不论你正在创建一个应用或者是库,试着分离你对 context 的使用到一个小区域,并尽可能避免直接使用 context API,以便在API变动时容易升级. |
| 21 | +
|
| 22 | +## 从树里自动传递info |
| 23 | + |
| 24 | +假设你有一个这样的结构: |
| 25 | + |
| 26 | +```javascript |
| 27 | +var Button = React.createClass({ |
| 28 | + render: function() { |
| 29 | + return ( |
| 30 | + <button style={{'{{'}}background: this.props.color}}> |
| 31 | + {this.props.children} |
| 32 | + </button> |
| 33 | + ); |
| 34 | + } |
| 35 | +}); |
| 36 | + |
| 37 | +var Message = React.createClass({ |
| 38 | + render: function() { |
| 39 | + return ( |
| 40 | + <div> |
| 41 | + {this.props.text} <Button color={this.props.color}>Delete</Button> |
| 42 | + </div> |
| 43 | + ); |
| 44 | + } |
| 45 | +}); |
| 46 | + |
| 47 | +var MessageList = React.createClass({ |
| 48 | + render: function() { |
| 49 | + var color = "purple"; |
| 50 | + var children = this.props.messages.map(function(message) { |
| 51 | + return <Message text={message.text} color={color} />; |
| 52 | + }); |
| 53 | + return <div>{children}</div>; |
| 54 | + } |
| 55 | +}); |
| 56 | +``` |
| 57 | + |
| 58 | +在这里例子里,我们手工穿透一个 `color` prop 以便于恰当格式化 `Button` 和 `Message` 组件.主题是一个很好的例子,当你可能想整个子树都可以访问一部分信息时(比如color). 使用 context 我们可以自动传过这个树: |
| 59 | + |
| 60 | +```javascript{2-4,7,18,25-30,33} |
| 61 | +var Button = React.createClass({ |
| 62 | + contextTypes: { |
| 63 | + color: React.PropTypes.string |
| 64 | + }, |
| 65 | + render: function() { |
| 66 | + return ( |
| 67 | + <button style={{'{{'}}background: this.context.color}}> |
| 68 | + {this.props.children} |
| 69 | + </button> |
| 70 | + ); |
| 71 | + } |
| 72 | +}); |
| 73 | +
|
| 74 | +var Message = React.createClass({ |
| 75 | + render: function() { |
| 76 | + return ( |
| 77 | + <div> |
| 78 | + {this.props.text} <Button>Delete</Button> |
| 79 | + </div> |
| 80 | + ); |
| 81 | + } |
| 82 | +}); |
| 83 | +
|
| 84 | +var MessageList = React.createClass({ |
| 85 | + childContextTypes: { |
| 86 | + color: React.PropTypes.string |
| 87 | + }, |
| 88 | + getChildContext: function() { |
| 89 | + return {color: "purple"}; |
| 90 | + }, |
| 91 | + render: function() { |
| 92 | + var children = this.props.messages.map(function(message) { |
| 93 | + return <Message text={message.text} />; |
| 94 | + }); |
| 95 | + return <div>{children}</div>; |
| 96 | + } |
| 97 | +}); |
| 98 | +``` |
| 99 | + |
| 100 | +通过添加 `childContextTypes` 和 `getChildContext` 到 `MessageList` ( context 提供),React下传信息到子树中的任何组件(在这个例子中, `Button`可以由定义 `contextTypes`来访问它). |
| 101 | + |
| 102 | +如果 `contextTypes` 没有定义,那么 `this.context` 将是一个空对象. |
| 103 | + |
| 104 | +## 父子耦合 |
| 105 | + |
| 106 | +Context 同样可以使你构建这样的 APT: |
| 107 | + |
| 108 | +```javascript |
| 109 | +<Menu> |
| 110 | + <MenuItem>aubergine</MenuItem> |
| 111 | + <MenuItem>butternut squash</MenuItem> |
| 112 | + <MenuItem>clementine</MenuItem> |
| 113 | +</Menu> |
| 114 | +``` |
| 115 | + |
| 116 | +通过在 `Menu` 组件下传相关的信息,每个 `MenuItem` 可以与包含他们的 `Menu` 组件沟通. |
| 117 | + |
| 118 | +**在你用这个API构建组件以前,考虑一下是否有清晰的替代方案** 我们 喜欢像这样简单的用数组传递items: |
| 119 | + |
| 120 | +```javascript |
| 121 | +<Menu items={['aubergine', 'butternut squash', 'clementine']} /> |
| 122 | +``` |
| 123 | + |
| 124 | +记住你同样可以在props里传递整个React组件,如果你想. |
| 125 | + |
| 126 | +## 在生命周期方法里引用 context |
| 127 | + |
| 128 | +如果 `contextTypes` 在一个组件中定义,接下来的生命周期方法会收到一个额外的参数, `context` 对象: |
| 129 | + |
| 130 | +```javascript |
| 131 | +void componentWillReceiveProps( |
| 132 | + object nextProps, object nextContext |
| 133 | +) |
| 134 | + |
| 135 | +boolean shouldComponentUpdate( |
| 136 | + object nextProps, object nextState, object nextContext |
| 137 | +) |
| 138 | + |
| 139 | +void componentWillUpdate( |
| 140 | + object nextProps, object nextState, object nextContext |
| 141 | +) |
| 142 | + |
| 143 | +void componentDidUpdate( |
| 144 | + object prevProps, object prevState, object prevContext |
| 145 | +) |
| 146 | +``` |
| 147 | + |
| 148 | +## 在无状态函数组件里引用 context |
| 149 | + |
| 150 | +无状态函数同样能够引用 `context` 如果 `contextTypes` 被定义为函数的属性.下面的代码展示了被写为无状态函数组件的 `Button` 组件. |
| 151 | + |
| 152 | +```javascript |
| 153 | +function Button(props, context) { |
| 154 | + return ( |
| 155 | + <button style={{'{{'}}background: context.color}}> |
| 156 | + {props.children} |
| 157 | + </button> |
| 158 | + ); |
| 159 | +} |
| 160 | +Button.contextTypes = {color: React.PropTypes.string}; |
| 161 | +``` |
| 162 | + |
| 163 | +## 什么时候不用 context |
| 164 | + |
| 165 | +正像全局变量是在写清晰代码时最好要避免的,你应该在大多数情况下避免使用context. 特别是,在用它来"节省输入"和代替显示传入props时要三思. |
| 166 | + |
| 167 | +context最好的使用场景是隐式的传入登录的用户,当前的语言,或者主题信息.要不然所有这些可能就是全局变量,但是context让你限定他们到一个单独的React树里. |
| 168 | + |
| 169 | +不要用context在组件里传递你的模型数据.通过树显示的传递你的数据更容易理解.使用context使你的组件更耦合和不可复用,因为 依赖于他们在哪里渲染,他们会表现不同的行为. |
| 170 | + |
| 171 | +## 已知的限制 |
| 172 | + |
| 173 | +如果一个由组件提供的context值变动,使用那个值的子级不会更新,如果一个直接的父级从 `shouldComponentUpdate` 返回 `false` .详见 issue [#2517](https://github.com/facebook/react/issues/2517) . |
0 commit comments