即使该组件的props或state没有改变,也会调用React shouldComponentUpdate()

Question

我将生命周期方法添加到我的React组件中

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

    return false;  
  },

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

那么为什么要调用shouldComponentUpdate呢？

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

fyi,我正在使用React和Meteor

进一步澄清:

我想知道为什么函数shouldComponentUpdate首先被调用.该组件的状态或道具都没有变化.但是父组件的状态正在发生变化.

Answer 1

目的shouldComponentUpdate是表明是否render应该调用.在您的情况下,某些父组件已呈现并指示它还要呈现子组件的实例.

shouldComponentUpdate 是你的短路渲染的机会,并说'不要打扰,没有改变这里'.

现在,对于你的问题,"为什么它甚至被调用,因为没有改变"？React不会比较旧的和新的道具本身.你可以得到一个mixin为你做,(即.PureRenderMixin),但默认情况下React只是让渲染运行.

React不进行比较的原因有几个原因.首先,与分析道具和状态相比,跳过渲染的性能节省可以忽略不计.由于React的渲染机制已经过优化以避免不必要的DOM操作,因此它可以假设组件需要更新并期望合理的性能.其次,进行比较并不是直截了当的.你的道具是一个原始的？,一个不可变的？,一个数组？一个复杂的对象？,是否需要深入比较？

React的模型是"我们将在默认情况下呈现所有问题.如果您想要选择退出性能,请继续通过实施告诉我们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() 每次调用:

• 每次重新渲染父组件都会更新道具.这包括使用完全相同的道具值进行重新渲染的所有场景.
• 通过调用setState()(反应允许的唯一方式)更新状态.这包括状态值完全相同的所有场景.

有时让重新渲染周期通过会很有用,即使新值与旧值完全相同.例如,当您的组件通过props收到用户ID(可以保持不变),并从某个地方获取新消息并将其置于状态时.

另外,'shouldComponentUpdate()`,作为检查更改的单独方法,只有在更改了某些内容时才会更新,从而实现了良好的可维护代码:

• 制作第一个版本shouldComponentUpdate(),并确保同一组道具和状态导致呈现相同的结果.
• 添加和调试 shouldComponentUpdate()

调试接收输入(状态和道具)并呈现输出的"状态机"相对容易.调试管理状态更改的计算机要困难得多.