Detailed explanation of life cycle usage in React

This time I will bring you a detailed explanation of the use of life cycle in React. What are the precautions for using the life cycle in React? Here are practical cases, let’s take a look.

Life cycle

React is a process of rendering virtual DOM into real DOM. This process is called the life cycle of the component. React divides this cycle into three stages, and each stage provides two processing methods: will and did. Will refers to before it happens, and did refers to after it happens.

• Mounting: Component rendering process

• componentWillMount()

• componentDidMount()

• Updating: Component update process

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps, nextState)

• ##componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• Unmounting: component removal process

• componentWillUnmount()

• This stage There is no corresponding did method

Mounting

refers to the first rendering or the re-rendering after the component is removed from the DOM. In the latter scenario, getDefaultProps# will not be executed.

##Execution order

getDefaultProps

1. ##getInitialState

2. ##componentWillMount

3. render

4. ##componentDidMount

5. componentWillMount
   This method is called before render, also That is to say, the real DOM elements cannot be obtained in this method.
This method is triggered before rendering for the first time and before rendering again when state changes.

componentDidMount

This method is called after render, that is, this method can directly obtain the real DOM element.
This method is triggered after the first rendering and after rendering again when the state changes.

var MountingComponent = React.createClass({
    componentWillMount: function(){
        console.log(this.refs.h1) // undefined
    },
    componentDidMount: function(){
        console.log(this.refs.h1) // h1 对象
    },
    render: function(){
        return <h1 ref="h1">Lifecycle-Mounting</h1>;
    }                
})
ReactDOM.render(<MountingComponent />, document.getElementById('p1'));

Updating

It will be triggered when the props or state of the component are changed

Execution sequence

componentWillReceiveProps

1. shouldComponentUpdate

2. componentWillUpdate

3. render

4. componentDidUpdate

5. componentWillReceiveProps
   Called when the component receives a new prop. This method will not be called when initializing render.
The method accepts one parameter

newProps: for the updated props

Note: props cannot be changed manually. The normal scenario is that the current component is called as a child component, and then the props of the component are changed in the parent component

shouldComponentUpdate

After the component is mounted, shouldComponentUpdate will be called every time setState is called to determine whether the component needs to be re-rendered. Returns true by default and needs to be re-rendered. In more complex applications, some data changes do not affect the interface display. You can make judgments here to optimize rendering efficiency.
The method accepts two parameters

newProps: updated props

newState: updated state

The method must return boolen. If true is returned, subsequent componentWillUpdate, render, and componentDidUpdate will be executed. Otherwise it will not be executed.

componentWillUpdate

is called when the component receives new props or state but has not yet rendered. Will not be called during initialization.
The method accepts two parameters

nextProps: props to be updated

nextState: state to be updated

componentDidUpdate

Called immediately after the component completes the update. Will not be called during initialization.
The method accepts two parameters

prevProps: props before update

nextState: state before update

var UpdatingComponent = React.createClass({
    getInitialState: function() {
        return {
            data:0
        };
    },           
    setNewNumber: function() {
        //当 state 发生改变的时候，state 对应的组件会重新挂载
        //会触发 componentWillUpdate、componentDidUpdate
        this.setState({data: this.state.data + 1})
    },
    //参数 newProps：已更新的 props
    componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!', newProps)
    },        
    //参数 newProps：已更新的 props
    //参数 newState：已更新的 state  
    //必须要返回 boolen，true 则执行componentWillUpdate、render、componentDidUpdate。反之则不执行。
    shouldComponentUpdate: function(newProps, newState){
        console.log('shouldComponentUpdate',newProps, newState);
        return (newState.data > 0 && newState.data % 2 == 0);
    },                          
    //参数 nextProps：将要更新的 props
    //参数 nextState：将要更新的 state
    componentWillUpdate: function(nextProps, nextState){
        console.log(nextProps, nextState, this.refs.p1)
    },
    //参数 prevProps：更新前的 props
    //参数 nextState：更新前的 state                
    componentDidUpdate: function(prevProps, prevState){
        console.log(prevProps, prevState) 
    },
    render: function(){
        return (
            <p>
                <button onClick={this.setNewNumber}>INCREMENT</button>
                <h3>{this.state.data}</h3>
            </p>
        );
    }                
})
ReactDOM.render(<UpdatingComponent/>, document.getElementById('p2'));

Unmounting

在组件从 DOM 中移除的时候立刻被调用，这个阶段没有对应的 did 方法

componentWillUnmount

方法适用在父子组件的结构中，当某个条件符合的场景下，该子组件会被渲染

重新渲染的执行顺序

1. getInitialState

2. componentWillMount

3. render

4. componentDidMount

var ChildrenComponent = React.createClass({
    componentWillUnmount: function(){
        console.log('componentWillUnmount');
    },
    render: function(){
        return <h3>{this.props.myNumber}</h3>
    }
})
var UnmountingComponent = React.createClass({
    getInitialState: function() {
        return {
            data:0
        };
    },
    setNewNumber: function() {
        this.setState({data: this.state.data + 1})
    },
    render: function () {
        var content;
        //当条件不符合时 ChildrenComponent 会被移除，然后会触发方组件的 componentWillUnmount 方法
        //当条件重新符合时，会重新渲染组件 ChildrenComponent
        if(this.state.data % 2 == 0){
            content = <ChildrenComponent myNumber = {this.state.data}></ChildrenComponent>;
        } else {
            content = <h3>{this.state.data}</h3>;
        }
        return (
            <p>
                <button onClick = {this.setNewNumber}>INCREMENT</button>
                {content}
            </p>
        );
    }
})
ReactDOM.render(<UnmountingComponent/>, document.getElementById('p3'));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

PromiseA+的实现步骤详解

The above is the detailed content of Detailed explanation of life cycle usage in React. For more information, please follow other related articles on the PHP Chinese website!