即使组件的属性或状态没有更改，也会调用React-shouldComponentUpdate（）

Question

我在React组件中添加了生命周期方法

  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    console.log(this.props, this.state);

    return false;  
  },

我的问题是，即使nextProps和nextState与当前props和状态完全相同，也会在组件上调用此方法。当我比较nextProps和this.props的console.log语句时，它们完全相同。国家也是如此。

那么为什么应该调用ComponentUpdate呢？

每当我更改父组件的状态时，就会调用它。但是没有任何道具或状态在实际组件上发生变化。那么为什么叫它呢？

顺便说一句，我正在用流星反应

进一步澄清：

我想知道为什么要首先调用函数shouldComponentUpdate。该组件的状态或支柱均未更改。但父组件的状态正在更改。

Answer 1

每次调用shouldComponentUpdate（）：

• 每次重新渲染父组件时，都会更新道具。这包括使用完全相同的道具值进行重新渲染的所有场景

有时，允许重新渲染循环进行可能很有用，即使新值与旧值完全相同。例如，当您的组件通过道具接收到用户ID（可能未更改），并从某处获取新消息并将其置于状态时。

另外，“shoulldcomponentupdate（）”，作为一种单独的检查更改的方法，只有在发生更改时才进行更新，这使得代码具有良好的可维护性：

• 制作没有shouldComponentUpdate（）的第一个版本，并确保相同的道具集和状态导致呈现相同的结果
• 添加并调试shouldComponentUpdate（）

调试接受输入（状态和道具）并呈现输出的“状态机”相对容易。调试管理状态更改的机器要困难得多。

Answer 2

React自动调用shouldComponentUpdate，它在重新渲染过程开始之前触发（在父组件的情况下）所以很自然，它经常被调用。

此函数的默认实现返回true，因此要停止重新渲染，需要在此处返回false：

  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    console.log(this.props, this.state);

    return false;  
  }

高级关注点，反应页面

因此，总之，React通过允许用户使用shouldComponentUpdate缩短进程，避免执行协调DOM子树所需的昂贵DOM操作，

Answer 3

应该组件更新的目的是指示是否应该调用渲染。在您的案例中，某个父组件已经呈现，并表示它还希望呈现您的子组件的实例。

shouldComponentUpdate是您缩短渲染时间并说“不要麻烦，这里没有任何更改”的机会。

现在，关于你的问题，“既然什么都没变，为什么还要叫它”？React不会比较新旧道具本身。你可以得到一个混合代码来为你做这件事，（即。PureRenderMixin），但是默认情况下React只允许渲染运行。

React不做比较的原因有两个。首先，与分析道具和状态相比，跳过渲染的性能节省可能微不足道。由于React的渲染机制已经过优化，以避免不必要的DOM操作，因此它可以假定组件需要更新并期望合理的性能。其次，进行比较并不完全是直截了当的。你的道具是原始的吗？，一成不变的？，数组？，一个复杂的物体？，有必要进行深入的比较吗？

React的模型是“默认情况下，我们将呈现所有要求的内容。如果您希望某些内容不符合性能要求，请继续并通过实现shouldComponentUpdate”告诉我们。