Javascript 此.setState（this.state）与此.setState（{}）的性能比较

我有一个从api获取数据的场景。在这种情况下，每当我从存储中获得新值时，就会触发我的组件ReceiveProps（）

componentWillReceiveProps(newProps){
   if(newProps.listOne){
     this.state.listOne = newProps.listOne;
   }
   if(newProps.listTwo){
     this.state.listTwo = newProps.listTwo;
   }

   this.setState(this.state);

}

现在根据react文档，使用此.setState（this.state）是不合适的

所以记住更新状态的方法是

componentWillReceiveProps(newProps){
   if(newProps.listOne){
     this.setState({listOne : newProps.listOne});
   }
   if(newProps.listTwo){
     this.setState({listTwo : newProps.listTwo});
   }

}

在案例1中，仅在将所有数据复制到状态后触发一次渲染。 在案例2中，每次满足If条件时，都会触发渲染（以及所有中间生命周期）

---

所以我不明白它是如何提高我的表现的。假设我们讨论的不是一个而是大量的状态条件更新。

如果您只想调用一次

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，而不是像前面的情况那样更新状态引用。它不是深度副本。但没关系，我的答案不止这些。例如，通过React对多个setState调用进行批处理的信息。