无法理解componentDidUpdate这个生命周期是什么时候调用的？

Question

怎么理解componentDidUpdate这个函数的生命周期是怎么发生的？

import React from 'react';

import PropTypes from 'prop-types';



class Select extends React.Component {
    constructor(props) {
        super(props);
        this.state = {val: 5};
    }

    componentDidMount() { // 渲染完成后调用一次，这个时候DOM结构已经渲染了
        // alert("选择渲染完成");
        this.setState({
            val: this.state.val+'=渲染完成了'
        }, () => {
            console.log(this.state.val)
        });
    }


    componentDidUpdate() { // 组件更新结束之后执行，在初始化render时不执行
        this.setState({
            val: this.state.val+'=更新中'
        }, () => {
            console.log(this.state.val)
        });
    }

    render() {
        const value = this.state.val;
        const options = [1,2,3,4,5,6];
        return (
            <div>
                <h1>{value}</h1>
                <select>
                    {options.map(option => (
                        <option value={option} key={option}>
                            {option}
                        </option>
                    ))}
                </select>
            </div>

        );
    }
}

export default Select;

Answer 1

你写的代码注释中说的很清晰了

组件更新结束之后执行，在初始化render时不执行

因为你在 componentDidMount 里面 setState 导致组件更新，组件更新后会执行 componentDidUpdate，此时你又在 componentDidUpdate 里面 setState 又会导致组件更新，造成成死循环了，如果要避免死循环，需要谨慎的在 componentDidUpdate 里面使用 setState

Answer 2

注释中说的很清晰了

组件更新结束之后执行，在初始化render时不执行

因为你在 componentDidMount 里面 setState 导致组件更新，组件更新后会执行 componentDidUpdate，此时你又在 componentDidUpdate 里面 setState 又会导致组件更新，造成成死循环了，如果要避免死循环，需要谨慎的在 componentDidUpdate 里面使用 setState

Answer 3

和书面意思一样，就是更新后调用
但是你这里的问题是setState会再次触发update，所以你在didUpdate触发setState就会造成无限循环