react里面this.setState采坑

this.setState和react组件生命周期里面的state的关系密不可分,我们知道react是无法主动修改或者操作this.state,而是需要使用this.setState来更新this.state.state是数据,是react组件状态,官网文档说明构造函数是唯一可以给this.state赋值的地方:

this.setState({comment: 'Hello'});

文档中同时表示State的更新可能是异步的,之所以所可能是异步的是因为数据的修改涉及到多个生命周期钩子函数里面,我们无法预料何时开始,涉及多次执行,React 可能会把多个setState()调用合并成一个调用。
说了这么多直接上代码,发现里面的一些小坑:

export class Home extends Component {
    constructor() {
        super();
        this.state = {
            count: 1,
        }
    }
 componentWillMount() {
        this.setState({
            count: 'a' + 1
        });

        console.log(this.state.count); //打印1

        this.setState({
            count: 'a' + 1
        });
        
        console.log(this.state.count);  //打印1
       
    };

    componentDidMount(){
        this.setState({
            count: 'a' + 1
        });

        console.log(this.state.count); //打印a1

        this.setState({
            count: 'a' + 1
        });
        
        console.log(this.state.count);  //打印a1
    }
    render() {
        return (
            <div>
                <h2>state:{this.state.count}</h2>
                //页面显示a1
             
            </div>
        )
    }
}

同样的操作调用this.setState,componentWillMount中两个consoloe.log均为初始状态1，componentDidMount里面执行是a1,render中的state.count则也a1,
componentWillMount中的setState均执行了，但是state的更新是延迟的，所以log出的state均为初始值,
而render中的state.name则在state更新之后，而且只有第二次的a1起了作用
react中componentWillMount 和 componentDidMount的区别:

componentDidMount //（装载完成），在render之后调用
componentDidMount  //render之后并不会立即调用，而是所有的子组件都render完之后才可以调用

componentWillMount //将要装载，在render之前调用,componentWillMount在React最新的版本里面已经被废弃了。如果是最新版本的react使用此钩子函数控制台会报,componentWillMount has been renamed, and is not recommended for use
将componentWillMount重命名为UNSAFE\_componentWillMount以在非严格模式下禁止显示此警告。在React 17.x中，只有UNSAFE\_名称起作用。要将所有已弃用的生命周期重命名为其新名称，可以在项目源文件夹中运行\`npx react-codemodname-unsafe-lifecycles\`。