问答

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

作者:admin 2021-07-18 我要评论

一个方法,修改 state 多次 , 结果造成 render 触发 多次 而我要的,只是最后一次修改得时候执行render就行了 请问有什么方法减少render触发次数吗? 除了 shou...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

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

除了 shouldComponentUpdate 因为我的 stateprops 太多了,且层级深, 对比起来感觉消耗性能?

###

可以设一个“锁”,简单粗暴地控制 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();
    }
}

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

###

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • react 能不能修改state不触发render?

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

  • react-native statusbar 偶尔失效问题

    react-native statusbar 偶尔失效问题

  • 如何限制多开窗口看视频?

    如何限制多开窗口看视频?

  • jquery weui如何控制页面高度?

    jquery weui如何控制页面高度?

腾讯云代理商
海外云服务器