javascript - 性能比较 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 文档，使用 this.setState(this.state); 是不合适的；

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

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

}

在情况 1 中，我的渲染仅在我将所有数据复制到状态后才会触发一次。在情况 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 等库使用真正不可变的数据结构来进一步改进。

但是，从性能 Angular 来看，没有必要像这样手动批量更新。 React 内部已经批量更新了这些更新，因为这是一个生命周期 Hook 。不过，如果您想使用 setState 的回调，这可能是有意义的。