跟踪 React 组件重新渲染的原因

Question

是否有系统的方法来调试导致组件在 React 中重新渲染的原因？我放了一个简单的 console.log() 来查看它渲染了多少次，但是我无法弄清楚是什么导致组件多次渲染，即在我的例子中（4 次）。是否存在显示时间线和/或所有组件树渲染和顺序的工具？

原文由 jasan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 React Devtools 分析器工具检查组件（重新）渲染的原因。无需更改代码。请参阅 React 团队的博客文章 Introducing the React Profiler 。

首先，转到设置 cog > profiler，然后选择“记录每个组件呈现的原因”

原文由 lukasvo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你想要一个没有任何外部依赖的简短片段，我觉得这很有用

componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`Prop '${key}' changed`)
  );
  if (this.state) {
    Object.entries(this.state).forEach(([key, val]) =>
      prevState[key] !== val && console.log(`State '${key}' changed`)
    );
  }
}

这是我用来跟踪功能组件更新的小钩子

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
}

// Usage
function MyComponent(props) {
  useTraceUpdate(props);
  return <div>{props.children}</div>;
}

原文由 Jacob Rask 发布，翻译遵循 CC BY-SA 4.0 许可协议