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

发布于 2022-09-12 03:14:13 字数 275 浏览 12 评论 0

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

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

输什么也不输骨气 2022-09-19 03:14:13

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

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

虫児飞 2022-09-19 03:14:13

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

黯淡〆 2022-09-19 03:14:13

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文