1. Introduce the life cycle

UnmountComponentAtNode () Unmounts components

ComponentDidMount () the component is mounted

ComponentWillReceiveProps () component will accept parameters (child components will accept the new parameter is triggered when the life cycle of a function)

ShouldComponentUpdate () whether the component can be updated, must have Boolean worth returning, if true continues the life cycle, if false does not perform any subsequent operations, equivalent to updating the valve of the operation

The componentWillUpdate () component is about to be updated

The componentDidUpdate () component is updated

Render () initializes the render, executes the render after the status update

The componentWillUnmount () component will be unmounted

Older version lifecycle functions:

Mount time :(during initialization operation)

Constructor => componentWillMount => componentDidMount => componentWillUnmount

When updated :(there are three routes)

  1. Normal update operation: setState performs the update operation

    Constructor => componentWillMount => Render => componentDidMount => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate => componentWillUnmount

  2. Mandatory update operation: forceUpdate() status no update, mandatory update, not controlled by shouldComponentUpdate valve

    Constructor => componentWillMount => componentDidMount => (forceUpdate => componentWillUpdate =>) render => componentDidUpdate => componentWillUnmount

  3. The parent component render: when the component internal trigger componentWillReceiveProps when receive new parameters

    constructor => componentWillMount => render => componentDidMount => componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate => componentWillUnmount

conclusionThe React lifecycle is executed in three phases:

  1. Initialization phase: triggered by reactdom.render () — initial render

1.) constructor ()

2.) componentWillMount ()

3). The render ()

4).ComponentDidmount () =====> common

This hook is used for initialization, such as starting a timer, sending network requests, and subscribing messages

  1. Update phase: triggered by the component’s internal this.setsate () or parent’s Render

1). ShouldComponentUpdate ()

2.) componentWillUpdate ()

3).render () =====> a must use one

4). ComponentDidUpdate ()

  1. Unload components: by ReactDOM unmountComponentAtNode triggered ()

1).componentWillunmount () =====

This hook usually does some finishing work, such as turning off timers and unsubscribing messages

New version of the lifecycle function:

New version changed life cycle componentWillReceiveProps componentWillMount, componentWillUpdate use, should be increased when using prefix UNSAFE_ tag “outdated” life cycle method. These methods are still valid, but they are not recommended for new code. Added static getDerivedStateFromProps() static method getSnapshotBeforeUpdate()

  • static getDerivedStateFromProps(props, state) ：getDerivedStateFromPropsIs called before the Render method is called, and is called both during the initial mount and during subsequent updates. It should return an object to update state, if returnednullNothing is updated. This method is suitable for rare use cases where the value of state depends on props at all times. Derived state, however, leads to code redundancy and makes components difficult to maintain, and is not recommended
  • getSnapshotBeforeUpdate(prevProps, prevState) ：getSnapshotBeforeUpdate()Called before the last render output (committed to the DOM node). It enables the component to capture some information (for example, scroll position) from the DOM before changes are made. Any return value from this lifecycle method is passed as a parameter tocomponentDidUpdate(). This usage is not common, but it can occur in UI processing, such as chat threads that need to handle scrolling positions in a special way. The life cycle should return the value of snapshot (ornull).

Conclusion:

  1. Initialization phase: triggered by reactdom.render () — initial render

1.) constructor ()

2).getderivedStateFromprops ()

3). The render ()

4).ComponentDidmount () =====> common

This hook is used for initialization, such as starting timers, sending network requests, and subscribing to messages

  1. Update phase: triggered by the rerender of this.setsate () inside the component or the parent component

1). GetDerivedStateFromProps ()

2.) shouldComponentUpdate ()

3). The render ()

4). GetSnapshotBeforeUpdate ()

5）. componentDidUpdate()

  1. Unload components: by ReactDOM unmountComponentAtNode triggered ()

1).componentWillunmount () =====

This is where you do some finishing touches, such as turning off timers and unsubscribing messages

Common lifecycle functions:

\1. render: Initialize render or update render call

\2. ComponentDidMount: Enable listening, send Ajax request

\3. ComponentWillUnmount: Do some finishing work, such as: clean timer

Obsolete life cycle functions:

\1. componentWillMount

\2. componentWillReceiveProps

\3. componentWillUpdate

If used now, there will be a warning, the next big version will need to be prefixed with UNSAFE_ to use, it may be completely deprecated, not recommended.

DOM diffing algorithm:

The smallest granularity of comparison is the tag. The content of the tag will be updated, but the tag inside the tag will be compared. If the tag is not changed, it will not be updated.

What key does (internal principle) : Index is not recommended and can be problematic under certain conditions

Classic interview questions:

1). React /vue key (What’s the inner workings of Key?)

2). Why is it best not to use index for key when iterating through a list?

\1. Functions of key in virtual DOM:

1). To put it simply: The key is the identity of the virtual DOM object and plays an extremely important role in updating the display.

React generates a new virtual DOM when the data in the state changes.

React then makes a diff comparison between [new virtual DOM] and [old virtual DOM]. The comparison rules are as follows:

A. The same key as the new virtual DOM is found in the old virtual DOM:

(1). If the content in the virtual DOM remains unchanged, use the previous real DOM directly

(2). If the content in the virtual DOM changes, a new real DOM is generated and the previous real DOM in the page is replaced

B. The old virtual DOM does not have the same key as the new virtual DOM

Create a new real DOM from the data and render it to the page

\2. Possible problems caused by using index as key:

\1. If the data is added or deleted in reverse order, the sequence is broken:

Produces unnecessary real DOM updates to the ==> interface, which is fine, but inefficient.

If the structure also contains the DOM of the input class:

Error DOM update ==> interface problem.

\ 3. Attention! If there is no sequential operation such as adding or deleting data in reverse order,

For rendering lists only for presentation, using index as the key is fine.

\3. How to select key in development? :

1. It is better to use the unique identifier of each piece of data as the key, such as id, mobile phone number, ID number, student number and other unique values.

2. If you are sure to simply display data, use index.