React性能优化：useEffect与onChange直接赋值哪个更优？

性能差异 #

两种方案存在细微但明确的性能差异：

• useEffect监听方案：当selectA的值变更后，组件会先因selectA的state更新触发一次重渲染，待渲染完成后useEffect执行，再更新selectB的state，这会触发第二次重渲染。
• onChange回调直接设置方案：在selectA的变更回调中，同时更新selectA和selectB的state，整个过程只会触发一次重渲染。

方案优劣判断 #

在已知selectA的值仅在自身onChange时变更的前提下，直接在onChange回调中设置selectB的方案更优，理由如下：

1. 更少的渲染开销：避免了useEffect带来的额外一次重渲染，性能表现更高效。
2. 逻辑更直观：关联变更的逻辑直接绑定在触发源的回调里，代码可读性更强，后续维护成本更低。
3. 规避依赖陷阱：如果selectA的值是对象这类引用类型，useEffect的依赖数组需要额外处理（比如用useMemo缓存对象或手动对比属性），否则容易出现不必要的触发或触发失效的问题；而直接在回调中处理则完全没有这个顾虑。

代码示例对比 #

方案一（useEffect监听）

const [selectAValue, setSelectAValue] = useState(null);
const [selectBValue, setSelectBValue] = useState(null);

useEffect(() => {
  // 根据selectA的值同步selectB
  setSelectBValue(getMatchedBValue(selectAValue));
}, [selectAValue]);

const handleAChange = (value) => {
  setSelectAValue(value);
};

方案二（onChange直接处理）

const [selectAValue, setSelectAValue] = useState(null);
const [selectBValue, setSelectBValue] = useState(null);

const handleAChange = (value) => {
  setSelectAValue(value);
  // 同步更新selectB
  setSelectBValue(getMatchedBValue(value));
};

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