javascript - 使用计算变量与 useState/useEffect 的结果

Question

如果我有一个变量，其值可以完全基于另一个属性的值导出，那么初始化计算变量与使用 useState/ 的组合是否有任何后果/陷阱使用Effect 来跟踪变量？让我用一个人为的例子来说明:

/**
 * ex paymentAmounts: [100, 300, 400]
 */
const Option1 = ({paymentAmounts}) => {
  const [average, setAverage] = useState(paymentAmounts.reduce((acc, curr) => curr + acc, 0) / paymentAmounts.length)

  useEffect(() => {
    setAverage(paymentAmounts.reduce((acc, curr) => curr + acc, 0) / paymentAmounts.length)
  }, [paymentAmounts])

  return (
    <div>
      Average: {average}
    </div>
  )
}

或者更简单的说

/**
 * ex paymentAmounts: [100, 300, 400]
 */
const Option2 = ({paymentAmounts}) => {
  const average = paymentAmounts.reduce((acc, curr) => curr + acc, 0) / paymentAmounts.length

  return (
    <div>
      Average: {average}
    </div>
  )
}

我是否放弃了使用选项 2 的任何控制和/或 React 优势？

Vue.js 似乎通过 computed properties 有这个选项.

Answer 1

使用 Hook 或其他状态跟踪功能的唯一原因是您计划在组件本身内更改状态。从你举的例子来看，情况并非如此。如果 Prop paymentAmounts 被更新，组件将被 React 更新，你的计算常量 average 也会更新。

因此，在这里使用 useState 和 useEffect 不会给您带来任何好处。使用计算常量保持简单!