亲宝软件园·资讯

展开

react组件memo useMemo useCallback

SODA_HA 人气:0

正文

memo用来优化函数组件的重复渲染行为,针对的是一个组件

useMemo返回一个memoized的值

本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发memo或者useMemo中的逻辑,利用memo就可以避免不必要的重复计算,减少资源浪费

useCallback返回一个memoized的函数

useMemo和useCallback都接收两个参数,第一个参数为fn,第二个参数为[],数组中是变化依赖的参数 memo则可以直接作用于组件,例如

    export default memo(Mycomponent)

useMemo和useEffect的执行时机是不一致的:useEffect执行的是副作用,所以一定是在渲染之后执行的,useMemo是需要有返回值的,而返回值可以直接参与渲染的,所以useMemo是在渲染期间完成的

memo使用

    // 父组件
    const Parent = ()=>{
        const [count, setCount] = useState(1)
        const addCount = ()=>{
           setCount(count + 1)
        }
        return(
            <>
             <div onClick={addCount}>计数: {count}</div>
             <Child />
            </>
        )
    }
    // 子组件
    const Child = memo(()=>{
        console.log('child start---')
        return(
            <div>child...</div>
        )
    })
    // 使用memo后,子组件的props或者state没有变化时,将不会对子组件进行渲染

useMemo使用

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值变化时才会触发sum函数执行

useCallback使用

    // 父组件,给子组件传递name和changeName方法
    const Parent = () => {
      const [count, setCount] = useState(1);
      const [name, setName] = useState("bbz");
      const addCount = () => {
        setCount(count + 1);
      };
      const changeName = useCallback((n) => {
        setName(n);
      }, []);
      return (
        <>
          <div onClick={addCount}>计数: {count}</div>
          <Child name={name} changeName={changeName} />
        </>
      );
    };
    // 子组件
    const Child = ({ name, changeName }) => {
      console.log("child start---");
      return (
        <div
          onClick={() => {
            changeName("bobozai");
          }}
        >
          child comps: {name}
        </div>
      );
    };
    // 如果不使用useCallback,则点击父组件计数的同时,子组件会console进行渲染,
    // 因为更新count时父组件会重新渲染,导致重新生成了一个changeName函数,
    // 所以子组件的props变了,导致子组件会重新渲染
    // 而对changeName函数用useCallback进行包裹,则对函数进行缓存不会重新生成

加载全部内容

相关教程
猜你喜欢
用户评论