调用父组件setState是否触发子组件componentDidUpdate？父子状态同步疑问

疑问解答 #

是的，当父组件调用setState更新自身状态后，只要父组件发生重渲染，它的子组件默认也会跟着重渲染，进而触发子组件的componentDidUpdate生命周期钩子。不过有个例外：如果子组件通过shouldComponentUpdate（类组件）或者React.memo（函数组件）做了性能优化，判断当前的props/state没有变化，就会阻止这次重渲染，自然也不会触发componentDidUpdate。

针对你的场景分析 #

看你描述的App和SearchBar的交互逻辑，其实可以简化一下：
你现在的流程是SearchBar先更新自身状态 → 触发componentDidUpdate → 调用父组件方法更新父状态 → 父组件重渲染又触发SearchBar的第二次重渲染。这会导致SearchBar额外多一次不必要的渲染。

优化方案1：子组件不维护自身状态（更简洁） #

直接在SearchBar的输入事件里调用父组件传过来的方法，把输入值同步给父组件：

// SearchBar类组件的事件处理
onSearchChange(event) {
  const searchTerm = event.target.value;
  // 直接调用父组件方法，无需子组件自己setState
  this.props.onSearchChange(searchTerm);
}

优化方案2：保留子组件状态但避免重复渲染 #

如果确实需要子组件保留自身状态（比如做输入防抖、本地临时存储等），那给子组件加上渲染优化：

• 类组件：在SearchBar里实现shouldComponentUpdate，对比新旧props和state，只有当真正变化时才返回true
• 函数组件：用React.memo包裹组件，它会浅比较props的变化，只有变化时才重渲染

举个函数组件用React.memo的例子：

const SearchBar = React.memo((props) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleChange = (event) => {
    const newTerm = event.target.value;
    setSearchTerm(newTerm);
  };

  useEffect(() => {
    // 替代componentDidUpdate，在searchTerm变化时调用父组件方法
    props.onSearchChange(searchTerm);
  }, [searchTerm, props.onSearchChange]);

  return <input value={searchTerm} onChange={handleChange} />;
});

这样就能避免父组件更新时子组件无意义的重渲染啦。

内容的提问来源于stack exchange，提问作者Croft70