脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React useCallback useMemo

React中memo useCallback useMemo方法作用及使用场景

 更新时间：2023年03月05日 15:04:53   作者：Jiaynn  
这篇文章主要为大家介绍了React中三个hooks方法memo useCallback useMemo的作用及使用场景示例，有需要的朋友可以借鉴参考下，希望能够有所帮助

memo()、useCallback()、useMemo()使用场景

当父组件的props或state变化时，render重新渲染，但传递给子组件的props没有发生变化说着只是简单调用了一下子组件，这时子组件也要重新渲染，这就导致了组件的不必要的渲染

React.memo()

当父组件只是简单调用子组件，并未给子组件传递任何属性，我们可以通过memo来控制函数组件的渲染

React.memo()将组件作为函数(memo)的参数，函数的返回值(Child)是一个新的组件。

import { useState } from "react";
import { Child } from "./child";
export const Parent = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child />
    </div>
  );
};

import {memo} from 'react'
export const Child=memo(()=>{
    consloe.log('渲染了')
    return <div>子组件</div>
})
//使用memo()包裹后的组件，在Parent组件重新渲染更新时，Child组件并没有重新渲染更新

当我们传值给子组件时，这时使用memo函数就对控制组件的更新不起作用了

父组件

import { useState } from "react";
import { Child } from "./child";
export const Parent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("小明");
  const increment = () => setCount(count + 1);
  const onClick = (name: string) => {
    setName(name);
  };
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child name={name} onClick={onClick} />
    </div>
  );
};

子组件

import { memo } from "react";
export const Child = memo(
  (props: { name: string; onClick: (value: any) => void }) => {
    const { name, onClick } = props;
    console.log("渲染了", name, onClick);
    return (
      <>
        <div>子组件</div>
        <button onClick={() => onClick("小红")}>改变 name 值</button>
      </>
    );
  }
);

出现这样结果的原因：

点击父组件按钮时，改变了父组件的count，导致父组件重新渲染

父组件重新渲染时，重新创建了onClick函数，导致传递给子组件的onClick属性发生了变化，导致子组件重新渲染

如果传递给子组件的只有基本数据类型将不会重新渲染

注意: 如果直接使用useState解构的setName传给子组件, 子组件将不会重复渲染，因为解构出来的是一个memoized 函数。

React.useCallback()

所以，在这种情况下我们使用React.useCallback() useCallback(fn, deps)

import { useCallback, useState } from "react";
import { Child } from "./child";
export const Parent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("小明");
  const increment = () => setCount(count + 1);
//使用useCallback钩子包裹的回调函数是memoized函数，他初次调用该函数时，缓存参数和计算结果，再次调用这个函数时，如果第二个参数依赖项没有发生改变，则直接返回缓存结果，不会重新渲染
  const onClick = useCallback((name: string) => {
    setName(name);
  }, []);
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child name={name} onClick={onClick} />
    </div>
  );
};

但当我们传递的属性name不字符串，而是对象时

父组件

import { useCallback, useState } from "react";
import { Child } from "./child";
export const Parent = () => {
  const [count, setCount] = useState(0);
  // const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });
  const increment = () => setCount(count + 1);
  const userInfo = { name: "小明", age: 18 };
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child userInfo={userInfo} />
    </div>
  );
};

子组件

import { memo } from "react";
export const Child = memo(
  (props: { userInfo: { name: string; age: number } }) => {
    const { userInfo } = props;
    console.log("渲染了", userInfo);
    return (
      <>
        <div>名字： {userInfo.name}</div>
        <div>年龄：{userInfo.age}</div>
      </>
    );
  }
);

点击父组件count，看到子组件每次都重新渲染了。 分析原因跟调用函数是一样的：

  • 点击父组件按钮，触发父组件重新渲染；
  • 父组件渲染，const userInfo = { name: "小明", age: 18 }; 一行会重新生成一个新对象，导致传递给子组件的 userInfo 属性值变化，进而导致子组件重新渲染。
  • 注意: 如果使用useState解构的userInfo, 子组件将不会重复渲染，因为解构出来的是一个memoized 值。

这时我们使用 React.useMemo() useMemo(() => fn, dep)

React.useMemo()

useMemo()返回的是一个 memoized 值。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

import { useMemo, useState } from "react";
import { Child } from "./child";
export const Parent = () => {
  const [count, setCount] = useState(0);
  // const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });
  const increment = () => setCount(count + 1);
  const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child userInfo={userInfo} />
    </div>
  );
};

对比useCallback() 和useMemo()

useCallback(fn, deps) 返回该回调函数的memoized回调函数

const onClick = useCallback((name: string) => {
   setName(name);
 }, []);

useMemo(() => fn, dep) 返回的是一个 memoized 值。

const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);

以上就是React中memo useCallback useMemo方法作用及使用场景的详细内容，更多关于React useCallback useMemo的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React中的Props类型校验和默认值详解

    React中的Props类型校验和默认值详解

    这篇文章主要为大家详细介绍了React中的Props类型校验和默认值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • react实现移动端二级路由嵌套详解

    react实现移动端二级路由嵌套详解

    这篇文章主要介绍了react移动端二级路由嵌套的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • ForwardRef useImperativeHandle方法demo

    ForwardRef useImperativeHandle方法demo

    这篇文章主要为大家介绍了ForwardRef useImperativeHandle方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 详解react-navigation6.x路由库的基本使用

    详解react-navigation6.x路由库的基本使用

    最近两个项目都用到了React Navigation，所以就研究一下如何使用，本文主要介绍了react-navigation6.x路由库的基本使用，感兴趣的可以了解一下
    2021-11-11
  • react基础知识总结

    react基础知识总结

    这篇文章主要介绍了react常用的基础知识总结，帮助大家更好的理解和学习使用react框架，感兴趣的朋友可以了解下
    2021-04-04
  • 详解基于webpack搭建react运行环境

    详解基于webpack搭建react运行环境

    本篇文章主要介绍了详解基于webpack搭建react运行环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • React如何创建组件

    React如何创建组件

    本文我们将介绍 React中组件的类别，以及如何创建和使用组件。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • React中事件绑定this指向三种方法的实现

    React中事件绑定this指向三种方法的实现

    这篇文章主要介绍了React中事件绑定this指向三种方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • react项目优化配置的操作详解

    react项目优化配置的操作详解

    这篇文章主要介绍了react项目优化配置,主要包括优化配置CDN，优化路由懒加载，结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 利用CDN加速react webpack打包后的文件详解

    利用CDN加速react webpack打包后的文件详解

    下面小编就为大家分享一篇利用CDN加速react webpack打包后的文件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论