为什么从父组件调用子 componentDidUpdate 的 setState？

IT技术 reactjs
2021-05-10 07:15:41

在这个例子中，componentDidUpdate当我设置状态跟踪时触发。HelloMessage props和状态没有改变，为什么调用这个方法？如何防止这种情况？

class HelloMessage extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    console.log('HelloMessage did update');
  }

  render() {
    return <div>Hellooo</div>;
  }
}

class App extends React.Component {
  state = { trail: null }

  componentDidMount() {
    this.setState({ trail: 'First' });    
  }

  render() {
    return (
      <div>
        <HelloMessage />
        <div>
          {this.state.trail}
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
4个回答

由于HelloMessage没有任何props，它可以扩展React.PureComponent。您将获得与使用shouldComponentUpdatereturn false相同的结果。

这是预期的行为。每当父组件的状态发生变化时，该组件将被重新渲染。以及您所有的组件逻辑，即。子组件也存在于 render 方法中。因此，子组件再次呈现。

如果你不想要更新，那么你需要明确地返回 react 的 shouldComponentUpdate 钩子。

shouldComponentUpdate(nextProps, nextState) {
    return nextState
}

由于子组件的nullnextState仍然是shouldComponentUpdate 将返回 null。这通知不要更新组件。这将允许仅在子组件的状态发生更改时重新渲染子组件。

它将调用 componentDidUpdate 因为父组件的 render 方法被调用。您可以检查props是否已更改，然后执行代码。

我相信这背后的逻辑是这样的：

如果组件的 props 或 state 发生变化，则会触发重新渲染。这也意味着它会重新渲染它的孩子（等等）。现在，即使 child 中的 props/state 没有改变，它仍然会触发重新渲染，因为shouldComponentUpdate()默认情况下总是返回 true。因此，如果您不希望孩子重新渲染，即使其父重新渲染，您也可以添加：

shouldComponentUpdate() {
    return false;
}

这样它就不会更新（显然您可以在该生命周期方法中添加检查以决定是否更新，是否应该稍后添加props等）。

其它你可能感兴趣的问题
上一篇如何在react组件中显示来自 api 的数据 下一篇有没有办法在react外部的函数内部传递变量