反应useState arg函数与值[重复]答案

【问题标题】：React useState arg function vs. value [duplicate]反应useState arg函数与值[重复]
【发布时间】：2020-05-02 17:02:40
【问题描述】：

在做

const [state, setState] = React.useState(initialState)

我传递一个值与返回一个值的函数有什么关系？我是否应该始终传递该函数以使其不再重新运行？

  const initialState = foos.reduce((acc, f) => {
    console.log('re-runs on render')
    // ...
  }, {})

对比

  const initialState = () => {
    console.log('will only run once')
    return foos.reduce((acc, f) => {
      // ...
  }

【问题讨论】：

【解决方案1】：

此函数版本用于初始化初始状态的值，该值的计算成本可能很高 - 例如，您可以使用它来开始获取您只想在每个组件实例中运行一次的资源。

如果您不需要延迟初始化状态值，只需使用该值本身即可。除非您真的需要延迟初始化，否则差异将非常小。

【讨论】：

【解决方案2】：

如果你传递一个函数，这个函数只会被执行一次。如果您传递其他内容，它将在每次渲染时重新计算，但不会触发任何更改或重新渲染。

【讨论】：