React setState详解和React性能优化

为什么要使用setState修改数据

• 原因就是希望通过修改了state之后，能够使得React根据最新的state来重新渲染界面

setState异步更新

• setState修改值之后不能立即访问，值的更新是异步的；
• 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
• 最好的办法应该是获取到多个更新，之后进行批量更新
• 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
• state和props不能保持一致性，会在开发中产生很多的问题；

setState之后如何立即获取到值呢？

两种方法：

• 利用setState的回调函数：

//方式一：获取异步更新后的数据
        //setState(要更新的state对象,回调函数)
        this.setState({
            message: "2021的征途是星辰大海"
        },() => {
            console.log(this.state.message);
        })

• 利用生命周期函数componetDidUpdate

componentDidUpdate() {
        console.log("componentDidUpdate",this.state.message)
    }

React更新机制