你可以使用React Devtools profiler工具检查组件(重新)渲染的原因。不需要更改代码。请参阅react团队的博客文章介绍react分析器。

首先，转到设置cog > profiler，并选择“记录每个组件渲染的原因”

@jpdelatorre的回答很好地强调了React组件可能重新渲染的一般原因。

我只是想更深入地探讨一个例子:当道具改变时。找出导致React组件重新渲染的原因是一个常见的问题，根据我的经验，很多时候追踪这个问题需要确定哪些道具发生了变化。

React组件在接收到新道具时重新渲染。他们可以收到新的道具，比如:

<MyComponent prop1={currentPosition} prop2={myVariable} />

或者如果MyComponent连接到redux存储:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

只要prop1、prop2、prop3或prop4的值发生变化，MyComponent就会重新呈现。对于4个道具，通过在渲染块的开头放置console.log(this.props)来跟踪哪些道具正在改变并不太难。但随着部件越来越复杂，道具越来越多，这种方法就站不住脚了。

下面是一个有用的方法(为了方便使用lodash)来确定哪些道具更改导致组件重新渲染:

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

将这个片段添加到组件中可以帮助揭示导致可疑的重新呈现的罪魁祸首，而且很多时候这有助于揭示注入组件的不必要数据。

奇怪的是没有人给出这个答案，但我发现它非常有用，特别是因为道具的变化几乎总是深嵌套的。

钩子粉丝:

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

“老”平衡粉丝:

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

附注:我仍然更喜欢使用HOC(高阶组件)，因为有时你在顶部解构了你的道具，Jacob的解决方案不太适合

免责声明:与包所有者没有任何联系。只是点击数十次，试图找出深嵌套对象之间的差异，这是一种痛苦。

你可以使用React Devtools profiler工具检查组件(重新)渲染的原因。不需要更改代码。请参阅react团队的博客文章介绍react分析器。

首先，转到设置cog > profiler，并选择“记录每个组件渲染的原因”

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

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>;
}

下面是React组件将重新渲染的一些实例。

Parent component rerender Calling this.setState() within the component. This will trigger the following component lifecycle methods shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate Changes in component's props. This will trigger componentWillReceiveProps > shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate (connect method of react-redux trigger this when there are applicable changes in the Redux store) calling this.forceUpdate which is similar to this.setState

您可以通过在shouldComponentUpdate中实现检查来最小化组件的渲染器，如果不需要，则返回false。

另一种方法是使用React。PureComponent或无状态组件。纯的和无状态的组件只有在它的道具发生变化时才会重新渲染。