useMemo和useCallback的使用

useMemo

• 功能：用来缓存数据；
• 应用场景：当组件内部某个数据，需要通过计算而来，且这个计算依赖于state、props数据时使用；
• 好处：避免依赖项未修改时，重复渲染导致的计算，浪费计算资源。

useCallback

• 功能：缓存单个函数；
• 应用场景：当父组件传递给子组件一个函数；
• 好处：避免父组件重新渲染时函数重新创建，进而导致子组件因此重新渲染。
  useCallback应用时要注意不要作为单纯的函数缓存使用，否则会适得其反；应配合子组件调用，减少子组件重复渲染，或者当函数构建逻辑复杂时使用。

代码示例

import React, { useCallback, useMemo } from "react";
import ReactDOM from "react-dom"; 

const Parent = ({ a, b, c }) => {
  const func = useCallback(() => [a, b, c], [a, b, c]);
  const value = useMemo(() => a + b + c, [a, b, c]);
  console.log("Parent");
  return <Child func={func} value={value} />;
};

const Child = ({ func, value }) => {
  const expression = useMemo(() => func().join(" + "), [func]);
  const result = useMemo(() => value + "个", [value]);
  console.log("Child");
  return <div>{`${expression} = ${result}`}</div>;
};
 
ReactDOM.render(<Parent a={1} b={2} c={3} />, mountNode);

最后提一点，优化需得当，主力集中在重灾区；毕竟每个性能优化也会带来新的性能消耗，因此需要慎重考虑优化前后带来的价值。