场景一:页面A使用了子组件B,而且给子组件没有接收任何参数,此时如果A中的某个状态发生改变,则A/B组件同时会渲染。如果我们想优化一下,不希望B组件渲染,此时用可以用memo包裹子组件即可。

此图片的alt属性为空;文件名为image.png

import Child from “child”;
export default function A(props) {
  return (
    <div>
      <p>父组件A</p>
      <Child />
    </div>
  );
}
import { memo } from “react”;
const B = (props) => {
  return <div>子组件B</div>;
};
export default memo(B);

场景二:页面A使用了子组件B,而且给子组件传递了函数test(),此时如果A中的状态改变,则A/B同时会渲染。如果我们想优化一下,不希望B组件渲染,此时用可以用memo包裹子组件,然后使用useCallback包裹test(),test()有依赖项,加入到useCallback的第二个参数中。

import { useCallback } from “react”;
import Child from “child”;
export default function A(props) {
  const test = useCallback(() => {
    console.log(“test”);
  }, []); //如果业务有变量依赖,加到[]中
  return (
    <div>
      <p>父组件A</p>
      <button>点击</button>
      <Child test={test} />
    </div>
  );
}
import { memo } from “react”;
const B = (props) => {
  const { test } = props;
  return (
    <div
      onClick={() => {
        test();
      }}
    >
      子组件B
    </div>
  );
};
export default memo(B);
场景三:A组件有两个state:sa,sb,sb是依据sa计算出来的,当然你可以分别给他们创建useState,但是最佳的方式是,使用useMemo,当sa变化的时候计算出sb的值
import { memo, useState } from “react”;
const [sa, setSa] = useState(“”);
const sb = useMemo(() => {
  return sa + “,小明”;
}, [sa]);
useEffect(() => {
  setSa(“你好”);
  return () => {
    second;
  };
}, [third]);
const B = (props) => {
  const { test } = props;
  return (
    <div
      onClick={() => {
        test();
      }}
    >
      子组件B
    </div>
  );
};
export default memo(B);
以上就是useCallback与useMemo与memo到底怎么用的全部内容,欢迎大家一起讨论
微信交流(备注:前端)