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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

如果你想打电话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（{}） 的全部内容， 来源链接： utcz.com/qa/265451.html

回到顶部