每个渲染后未触发componentDidUpdate

Question

我正在跟踪componentDidUpdate和render何时使用日志语句触发。

componentDidUpdate之后不会触发render中的日志语句。我已经使用断点来确认这不是时间问题。

我正在使用“渲染道具”来包装有问题的组件。我的代码（已分解）如下。这是日志记录的输出。有时我会被componentDidUpdate开除，但前后不一致，这永远不是最终决定，RENDER总是最后出现在我的日志中，而不是UPDATE。

据我了解，componentDidUpdate应该会触发，即使更新未修改DOM（尽管此处的渲染 do 也会更新DOM。）我已经尝试过React@16.11.x和React@16.12.x的结果相同。

class MyWrapper extends React.PureComponent {

  render() {
  const { buttonDefinitions } = this.props;
    return (
      <InfoProvider
        render={infoProps => {
          return (
            <MyMenu
              {...{ buttonDefinitions, infoProps }}
            />
          );
        }}
      />
    );
  }
}

class MyMenu extends React.Component {
  componentDidUpdate() {
    log.warn('UPDATE');
  }

  render() {
    log.warn('RENDER');
    const { buttonDefinitions } = this.props;
    return (
      <MenuWrapper>
        {buttonDefinitions.map(buttonDef => (
          <MyButton {...buttonDef} />
        ))}
      </MenuWrapper>
    );
  }
}

Answer 1

根据react docs，如果您将渲染道具与React纯组件一起使用，则浅道具比较将始终为新道具返回false。在这种情况下，对于每个渲染，它将为渲染道具生成一个新值。随着新道具的创建和不更新前一个道具，它将不会调用componentDidUpdate。