concept

The lifecycle is an abstract concept, and developers tend to remember functions like componentDidMount, componentWilMount, and so on. However, these functions are not its life cycle, just the functions that are called in order during the life cycle. Mount -> update -> uninstall the React component complete process, is the lifecycle.

The process to comb

Mount stage:

The mount phase is the process from component initialization to completion of loading.

  1. constructor

    Initialize state and bind functions

  2. getDerivedStateFromProps

    Cause the component to update state when the props changes

    Trigger time:

    • When props is passed in
    • When state changes
    • ForceUpdate is called

    One of the most common errors is to think that getDerivedStateFromProps is called only when props changes, when in fact getDerivedStateFromProps is called whenever the parent component is re-rendered. So the external parameter, the props, is going to change when it’s passed in.

  3. UNSAFE_componentWillMount

    ComponentWillMount, originally used to do something before a component is loaded, is now deprecated. Because with React’s asynchronous rendering mechanism, this method can be called multiple times.

    A common error is componentWillMount and server isomorphic rendering, if in the function to initiate a network request, pull data, then will be in the server side and the client side respectively execute a. It is recommended to pull data in componentDidMount.

  4. render

    The JSX structure returned by the Render function describes the specific render content. Keep in mind, however, that the Render function doesn’t actually render components, it relies on the React operation to render the JSX description structure. One more thing to note is that the render function should be a pure function and should have no side effects, such as calling setState or binding events.

    So why not setState? Because the render function is called every time it renders, and setState triggers the render, it creates an infinite loop.

    So why not bind events? Because it is easy to call registration frequently.

  5. componentDidMount

    ComponentDidMount is used to do something when a component is loaded, such as making a network request or binding event, and is called after Render. But does componentDidMount have to be called after the real DOM has been drawn? On the browser side, we can think of it this way.

    But in other scenarios, especially React Native, componentDidMount doesn’t mean that the actual interface has been drawn. The view may still be drawing due to machine performance limitations.

Update phase:

The update phase is when external props come in, or when state changes.

  1. UNSAFE_componentWillReceiveProps

    This function is deprecated because its function can be replaced by the function getDerivedStateFromProps. In addition, when there is getDerivedStateFromProps UNSAFE_componentWillReceiveProps will not be invoked

  2. getDerivedStateFromProps

    This is consistent with the mount phase.

  3. shouldComponentUpdate

    This method determines whether a new render needs to be triggered by returning true or false. Because rendering triggers the last level, it is also a battleground for performance optimization. Prevent unnecessary rendering by adding judgment criteria.

    React officially provides a generic optimization called the PureComponent. The core principle of PureComponent is to implement shouldComponentUpdate by default, which uses a shallow comparison between props and state to determine whether to trigger an update.

  4. UNSAFE_componentWillUpdate

    Deprecated as well, since subsequent React asynchronous render designs might have components pause to update the render.

  5. render

    This is consistent with the mount phase.

  6. getSnapshotBeforeUpdate

    The getSnapshotBeforeUpdate method, which works with React’s new asynchronous rendering mechanism, is called before a DOM update occurs and returns the value as the third parameter to componentDidUpdate.

    // Official example:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if(snapshot ! = =null) {
      const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; }}render() {
    return (
      <div ref={this.listRef}>{/ _... contents... _ /}</div>
    );
  }
Copy the code

  7. componentDidUpdate

    As in the case above, the return value of getSnapshotBeforeUpdate is used as the third parameter to componentDidUpdate.

    SetState can be used in componentDidUpdate, which triggers rerendering, but must be used with care to avoid an infinite loop.

Unloading stage:

The uninstall phase is the phase when a component is unloaded to destruction.

  1. componentWillUnmount

    This function is primarily used to perform cleanup.

    A common Bug is forgetting to cancel the timer in componentWillUnmount, causing timed operations to continue after the component has been destroyed. Therefore, you must unbind the event and cancel the timer at this stage.