关于javascript:手把手教你学reacthooks初学者useCallbackuseMemo

42次阅读

共计 635 个字符,预计需要花费 2 分钟才能阅读完成。

1.useCallback

  • 组件屡次被调用, 屡次渲染,性能低
  • demo 能够在 git react-Hooks-study/src/compontes/reactTs/useCallback 能够查看具体的 useCallback
  • 次要须要留神的中央,一个是 react 高阶函数 React.memo 利用联合 useCallback

学习应用了 React.memo 在 props 或 state 没有变动时,阻止组件的 rerender。
学习了什么是 useCallback,如何应用 useCallback 缓存一个办法,只依赖某几个变量变动才更新,防止了每次传递给子组件的 props 都被更新,最终也是阻止了子组件不必要的 rerender。

import React from "react";

function Count(props: { text: string; count: number}) {console.log(`RenderingCount ${props.text}`);
  return (
    <div>
      {props.text} - {props.count}
    </div>
  );
}

export default React.memo(Count);

 const incrementAge = useCallback(() => {setAge(age + 1);
  }, [age],);

  const incrementSalary = useCallback(() => {setSalary(salary + 1000);
  }, [salary],);

2.useMemo

正文完
 0