React类组件componentDidUpdate触发规则及与useEffect区别相关疑问

安全阿岳

2026-10-2

React componentDidUpdate() 规则答疑

1. 是否只有`setState`触发重渲染时才会调用`componentDidUpdate`？

首先你当前的前置认知「React组件仅在调用this.setState时才会重新渲染」存在偏差，组件重渲染共有三类触发场景，只要组件完成重渲染流程，就会调用componentDidUpdate，不止setState一种情况：

组件内部主动调用this.setState()
父组件重新渲染，导致子组件接收的props变化（普通类组件即使props无变化，父组件重渲染也会触发子组件重渲染，除非在shouldComponentUpdate中拦截、或者使用PureComponent做浅比较拦截）
组件内部调用this.forceUpdate()强制触发更新

2. 认知校验结论

你对componentDidUpdate和useEffect的对比认知大部分正确，补充细节如下：

「useEffect会在依赖数组内的任意元素变化时自动触发执行」：描述完全符合useEffect的执行规则
「componentDidUpdate本身不会触发重渲染，除非在其内部调用this.setState()」：描述完全正确。componentDidUpdate是重渲染完成后才触发的生命周期钩子，本身不会触发更新流程；如果在钩子内部调用this.setState/forceUpdate，会二次触发更新，注意必须先对比prevProps/prevState和当前值的差异再操作，否则会出现死循环，示例写法参考：

componentDidUpdate(prevProps, prevState) {
  // 仅当关联的props发生变化时才执行逻辑，避免无限更新
  if (this.props.projectId !== prevProps.projectId) {
    this.getProjectDetail(this.props.projectId)
  }
}