性能比较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我的渲染被触发一次我已经复制所有数据后的状态的方式。在第二种情况下我的渲染（和所有中间的生命周期）被触发，每次我如果条件得到满足。

所以我不明白它是如何提高自己的表现。可以说我们正在谈论的不是一个，而是很多有条件的状态更新。

来源

2017-12-27 Rishabh

请提供您收到的答案反馈;不管这是否“这不能解决我的问题”或将其标记为已接受。 –

如果你想打电话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的回调，则可能有意义。

来源

2017-12-27 14:22:13

嗨，你做状态的深层副本所提供的解决方案，它会进一步降低性能，因为现在整个虚拟DOM得到一个新的虚拟DOM更换，而不是更新状态的参考与早期的情况。 – Rishabh

这不是一个深层次的副本。但是不要介意，我的答案不止于此。例如，多个setState调用由React分批生成的信息。 –

性能比较this.setState（this.state）VS this.setState（{}）

回答

相关问题