如果我给反应组件赋予相同的状态会发生什么

时间:2018-02-22 05:04:39

标签: reactjs

我有一个react组件,其状态从很多地方改变,我没有足够的检查来控制是否应该调用setState。这意味着很多时候setState被调用并更新一个具有相同值的状态的键(键之前已经存在的值)。

我的假设是,如果myPreviousState的值和myNewState的值保持不变,则不会发生重新渲染。这是真的吗?

如果不是这样,你能告诉我将我以前的状态与新状态进行深度比较的最佳方法是什么?

3 个答案:

答案 0 :(得分:1)

您可以使用 shouldComponentUpdate 来避免不必要的渲染

shouldComponentUpdate(nextProps, nextState) {

  // check here whether u want to update your component or not using nextProps or
  // nextState

  if (this.state.myValue !== nextState.myValue) {

      return true; //update component

  } else {

      return false //dont update
  }
}

答案 1 :(得分:1)

如果您的状态被许多组件更改,那么您应该使用状态管理库,如redux/mobx,组件将侦听并在需要时更改该变量。 Redux(因为它是最受欢迎的)将负责您的视图更新。

相信我,当你继续为共享状态做setState时,它会非常混乱。

答案 2 :(得分:1)

您应该使用 shouldComponentUpdate ,您可以轻松区分nextState和currentState。

当这两种状态相同时,你可以避免调用渲染函数。

您可以访问以下链接: -

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_component_update.html

但基于性能的您必须使用像redux这样的状态管理库。您可以控制状态对象。