首页 文章

即使该组件的props或state没有改变，也会调用React shouldComponentUpdate（）

提问于
浏览 次
14

我将生命周期方法添加到我的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 首先被调用 . 该组件的状态或道具都没有变化 . 但是父组件的状态正在发生变化 .

reactjs

3 回答

  • 17

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

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

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

    return false;  
  }

    Advanced Concerns, React page

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

    回复于
  • 10

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

    shouldComponentUpdate 是你的短路渲染的机会，然后说这个没什么变化的' .

    现在，问你的问题，"why was it even called since nothing changed"？ React不会比较旧的和新的道具本身 . 你可以为你做一个mixin（即 PureRenderMixin ），但默认情况下React只是让渲染运行 .

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

    React的模型是“我们将在默认情况下呈现所有要求 . 如果您想要选择退出性能，请继续通过实施 shouldComponentUpdate 告诉我们” .

    回复于
  • 5

    每次调用 shouldComponentUpdate() ：

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

    • 通过调用 setState() （反应允许的唯一方式）更新状态 . 这包括状态值完全相同的所有场景 .

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

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

    • 制作没有 shouldComponentUpdate() 的第一个版本，并确保同一组道具和状态导致呈现相同的结果 .

    • 添加和调试 shouldComponentUpdate()

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

    回复于

相关问题