性能比较this.setState(this.state)VS this.setState({})
我有一个场景,这是我从API获取数据。在这种情况下,只要我从商店获得新的值,我的componentWillReceiveProps()就会被触发。性能比较this.setState(this.state)VS this.setState({})
componentWillReceiveProps(newProps){
if(newProps.listOne){
this.state.listOne = newProps.listOne;
}
if(newProps.listTwo){
this.state.listTwo = newProps.listTwo;
}
this.setState(this.state);
}
现在,作为每反应DOC是不恰当的使用this.setState(this.state);
所以牢记这一点,更新状态将
componentWillReceiveProps(newProps){
if(newProps.listOne){
this.setState({listOne : newProps.listOne});
}
if(newProps.listTwo){
this.setState({listTwo : newProps.listTwo});
}
}
在案例1我的渲染被触发一次我已经复制所有数据后的状态的方式。 在第二种情况下我的渲染(和所有中间的生命周期)被触发,每次我如果条件得到满足。
所以我不明白它是如何提高自己的表现。可以说我们正在谈论的不是一个,而是很多有条件的状态更新。
如果你想打电话setState
只有一次,你可以做这样的:
componentWillReceiveProps(newProps) {
// Copy the state instead of mutating this.state directly.
const state = { ...this.state };
if (newProps.listOne) {
state.listOne = newProps.listOne;
}
if (newProps.listTwo) {
state.listTwo = newProps.listTwo;
}
this.setState(state);
}
您可以进一步通过使用真正的不可变的数据结构由库,如Immuable.js的手段改善这里。
然而,像这样的手动配料更新是不是从性能角度必要的;由于这是一个生命周期钩子,React已经在内部批量处理这些更新。不过,如果您想使用setState
的回调,则可能有意义。
嗨,你做状态的深层副本所提供的解决方案,它会进一步降低性能,因为现在整个虚拟DOM得到一个新的虚拟DOM更换,而不是更新状态的参考与早期的情况。 – Rishabh
这不是一个深层次的副本。但是不要介意,我的答案不止于此。例如,多个setState调用由React分批生成的信息。 –
请提供您收到的答案反馈;不管这是否“这不能解决我的问题”或将其标记为已接受。 –