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);

}

现在根据反应文档，使用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等库使用真正不可变的数据结构来进一步改进。

但是，从性能的角度来看，不需要手动批处理这样的更新; React内部批处理这些更新，因为这是一个生命周期钩子。但是，如果你想使用setState的回调，那可能是有意义的。

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

1 个答案: