this.setState(this.state) 与 this.setState({}) 的性能比较

Question

我有一个从 api 获取数据的场景。在这种情况下，每当我从商店获得新值时，都会触发我的 componentWillReceiveProps()。

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

   this.setState(this.state);

}

现在根据 react doc，使用 this.setState(this.state); 是不合适的；

因此请记住，更新状态的方式是

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

}

在案例 1 中，在我将所有数据复制到 state 后，我的 Render 只会触发一次。 在案例 2 中，我的渲染（和所有中间生命周期）被触发，每次我的 If 条件得到满足。

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

Answer 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 的回调，这可能是有意义的。