问题
Is there ever a situation where componentDidUpdate would NOT fire, even if the props updated in React?
回答1:
There are 3 conditions that can cause componentDidUpdate to not fire:
1) You wrote a custom shouldComponentUpdate that returned false.
2) The internal react methods determined that there was no change in the virtual DOM, so it chose not to re-render.
3) You extended something other than React.Component (such as PureComponent) which has a default shouldComponentUpdate method that returned false.
回答2:
You can suppress a render with returning false in shouldComponentUpdate().
So yes, in that case componentDidUpdate() won't fire.
回答3:
this can also happen, if your component is in a list and the key of your component changes (ie. on every render) or the key is missing, or the key is duplicate, etc.
refer to docs for details: https://reactjs.org/docs/lists-and-keys.html
回答4:
A common situation where this occurs is when multiple prop changes occur which don't effect anything in the virtual DOM.
For example you may wish to display a success message if an API returns 200 status code, with props that change like this:
API not called:
this.props.apiState == false
API called:
this.props.apiState == 'loading'
API successful:
this.props.apiState == 'success'
In this situation componentDidUpdate will only fire once, and if you console log this.props.apiState at the time it is fired you will see that it is loading. So any trigger in componentDidUpdate that is waiting on success will not occur.
ComponentWillReceiveProps deals with this issue in older versions of React, and in newer versions of React you can use shouldComponentUpdate to force an update when your desired prop change occurs.
来源：https://stackoverflow.com/questions/50995450/props-updated-componentdidupdate-did-not-fire