React Hooks - 将过程通过props仅一次的逻辑放置在哪里

Question

有时，组件需要处理传递的道具并保存在其state中。由于处理可能很重，只要完成一次就很好。在挂钩之前，通常在constructor或componentDidMount中完成。

现在进入钩子，可以用useEffect来实现，将[]作为第二个参数仅运行一次，但我觉得这不是最好的地方 - 我们正在做的是处理道具并保存在状态下，这不是副作用。从文档中："数据获取，设置订阅并在React组件中手动更改DOM都是副作用的示例。"不要认为预处理属于这些。

那么，用钩子做到的最好的地方是哪里？

Answer 1

import React, {useMemo} from 'react';
const someExpensiveFunction = (a, b) => {
  // expensive stuff happens here
}
const someFunctionalComponent = ({ prop1, prop2 }) => {
  const someVariableDependentOnProps = useMemo(() => someExpensiveFunction(prop1, prop2), [prop1, prop2]);
  return <div>{someVariableDependentOnProps}</div>
}

根据文档：

usememo只有在一个依赖项发生变化时才会重新计算记忆价值。这种优化有助于避免在每个渲染上计算昂贵的计算。

https://reactjs.org/docs/hooks-reference.html#usememo