mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Clarify implementation of tick() in Lifecycle docs (#11002)
This documentation change clarifies how the method `tick()` relates to the example given in the State and Lifecycle documentation. Why this change is necessary is because it may be confusing for beginners who may mistake `tick()` to be a lifecycle API hook. To clarify, the verbiage is changed so that it becomes more clear that the method is specific to the component and not the API.
This commit is contained in:
committed by
Brian Vaughn
parent
a88738d7ae
commit
bd915caaf7
@@ -261,7 +261,7 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle hook:
|
||||
}
|
||||
```
|
||||
|
||||
Finally, we will implement the `tick()` method that runs every second.
|
||||
Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
|
||||
|
||||
It will use `this.setState()` to schedule updates to the component local state:
|
||||
|
||||
@@ -315,7 +315,7 @@ Let's quickly recap what's going on and the order in which the methods are calle
|
||||
|
||||
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) 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.
|
||||
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 the component's `tick()` method once a second.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user