Reactjs 为什么从父组件设置状态调用子组件更新？

在本例中，当我设置状态跟踪时，

componentdiddupdate

触发。HelloMessage道具和状态未更改，那么为什么调用此方法？如何预防

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')
);

类HelloMessage扩展了React.Component{
componentDidUpdate（prevProps、prevState）{
log（'HelloMessage未更新'）；
}
render（）{
返回Hellooo；
}
}
类应用程序扩展了React.Component{
状态={trail:null}
componentDidMount（）{
this.setState（{trail:'First'}）；
}
render（）{
返回(
{this.state.trail}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

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

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

---

此状态更改将调用重新加载应用程序，这将触发对childHelloMessage组件的更新。为了避免这种情况，请在HelloMessage中使用

shouldComponentUpdate（nextProps，nextState）

，并将nextProps与其当前的道具进行比较，以决定是否更新组件。

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

如果组件的道具或状态发生更改，则会触发重新渲染。这也意味着它将重新渲染其子对象（依此类推）。现在，即使子对象中的props/state没有更改，它仍然会触发重新渲染，因为默认情况下，

shouldComponentUpdate（）

始终返回true。因此，如果不希望子对象重新渲染，即使其父对象重新渲染，也可以添加：

shouldComponentUpdate() {
    return false;
}

---

这样它就不会更新了（很明显，你可以在生命周期方法中添加检查来决定是否更新，以后是否应该添加道具等等）。

因为

HelloMessage

没有得到任何它可以扩展的道具。您将得到与使用

shouldComponentUpdate

返回false相同的结果

这是预期的行为。无论何时父组件的状态发生更改，都将重新渲染该组件。并且所有组件逻辑（即子组件）也存在于渲染方法中。因此，子组件将再次渲染

如果不希望更新，则需要显式返回react的shouldComponentUpdate钩子

shouldComponentUpdate(nextProps, nextState) {
    return nextState
}

---

因为子组件的nextState仍然是

null

shouldComponentUpdate将返回null。这将通知您不要更新组件。这将允许仅当子组件的状态发生更改时才重新呈现子组件。

非常感谢！工作起来很有魅力！