V16.3 before

The illustration

Life cycle overview

React’s life cycle is roughly divided

  • The component is first rendered into the Dom tree
  • Component update rerenders caused by component state, props changes
  • Component Unmount deletes a component from the Dom tree

Component loading process

  • Constructor: Initialize state here, bind the member function this environment, and localise the props
  • ComponentWillMount: A preloaded function cannot modify state, and if it does, it will not render the new data state. Anything done in this function can be carried forward to the constructor.
  • Render:The render function, the only function that must not be omitted, must have a return value. Returning null or false means that no DOM elements are rendered. It is a pure function for rendering only, and the return value depends entirely on this.state and this.props. There is no way to modify props, state, pull data, etc. The render function returns the JSX object,This function does not render to the DOM tree because the React library determines when to actually render.(setState is an asynchronous function)
  • ComponentDidMount: Mount success function. This function is no longer called immediately after the Render call, because the Render function simply returns the JSX object and is not immediately mounted to the DOM tree, whereas componentDidMount is called after the component has been rendered into the DOM tree. Also, the componentDidMount function is not called for server-side rendering.

Component update process

When a component is mounted to the DOM tree, the props/state is modified to cause the component to update. The update process calls the following lifecycle functions:

  • ComponentWillReceiveProps (nextProps) : This function is executed after the component is updated and the parent component’s render function (regardless of whether the data has changed) is called. This. props gets the current props, and nextProps passes in the props to be updated. It is common to reset state by comparing this.props and nextProps.
  • ShouldComponentUpdate (nextProps, nextState) : Return bool true to update, false to not update. ShouldComponentUpdate (nextProps, nextState) : Return bool True to update, false to not update.
  • ComponentWillUpdate: The pre-update function.
  • Render: render function
  • ComponentDidUpdate: Update completion function. The lifecycle function of the update process is used less than the lifecycle function of the load process. Commonly used is componentWillReceiveProps, componentShouldUpdate, the former is often used for components according to the two data before and after go to set up the state, while the latter is used to optimize, avoid unnecessary rendering.

Component uninstallation process

The uninstall process involves only one function componentWillUnmount, which is called once before the React component is removed from the DOM tree. This function is often used to remove some of the side effects of componentDidMount, such as cleaning timers and removing non-React elements created in componentDidMount.

Matters needing attention

setState

To change state, you can only use this.setstate () and cannot use this.state.value=’myData’ to setState, either because it will not drive rerendering, or because it is likely to be replaced by later operations, causing unpredictable errors. React also uses state queues to update setState asynchronously, avoiding repeated state updates frequently. When multiple setState operations are performed at the same time, React intelligently merges them into one setState. When the setState operation is completed, react can be used

    setState({}, () => {
    // Do the state change here
    })
Copy the code

The call to setState is risky, and in some lifecycle functions the call may be useless or even cause a crash. Initialization of state is usually done in constructors; SetState can be called in componentWillMount, componentDidMount. SetState can call componentWillReceiveProps, componentDidUpdate in the update process

render

Render is an asynchronous function that does not generate a Dom directly, but a virtual Dom node (a javaScript data structure that simulates HTML Dom nodes). When to generate a real Dom tree depends on the react framework’s own calculations. Refer to Tencent front-end

After V16.3

The illustration

New life cycle

getDerivedStateFromProps

  • Trigger time (fixed in V16.4) : Every time a component is rerender, including after the component is built (after the virtual DOM, before the actual DOM is mounted), and every time a new props or state is retrieved. As of V16.3, updates to component state do not trigger this lifecycle.
  • Each time a new props is received, an object is returned as the new state. Returning NULL indicates that no state needs to be updated.
  • Cooperate with componentDidUpdate, can cover all usage of componentWillReceiveProps
  • GetDerivedStateFromProps is a static function, so this is not accessible from the function body and the output is entirely dependent on the input.
static getDerivedStateFromProps(nextProps, prevState) {
  // Calculate the expected state changes based on nextProps and prevState, and the return is sent to setState
}
Copy the code

getSnapshotBeforeUpdate

  • Trigger time: Update occurs after render and before component DOM rendering.
  • Returns a value as the third argument to componentDidUpdate.
  • With componentDidUpdate, you can override all usage of componentWillUpdate.

Delete the life cycle

  1. componentWillReceiveProps
  2. componentWillMount
  3. componentWillUpdate

differences

All of the removed lifecycle functions work fine for now, but when they are used they will be red-flagged in development mode and will be completely deprecated in the next major update (React V17).

Life cycle function replacement overview

  static getDerivedStateFromProps(nextProps, prevState) {
    4. Updating state based on props
    7. Fetching external data when props change
  }
  constructor() {
	1. Initializing state
  }
 
  componentDidMount() {
	2. Fetching external data
	3. Adding event listeners (or subscriptions)
  }
  
  shouldComponentUpdate() {
  }
  render() {
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
	8. Reading DOM properties before an update
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
	5. Invoking external callbacks
	6. Side effects on props change
  }
  
  componentWillUnmount() {
  }
  
  // before
  
  componentWillMount() {
  	// 1. Initializing state
  	// 2. Fetching external data
  	// 3. Adding event listeners (or subscriptions)
  }
  componentWillReceiveProps() {
  	// 4. Updating state based on props
  	// 6. Side effects on props change
  	// 7. Fetching external data when props change
  }
  componentWillUpdate(nextProps, nextState) {
  	// 5. Invoking external callbacks
  	// 8. Reading DOM properties before an update
  }
Copy the code

Reference range of ink