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文件或类似文件中。

如果我内部有很多这些功能，那么每个渲染器都会重新创建这些功能吗？

是的，如果不需要更改每个渲染，都无需在每个渲染上重新创建该函数。

Answer 2

我认为这取决于，如果您打算在不同组件中使用该功能，可以，将其放在共享或util文件夹中。这取决于该函数的输出可能取决于组件状态的变化，因此您可以根据需要使用useMemo或useCallback。

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

2 个答案: