react 能不能修改state不触发render?

Question

一个方法，修改state多次， 结果造成render触发多次

而我要的，只是最后一次修改得时候执行render就行了

请问有什么方法减少render触发次数吗？

除了 shouldComponentUpdate 因为我的 state 和 props 太多了，且层级深， 对比起来感觉消耗性能？

Answer 1

可以设一个“锁”，简单粗暴地控制 shouldComponentUpdate 的返回值:

class YourComponent extends React.Component{

    // state 锁，其为真的时候更新 state 不触发渲染
    stateLock = false;
    
    shouldComponentUpdate(){
        const { stateLock } = this;
        
        return !stateLock;
    }
    
    // 方法 A，只更新状态，不需要立即渲染，先锁起来
    methodA(){
        this.stateLock = true;
        this.setState();
    }
    
    // 方法 B ，更新之后需要尽快渲染，那就把锁打开
    methodB(){
        this.stateLock = false;
        this.setState();
    }
}

通过这种设置“锁”的方式，也可以进行其他更加更加精细的控制，比如进行节流和防抖，这里就不展开讲了。

Answer 2

不知道你具体应用场景，同一个合成事件回调中多次setState会合并的

Answer 3

这是不是说明你这个值就不该存在state里？