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