一个方法,修改state
多次, 结果造成render
触发多次
而我要的,只是最后一次修改得时候执行render就行了
请问有什么方法减少render触发次数吗?
除了 shouldComponentUpdate
因为我的 state
和 props
太多了,且层级深, 对比起来感觉消耗性能?
可以设一个“锁”,简单粗暴地控制 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里?