React官方文档推荐传setState给子组件：是否为合理实践？

在React官方文档的示例里，有直接把setState函数传递给子组件的写法：

import { useState } from 'react';

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);

  return (
    <div>
      <SearchBar 
        filterText={filterText} 
        inStockOnly={inStockOnly} 
        onFilterTextChange={setFilterText} 
        onInStockOnlyChange={setInStockOnly} />
      <ProductTable 
        products={products} 
        filterText={filterText}
        inStockOnly={inStockOnly} />
    </div>
  );
}

这种写法看起来像是让子组件直接操作父组件状态，似乎违背封装原则。我平时的做法是先创建处理函数再传递：

const handleChangeFilterText = (val) => {
  setFilterText(val);
};

<SearchBar onFilterTextChange={handleChangeFilterText} />;

如果子组件用React.memo包裹，我还会用useCallback来包装这个处理函数。之前一直觉得直接传setState是不良实践，但看到官方示例后开始质疑，想知道这种做法到底是否推荐，还是应该尽量避免？

两种写法各有适用场景，没有绝对的优劣 #

1. 直接传递setState是完全合理的实践

官方文档这么写绝非随意：

• setState本身是稳定引用，组件生命周期内不会变化，就算子组件用了React.memo，也不会因为这个prop触发不必要的重渲染，不需要额外套useCallback。
• 当子组件的输入值和父组件状态完全一一对应，不需要额外逻辑（比如格式校验、数据转换、状态更新前的副作用）时，直接传setState能减少冗余代码，让逻辑更简洁。
• 这并没有违背封装：父组件只是传递“更新状态的方法”，子组件依然只能按照setState的规则更新状态，并没有直接访问或修改父组件的state本身，本质还是单向数据流的体现。

2. 优先用封装处理函数的场景

当你需要在状态更新前后做额外操作时，必须用自定义处理函数：

• 比如对输入值做格式化：const handleChange = (val) => setFilterText(val.trim())
• 或者更新状态的同时触发其他逻辑：比如调用API、同步更新关联状态
• 另外，如果后续可能需要修改状态更新的逻辑，封装处理函数能让你在父组件统一调整，不用改动子组件代码，更符合关注点分离的原则。

3. 关于useCallback的使用

如果子组件用了React.memo，直接传setState不需要useCallback（因为引用稳定）；但如果是自定义处理函数，每次组件渲染都会生成新的函数引用，这时候就需要用useCallback缓存引用，避免子组件不必要的重渲染。

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