Minor changes, make it more verbose
Dan Abramov committed
Nov 18, 2016 at 18:24 UTC
a0044be99d8d6980c46aef44ac00be507641c73c
1 file changed
+6
-6
docs/docs/state-and-lifecycle.md
+6
-6
@@ -311,15 +311,15 @@ Now the clock ticks every second.
311
312
Let's quickly recap what's going on and the order in which the methods are called:
313
314
-1) When the `Clock` component is passed to `ReactDOM.render()`, it calls the constructor of the Clock class and initializes the state.
314
+1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
315
316
-2) Then the component's render method is called and the output is rendered to DOM.
316
+2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
317
318
-3) After that the `componentDidMount()` method runs which sets up the interval at which the `tick()` method is called.
318
+3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle hook. Inside it, the `Clock` component asks the browser to set up a timer to call `tick()` once a second.
319
320
-4) The `tick()` method being called every second is responsible for changing the state which in turn triggers the `render()` method to update the component.
320
+4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
321
322
-5) Finally, when this cycle stops, `componentWillUnmount()` method is called and the memory for that component is freed.
322
+5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle hook so the timer is stopped.
323
324
## Using State Correctly
325
@@ -341,7 +341,7 @@ Instead, use `setState()`:
341
this.setState({comment: 'Hello'});
342
```
343
344
-The only place where you can assign `this.state()` is the constructor.
344
+The only place where you can assign `this.state` is the constructor.
345
346
### State Updates May Be Asynchronous
347