React - 使用 useEffect 或直接在 onChange 方法中更改值是否对性能最好？

Question

如果我有两个选择控件，一个依赖于另一个，那么如果我更改

selectA

值，将根据它选择

selectB

值：

...
const [values, setValues] = useState({ selectA: undefined, selectB: undefined });
const setSelectValue = (field, value) => {
  setValues((current) => {...current, [field]: value});
}

return (
  <>
    <Select
      name="selectA"
      value={values.selectA}
      onChange={(val) => setSelectValue('selectA', val)}
      ...
    />
    <Select
      name="selectB"
      value={values.selectB}
      onChange={(val) => setSelectValue('selectB', val)}
      ...
    />
  </>
);

就性能而言，最好使用

useEffect

还是仅更改

selectB

selectA

方法上的

onChange

值？

// Is it best to use useEffect
useEffect(() => {
  setSelectValue('selectB', values.selectA.potato);
}, [values.selectA]);

// ... or is it best to change it directly on onChange method?
<Select
  name="selectA"
  value={values.selectA}
  onChange={(val) => {
    setSelectValue('selectA', val);
    setSelectValue('selectB', val.potato);
  }}
  ...
/>

这有关系吗？两者在性能方面有什么区别吗？

我知道

useEffect

可以方便地解决依赖于可以随时更新的数据的副作用，但在这种情况下，当我在

selectA

上选择它时我就知道数据并且不能以任何其他方式更改，所以我想知道是否有必要做一个

useEffect

来观察那个值而不是直接抓住它并设置它。

请记住，

selectA.potato

的值可以是任何类型，但我认为它是一个对象。

Answer 1

关于性能，直接在

onChange

中设置值更好。使用

useEffect

可以进行两次重新渲染，因为第二次更新将在第一次重新渲染之后发生。 但在大多数情况下，这并不重要。

如果您的

useEffect

 从不止一个地方更新，

selectA

很好。例如，如果您对其进行 CRUD 操作，

selectB

的更新逻辑将在 1 个位置，而不是在每个操作上。

在某些情况下，如果您希望 UI 使用两个新值而不是 1 x 1

 重新呈现，您将被迫更新 

onChange

中的第二个状态

Answer 2

是的

useEffect

可能会慢一些，但我不认为性能是这里的主要关注点。

总的来说，官方的建议是不要过度使用

useEffect

。如果你可以在没有它的情况下做某事，那么最好在没有它的情况下做它。

来自docs：

Effects 是 React 范式的逃生舱。他们让你 “走出”React 并将你的组件与某些组件同步 外部系统，如非 React 小部件、网络或浏览器 DOM。 如果不涉及外部系统（例如，如果你想 当一些道具或状态改变时更新组件的状态），你 不需要效果。删除不必要的效果将使您 代码更容易遵循，运行速度更快，更不容易出错。