详细解读 React useCallback &useMemo

最新推荐文章于 2023-07-12 16:25:16 发布

夏天的味道123

最新推荐文章于 2023-07-12 16:25:16 发布

阅读量240

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/grooyo/article/details/127645198

版权

本文详细解读了React Hooks中的useCallback和useMemo。useCallback用于优化函数，避免在依赖项未改变时创建新的函数，减少子组件不必要的渲染。useMemo则用于缓存计算结果，只有依赖项变化时才会重新计算，有助于提高性能。文章通过实例代码和应用场景阐述了两者的具体用法和优化策略。

摘要由CSDN通过智能技术生成

前言

阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍在 React 项目中全量使用 Hooks。

useCallback

useCallback 的作用

官方文档：

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

简单来说就是返回一个函数，只有在依赖项发生变化的时候才会更新（返回一个新的函数）。

useCallback 的应用

在线代码： Code Sandbox

import React, {
    useState, useCallback } from 'react';
import Button from './Button';

export default function App() {
   
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  const handleClickButton1 = () => {
   
    setCount1(count1 + 1);
  };

  const handleClickButton2 = useCallback(() => {
   
    setCount2(count2 + 1);
  }, [count2]);

  return (
    <div>
      <div>
        <Button onClickButton={
   handleClickButton1}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={
   handleClickButton2}>Button2</Button>
      </div>
      <div>
        <Button
          onClickButton={
   () => {
               setCount3(count3 + 1);          }}        >          Button3        </Button>
      </div>
    </div>
  );
}

// Button.jsx
import React from 'react';

const Button = ({
     onClickButton, children }) => {
   
  retur

最低0.47元/天解锁文章