我应该将我的 getter 函数放在我的功能组件内部还是外部？

Question

如果我有一个使用useState钩子的 React 功能组件：

const [options, setOptions] = React.useState({
  a: true,
  b: 10,
  c: 'asdf'
})

如果options结构更复杂，并且我想编写可以传递此对象并从中获取一些属性的函数，那么将这些函数编写在功能组件内部，还是将它们放在外面并将options对象传递给它们更好？如果我里面有一堆这些，这些函数会在每次渲染时重新创建，对吗？

// put this inside the functional component, or outside?
function getSomeComputedValue(options) {
  return Object.keys(options.someNestedObject).filter(o => o.status === 'cool')
}

Answer 1

当您的功能仅取决于它的参数时，您应该放在一边。

为什么？因为如果这个函数永远不会改变，你就不需要在每次渲染时重新创建它。如果您需要在另一个组件中使用，您也可以将它放在一个 utils 文件或类似的文件中。

如果我里面有一堆这些，这些函数会在每次渲染时重新创建，对吗？

是的，如果您不需要更改它，则无需在每次渲染时重新创建该函数。