Add more documentation to Context page
Tay Yang Shun committed
Nov 11, 2015 at 07:05 UTC
7d0ee245144a29d66acde6abc56a209baa4cc0c3
2 files changed
+74
docs/docs/12-context.ko-KR.md
+37
@@ -124,6 +124,43 @@ var MessageList = React.createClass({
124
125
원한다면 전체 React 컴포넌트를 프로퍼티로 전달할 수도 있습니다.
126
127
+## Referencing context in lifecycle methods
128
+
129
+If `contextTypes` is defined within a component, the following lifecycle methods will receive an additional parameter, the `context` object:
130
+
131
+```javascript
132
+void componentWillReceiveProps(
133
+ object nextProps, object nextContext
134
+)
135
+
136
+boolean shouldComponentUpdate(
137
+ object nextProps, object nextState, object nextContext
138
+)
139
+
140
+void componentWillUpdate(
141
+ object nextProps, object nextState, object nextContext
142
+)
143
+
144
+void componentDidUpdate(
145
+ object prevProps, object prevState, object prevContext
146
+)
147
+```
148
+
149
+## Referencing context in stateless functional components
150
+
151
+Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows the `Button` component above written as a stateless functional component.
152
+
153
+```javascript
154
+function Button(props, context) {
155
+ return (
156
+ <button style={{'{{'}}background: context.color}}>
157
+ {props.children}
158
+ </button>
159
+ );
160
+}
161
+Button.contextTypes = {color: React.PropTypes.string};
162
+```
163
+
164
## 컨텍스트를 사용하지 말아야 하는 경우
165
166
대부분의 경우, 깔끔한 코드를 위해 전역 변수를 피하는 것과 마찬가지로 컨텍스트의 사용을 피해야 합니다. 특히 "타이핑을 줄이거나" 명시적인 프로퍼티 전달 대신 이를 사용하려는 경우 다시 한번 생각해 보세요.
docs/docs/12-context.md
+37
@@ -123,6 +123,43 @@ By passing down the relevant info in the `Menu` component, each `MenuItem` can c
123
124
Recall that you can also pass entire React components in props if you'd like to.
125
126
+## Referencing context in lifecycle methods
127
+
128
+If `contextTypes` is defined within a component, the following lifecycle methods will receive an additional parameter, the `context` object:
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
+## Referencing context in stateless functional components
149
+
150
+Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows the `Button` component above written as a stateless functional component.
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
## When not to use context
164
165
Just as global variables are best avoided when writing clear code, you should avoid using context in most cases. In particular, think twice before using it to "save typing" and using it instead of passing explicit props.