首页 > 其他分享 >react_hooks系列 useMemo

react_hooks系列 useMemo

时间:2023-12-25 14:35:03浏览次数:32  
标签:name useMemo hooks age react 组件 isAdult 函数

一、概念和作用
​ 写在函数式组件里的 “函数调用代码”。如果函数式组件重新渲染时,每次都会执行“调用函数的代码”。如果不是必须的,那么就是性能的浪费。useMemo就是解决这个问题的。即:useMemo是防止不必要的的函数调用。

​ 文字描述总是让你很难理解。很抽象。还是要看代码的。

格式:useMemo(函数,数组); //当数组中的其中一个元素,发生变化时,就会调用 函数 。

举例:

如: const nameStr = useMemo(()=>genName(name),[name])

表示,当name发生变化时,才会调用 ()=>genName(name)函数.

二、示例:

​ 以下代码中,如果不使用useMemo,当我们点击“修改name”的按钮时,也调用了函数isAdult()。这其实是性能的损耗。如果加上了useMemo。那么,只有点击“修改age” 按钮时,才会调用isAdult(),因为,我的依赖写的是age。

//父组件:
import { useState } from "react";
import SonFn from "./SonFn";

export default () => {
    console.log("父组件");
    const [name, setName] = useState('张三疯')
    const [age, setAge] = useState(12)
    return (
        <>
            <h1>useMemo</h1>
            <input type="button" 
                   value="修改name"
                   onClick={()=>setName(name+"1")} />
            <input type="button" 
                   value="修改age"
                   onClick={()=>setAge(age+1)} />
            <hr/>
            <SonFn name={name} age={age}  />
        </>
    )
}
//子组件:
import React,{memo,useMemo} from 'react'

const SonFn = ({name,age})=>{
    console.log("子组件");

    function isAdult(age1){
        return age1>=18?"已成年":"未成年";
    }

    //下面这句话就是我说的:  写在函数式组件里的 “函数调用代码” 。
    // 只要函数式组件重新渲染了,那么isAdult函数就会被调用一次。即使只是改了name的值。
    // let adultStr = isAdult(age);
    
    //现在,加上useMemo后,表示只有age发生变化,才调用isAdult函数。
    let adultStr = useMemo(()=>{
        return isAdult(age);
    },[age]);

    return (
        <div>
            <h5>子组件(函数式组件)</h5>
            <p>姓名:{name}</p>
            <p>年龄:{age}</p>
            <p>是否成年:{adultStr}</p>
        </div>
    )
}

export default memo(SonFn);

三、总结:
  1、“万恶之源” :函数式组件每次重新渲染时,都会把函数体里的所有代码执行一遍。

  2、useMemo 解决的是 防止函数式组件里的 “调用函数的代码” 被多次被执行。既就是:useMemo 是保证函数式组件重新渲染时,组件里的“函数调用代码” 的执行时可控的。

四、useCallback和useMemo的区别:
  1、useMemo:解决的是:防止无效函数调用

  2、useCallback:解决的是:防止无效函数定义

标签:name,useMemo,hooks,age,react,组件,isAdult,函数
From: https://www.cnblogs.com/limou956259/p/17926014.html

相关文章

  • React 的 Suspense 和 ErrorBoundary 还有这种关系?
    Suspense组件想必大家都用过,一般是和React.lazy结合用,用来加载一些异步组件。比如这样一个组件://src/Aaa.jsxexportdefaultfunctionAaa(){return<div>aaa</div>}就可以在另一个组件里用lazy+Suspense异步加载:importReact,{Suspense}from'react';const......
  • React系列:react项目的创建到可以编写业务的一些列初始化
    ......
  • react Hooks+Context 实现响应式布局
    1.创建文件 viewportContext.tsx importReactfrom"react";constdefaultValue={  width:window.innerWidth}constviewportContext=React.createContext(defaultValue);constViewportProvider=({children})=>{  const[width,setWidt......
  • React 之使用 antd 实现全局 loading
    使用antd的Spin实现Loading代码如下:fullLoading.tsximportReactDOMfrom"react-dom/client";import{Spin}from"antd";//全局加载loading//当前请求的个数//当同时有多个请求时,等所有请求完成后再关闭loadingletreqCount=0;//显示loadingfuncti......
  • React项目中报错:Parsing error: The keyword 'import' is reservedeslint
    记得更改完配置后,要重启编辑器(如:VSCode)!!!记得更改完配置后,要重启编辑器(如:VSCode)!!!记得更改完配置后,要重启编辑器(如:VSCode)!!!这个错误通常发生在你尝试在一个不支持ES6模块语法的环境中使用import关键字。ESLint默认使用的是ES5语法,如果你想使用ES6或者更新的语法,你......
  • React Hooks的使用规范和最佳实践
    ReactHooks自从推出以来,彻底改变了React组件的编写方式。它们提供了一种在函数组件中使用state和其他React特性的能力,从而使得函数组件更加强大和灵活。本文将深入探讨useEffect、useMemo、useCallback和useState这四种常用Hooks的特点、优缺点,以及它们对组件性能的影响。我们还......
  • 100道React高频题整理(附答案背诵版)
    1、简述React有什么特点?React是一个用于构建用户界面的JavaScript库,由Facebook开发并维护。React有以下几个主要特点:声明式设计:React采用声明式设计,让代码更易于理解,且方便调试。你只需描述出你希望程序的最终状态,React会自动确保用户界面与你描述的状态保持一致。组件化:......
  • 让你 React 组件水平暴增的 5 个技巧
    让你React组件水平暴增的5个技巧神说要有光​ ​关注他 你经常看TA的内容最近看了一些AntDesign的组件源码,学到一些很实用的技巧,这篇文章来分享一下。首先,我们用create-react-app创建个React项目(选择typescript模版):npxcreate-r......
  • #yyds干货盘点#在 React Router 中使用 JWT
    创建一个React项目使用下方的指令会为我们创建一个项目$npmcreatevite@latestreact-jwt-cn然后我们选择 react 和 javascript 作为我们的框架和语言。在项目开始之前,我们要确保所有的依赖都已经被安装,所以我们要先执行$npminstall安装完毕后,在项目的根目录下,我们可以运......
  • React useEffect 在组件挂载时运行了两次
    在使用useEffect这个hook时,发现useEffect会执行2次useEffect(()=>{console.log("执行useEffect");},[]);控制台输出:执行useEffect执行useEffect查看疑难解答官方文档,官方解释如下:在开发环境下,如果开启严格模式,React会在实际运行setup之前额外运行一次......