Shen point! This is a very water is water articles, copied from react Chinese documents , meaning react paper describes the life cycle of the execution order functions, as well as the life cycle functions and specific role.
The different stages of the life cycle of function execution order
Mount (Mounting)
It refers to the component mount is instantiated and inserted into the dom
In the following order:
constructor -> getDerivedStateFromProps -> render -> componentDidMount
Update (Updating)
When the state changes cause changes or props update
In the following order:
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
Uninstall
Refers to the component is removed from dom
Only the implementation of a life cycle:
componentWillUnmount
to sum up
This figure shows the image of the life cycle of the execution order function at different stages.
Each function describes the life cycle
Commonly used life cycle
render()
render () method of class is the only component that must be implemented.
When the render is called, it will check for changes this.props and this.state and returns one of the following types:
- React elements. Usually created by the JSX. For example,
<div />you are React rendered DOM node<MyComponent />will be rendered React custom components, either<div />or<MyComponent />both React elements. - Array or fragments. So that the method can return a plurality of render elements.
- Portals. You can render a child node to a different DOM sub-tree.
- String or numeric type. They will be rendered as text nodes in the DOM
- Boolean or null. Nothing rendering. (Mainly used to support the return test &&
<Child />model, which test a Boolean type.)
render () function should be a pure function, which means that without modifying the components of the state, return the same results each call, and it does not directly interact with the browser.
note
If shouldComponentUpdate () returns false, it does not call the render ().
constructor()
Before React mount components, will call its constructor.
Typically, React, the only two things in the constructor:
- By giving this.state assignment object to initialize the internal state.
- Binding instance as event handlers
note:
- In implementing constructor for React.Component subclass should call super (props) before before other statements. Otherwise, this.props undefined bug may occur in the constructor.
- Do not call setState in it
componentDidMount()
componentDidMount () will mount assembly after (insert DOM tree) called immediately.
Here you can
- setState
- Operating dom
- Obtaining initial data transmission request
note
You can directly call setState in componentDidMount () in (). It will trigger additional rendering, but this rendering happens before the browser screen is updated. Thus ensuring that even in the case render () two calls, the user will not see an intermediate state. Be careful with this mode, because it can cause performance problems. In general, you should initialize state in the constructor () in. If you rendering of a DOM node is dependent on the size or position, such as to achieve modals tooltips and the like in the case, you can use this manner.
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate () will be called immediately after the update (dom has been updated). For the first time rendering does not perform this method.
When the component update, DOM can operate here. If you were compared before and after the update of the props, you can also select a network request here. (E.g., when the props not changed, the network will not perform the request).
You can also call in componentDidUpdate () directly setState (), but please note that it must be wrapped in a condition language element, the processing as described above as an example, otherwise it will lead to an endless loop. It will also result in additional re-rendered, though invisible to the user, but will affect component performance. Do not props "mirror image" to state, consider the direct use of props.
If the component implements getSnapshotBeforeUpdate () Life Cycle (not used), it will return value as componentDidUpdate () of the third parameter "snapshot" parameter. Otherwise, this parameter will be undefined.
componentWillUnmount()
componentWillUnmount () will be called directly before uninstalling components and destroyed.
Here you can free up resources, such as clearing the timer, removeEventListener
note
Here setState edge is invalid, it should not be called
Unusual life cycle
shouldComponentUpdate(nextProps, nextState)
His return value can decide whether to re-render when props or state changes, shouldComponentUpdate () is called before rendering execution. The return value defaults to true. The first method is not called when rendering or use forceUpdate ().
This is a performance optimization of life-cycle approach, only if you know exactly what they are doing it is to use
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps will render method calls before calling, and will be called the initial loading and subsequent updates. It should return an object to update the state, or null if not update anything.
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate () once rendered output in recent (submitted to the DOM node) before calling. It makes the assembly to entrap some of the information (e.g., scroll positions) from the DOM before changes. Any value returned by this life cycle passed as an argument to componentDidUpdate ().
This usage is not common, but it may appear in the UI process, if necessary, in a special manner such as chat thread rolling position.
Errors associated with the life cycle
static getDerivedStateFromError()
This life cycle will throw an error in the offspring called after assembly. It will throw an error as a parameter and returns a value to update the state
note
getDerivedStateFromError () calls in the rendering stage, and therefore does not allow side effects. In case of such situations, use componentDidCatch ().
componentDidCatch()
This life cycle is called descendants of this component is thrown after the error. It accepts two parameters:
- error - error thrown.
- info - componentStack key with the object, wherein the initiator component comprises about the error message stack.
componentDidCatch () will "submit" phase is called, thus allowing the implementation of side effects. It should be used to record the event of an error or the like.