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

9次阅读

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

组件屡次被调用, 屡次渲染，性能低
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],);

正文完