Browse Source

Minor changes, make it more verbose

main
Dan Abramov 8 years ago
committed by GitHub
parent
commit
9c9ecee640
  1. 12
      docs/state-and-lifecycle.md

12
docs/state-and-lifecycle.md

@ -311,15 +311,15 @@ Now the clock ticks every second.
Let's quickly recap what's going on and the order in which the methods are called:
1) When the `Clock` component is passed to `ReactDOM.render()`, it calls the constructor of the Clock class and initializes the state.
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.
2) Then the component's render method is called and the output is rendered to DOM.
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.
3) After that the `componentDidMount()` method runs which sets up the interval at which the `tick()` method is called.
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.
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.
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.
5) Finally, when this cycle stops, `componentWillUnmount()` method is called and the memory for that component is freed.
5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle hook so the timer is stopped.
## Using State Correctly
@ -341,7 +341,7 @@ Instead, use `setState()`:
this.setState({comment: 'Hello'});
```
The only place where you can assign `this.state()` is the constructor.
The only place where you can assign `this.state` is the constructor.
### State Updates May Be Asynchronous

Loading…
Cancel
Save