This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

React 16 The React 16 life cycle is a process that can be used to implement the React 16 life cycle

preface

1. ReactThree phases of the life cycle

Initialization phase > Update Phase > Uninstall phase

One, from the firstReact 16The previous life cycle looks like

Here’s the old life cycle diagram:

Main life cycle interpretation:

  1. componentWillMount: A stage before the page is mounted
  2. componentDidMount: The life cycle of a page after it has been mounted, usually through which data on the page can be initialized (such as network requests)
  3. componentWillRecieveProps: This life cycle is often very earlyrenderIs not triggered, as the name implies, usually isThe parent componentThe incomingpropsThis lifecycle is triggered by a change that results in a re-rendering, but may result if the parent component is constantly passing statepropsKeep refreshing, resulting in page endless loop
  4. shouldComponentUpdate: Can be used for performance optimization by determining whether the state has changed to trigger rerendering
  5. componentWillUpdate: Update phase,shouldComponentUpdatereturntrueAfter the trigger
  6. componentDidUpdate: The update is complete and the new element can be accessed
  7. componentWillUnmount: Unloading stage, which can be used for some cleanup work

Second,16.3 the ReactLife cycle of

Three,16.4 the ReactLife cycle of

The following is16.4 the ReactLife cycle diagram of:

The difference between React 16.3 and React 16.4 lifecycle. getDerivedStateFromProps runs through the Update phase in React 16.4, whereas in React 16.3 it is only affected by props

React 16.4 Lifecycle Comparison and improvements to older versions:

  1. 16.4 the ReactDeprecated the following insecurities (UNSAFE) life cycle:
    • componentWillMount: Usage error — incomponentWillMountIt is called immediately after the runrenderHowever, the data requested by the developer asynchronously is not rendered properly, causing problems with the first rendering of spatio-temporal data
    • componentWillRecieveProps: of the parent componentpropsThis life cycle is triggered, but it is also triggered as soon as the parent component is re-rendered, and secondA child component that uses this life cycle falls into a rendering loop if calling a function passed by the parent causes the parent to re-render
    • componentWillUpdateThe first rendering of the component does not trigger this phase
  2. 16.4 the ReactThe following life cycles have been added:
    • Static method static getDerivedStateFromProps: Static methods are not inherited by component instances, so the method cannot passthisTo get the method or data of the component instance. This method is called before each rendering of the component, and the function returns an object to updatestateThe function is passed a new onepropsAnd the currentstateAccording to the newpropsFollow the developer logicstateMake adjustments, and finally return the object pairstateUpdate, returnnullDoes not update)
    • getSnapshotBeforeUpdate: Any return value from this method is passed as the third argumentcomponentDidUpdateThe life cycle is the equivalent ofDOMTake a snapshot of the current state of the element before updating

Four, notes

  • componentWillRecievePropsIs triggered not just because of the parent componentpropsHave changed. This method is triggered whenever the parent component re-renders, and it may cause the component to change the state of the parent component, causing an infinite loop of rendering
  • Don’t incomponentWillMountMethod because the mount process can beReactMultiple interruptions mean multiple triggerscomponentWillMount, causing memory leaks
  • componentWillXXXIn the future it will be interrupted many times during the mount phase due to the asynchronous rendering mechanism, so methods that only trigger once (such as requests) should be placedcomponentDidMountIn the
  • ReactThe new version will ensure that users see the latest versionUIBefore the refreshcomponentWillUpdatetocomponentDidUpdateBetween thesetStateThe operation is carried out in this processsetStateThis will result in a rendering loop