道具已更新，componentDidUpdate未触发

Question

是否曾经有一种情况，即使在React中更新了props，componentDidUpdate也不会触发？

Answer 1

有3种情况可能导致componentDidUpdate无法启动：

1）您编写了一个返回false的自定义shouldComponentUpdate。

2）内部react方法确定虚拟DOM没有变化，因此选择不重新渲染。

3）您扩展了React.Component之外的其他内容（例如PureComponent），该扩展具有默认的shouldComponentUpdate方法，该方法返回false。

Answer 2

您可以通过在shouldComponentUpdate()中返回false来禁止渲染。 所以是的，在这种情况下，componentDidUpdate()不会触发。

Answer 3

如果您的组件在列表中并且组件的键发生更改（例如，在每个渲染中）或键丢失或键重复，等等，也会发生这种情况。

有关详细信息，请参阅文档： https://reactjs.org/docs/lists-and-keys.html

Answer 4

发生这种情况的常见情况是，发生了多个属性更改，这些更改不会影响虚拟DOM中的任何内容。

例如，如果API返回200状态代码，并且道具的更改如下，则您可能希望显示一条成功消息：

未调用API：

this.props.apiState == false

调用的API：

this.props.apiState == 'loading'

API成功：

this.props.apiState == 'success'

在这种情况下，componentDidUpdate仅会触发一次，如果您在触发日志this.props.apiState时对其进行控制台，则会看到它是loading。因此componentDidUpdate中等待success的任何触发器都不会发生。

ComponentWillReceiveProps在旧版本的React中解决了这个问题，在新版本的React中，您可以使用shouldComponentUpdate强制更改所需的道具。

Answer 5

Nathan 的回答是正确的，但当我搜索相同的答案时，它并没有解决我的问题。

有时看起来 props 更新了，但它是使用不同 props 渲染的全新组件。检查 componentDidMount（例如在其中添加 console.log）以查看究竟发生了什么。