React Hooks - 将进程只传递一次 props 的逻辑放在哪里？

Question

有时一个组件需要处理传递的 props 并保存在它的state. 由于处理可能很繁重，因此最好只进行一次。在 hooks 之前，它通常在 constructor or 中完成componentDidMount。

现在进入钩子，它可以通过useEffect,[]作为第二个参数只运行一次来实现，但我觉得这不是最好的地方 - 我们正在做的是处理 props 并保存状态，这不是Side Effect。来自文档：“数据获取、设置订阅和手动更改 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