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

React Hooks-将处理仅通过一次道具的逻辑放在哪里？

1 个答案: