React中的一些Hooks的理解

已于 2022-05-10 20:57:15 修改
阅读量442 收藏 2
点赞数 1
分类专栏： 前端 文章标签： react.js 前端
于 2022-05-08 02:01:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52785898/article/details/124642130
版权

React中的一些Hooks的理解

注意：react18 的话可以取消严格模式，再运行以下代码否则会出现状态改变一次组件重新渲染两次的问题（好像是函数式组件遇到的问题 具体分析可以看 https://juejin.cn/post/7092696529105846303#heading-2）
参考：https://juejin.cn/post/6844904093824073742#heading-5

这两个钩子一般用于性能的优化，而且有时会用于搭配使用

目录

一、useMemo 的使用

useMemo

  1. 应用场景：一般应用于优化子组件，减少子组件不必要的重render
  2. 作用：当父组件的数据发生改变的时候，但是这些数据的改变可能与子组件无关，为了避免子组件不必要的重新渲染可以在子组件上包裹useMemo

下面看一下示例

首先是不使用 useMemo 早成子组件不必要渲染的

父组件定义

import "./styles.css";
import Info from "./Info";
import { useState } from "react";

export default function App() {
 const [count1, setCount1] = useState(0);
 const [s, changes] = useState(false);
 return (
   <div className="App">
     <h1>Hello CodeSandbox</h1>
     <div>
       <button
         onClick={() => {
           changes(!s);
         }}
       >
         改变S
       </button>
     </div>
     <button
       onClick={() => {
         setCount1(count1 + 1);
       }}
     >
       +1
     </button>
     <Info info={count1} name={"第一个"} />
   </div>
 );
}

子组件定义

const Info = ({ name, info }) => {
  console.log(name + " -> 我被重新渲染了");
  return <div>我是子组件：{info}</div>;
};
export default Info;

页面效果：
在这里插入图片描述

在这个案例里面我们我们定义了按钮改变s去改变s 的数据，但是s的值与子组件的状态无关。当我们点击按钮改变S 的时候子组件就会重新渲染，结果如下图，我们没有点击 +1 按钮，而子组件就已经重新渲染了8次，这显然是不合理的，因此我们修改一下子组件的代码可以解决这种问题。

在这里插入图片描述
使用memo 的子组件

const Info = ({ name, info }) => {
  console.log(name + " -> 我被重新渲染了");
  return <div>我是子组件：{info}</div>;
};
export default Info;

在这里插入图片描述

此时我们再重复点击按钮改变S则不会出现子组件重新渲染的问题,因为使用memo包裹后当父组件状态改变并不会直接触发子组件的重新渲染，而是会判断前后的props是否发生改变，若发生改变才触发重新渲染，因此当props中含有Object 的类型的时候可能会失效。

失效的原因：

const a = {};
const b = {};
a === b; // false

二、useCallback 的使用

1.引入库

useCallback 用于对数组进行缓存，用于缓存一个函数。
应用场景：避免函数的重复创建、当父组件给子组件传递函数的时候和usememo搭配使用避免子组件重复渲染

修改上例代码：
父组件

import "./styles.css";
import Info from "./Info";
import { useCallback, useState } from "react";

export default function App() {
  const [count1, setCount1] = useState(0);
  const [s, changes] = useState(false);
  const getCount1 = () => {
    return count1;
  };
  const callbackGetCount1 = useCallback(() => {
    return count1;
  }, [count1]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <button
          onClick={() => {
            changes(!s);
          }}
        >
          改变S
        </button>
      </div>
      <button
        onClick={() => {
          setCount1(count1 + 1);
        }}
      >
        +1
      </button>
      <Info info={getCount1} name={"第一个"} />
      <Info info={callbackGetCount1} name={"第二个"} />
    </div>
  );
}

子组件

import react from "react";

const Info = ({ name, info }) => {
  console.log(name + " -> 我被重新渲染了");
  return (
    <div>
      我是{name}子组件：{info()}
    </div>
  );
};
export default react.memo(Info);

页面
在这里插入图片描述
重复点击改变S按钮
在这里插入图片描述

当我们点击改变S按钮的时候发现虽然子组件都用useMemo包裹了，但是子组件1被重新渲染，而子组件2没有被重新渲染。这就是前面提到的useMemo 对props 的浅比较引起的，对于子组件1我们每次都会传给它一个新的getCount1函数，虽然内容是一样的但是并不相等，如下证明两个函数不相等。

失效的原因：

const a = () => {};
const b = () => {};
a === b; // false

那么子组件2 为什么没有被重复渲染呢？这是因为我们给子组件2传递的函数是通过 useCallback包裹过的callbackGetCount1,它会对函数进行缓存，在这个案例中只有当count1(也就是useCallback 通过第二个参数中监听到的数据)改变的时候这个函数才会重新创建从而引起子组件的useMemo的失效。我们通过一个实例来验证这个说法。

只修改上述案例中的父组件的useCallback部分的代码为

  // 修改前
  // const callbackGetCount1 = useCallback(() => {
  //   return count1;
  // }, [count1]);
  // 修改后
  const callbackGetCount1 = useCallback(() => {
    return count1;
  }, [s]);

这个时候当我们再去重复的点击按钮改变S发现子组件二也会跟着发生重新渲染。

useCallback好像会对值进行深度拷贝，也就是缓存，这刚好和它接受第二个参数去监听数据变化想匹配。
额外实验
修改上述的父组件

import "./styles.css";
import Info from "./Info";
import { useCallback, useState } from "react";

export default function App() {
 const [count1, setCount1] = useState(0);
 const getCount1 = () => {
   return count1;
 };
 const callbackGetCount1 = useCallback(() => {
   console.log(count1);
   setCount1(count1 + Math.random());
 }, []);

 return (
   <div className="App">
     <h1>Hello CodeSandbox</h1>
     <div>
       <button
         onClick={() => {
           callbackGetCount1();
         }}
       >
         触发callback函数
       </button>
     </div>
     <button
       onClick={() => {
         setCount1(count1 + 1);
       }}
     >
       +1
     </button>
     <Info info={getCount1} name={"第一个"} />
   </div>
 );
}

页面：
在这里插入图片描述

我们可以进行以下操作，比如重复点击触发callback函数这个按钮，发现控制台输出如下
在这里插入图片描述
发现count1 的值并没有改变，但是页面上的子组件中对应显示的count1发生改变。也就是说我们在外面通过useState创建的count1和useCallback中的count1不是一个同一个东西，但是setCount1却是一样的，所以我猜测这里应该是useCallback对传入的函数中的那些变量进行了一次值拷贝才出现这样的情况（还没没看过源码具体原理还不是很清楚）.

三、useRef 的两种用法

1 、获取DOM元素的对象

import { useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const myRef = useRef<any>(HTMLInputElement);

  useEffect(() => {}, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input ref={myRef} />
      <button
        onClick={() => {
          console.log(myRef);
          console.log(myRef.current.value);
        }}
      >
        输出
      </button>
    </div>
  );
}

页面
在这里插入图片描述

我们通过myRef跟input 框绑定，方便我们从其他地方获取input框中的内容（而不是通过js获取dom元素的值）。

**点击输出按钮控制台的结果
在这里插入图片描述

2 、缓存数值

直接生命存储数据的案例

import { useState } from "react";
import "./styles.css";

export default function App() {
 const [uodate, setUpdate] = useState(false);
 let num = 0;

 return (
   <div className="App">
     <h1>Hello CodeSandbox</h1>
     <input
       onChange={(e) => {
         setUpdate(!uodate);
       }}
     />
     <button
       onClick={() => {
         num++;
       }}
     >
       点我+ num
     </button>
     <button
       onClick={() => {
         console.log(num);
       }}
     >
       输出
     </button>
   </div>
 );
}

页面
在这里插入图片描述

首先是关于页面内容的说明：

  • 出入框搭配useState实现当输入内容变化的时候组件重新渲染
  • 点我 + num 按钮可以实现增加 num 的值
  • 输出按钮则可以在控制台输出num 的值
    实验的步骤：
  1. 连续点击2（没有要求，点了就行）次 点我 + num 按钮
  2. 点击输出按钮
  3. 向输入框中输入一个值
  4. 再次点击输出按钮
  5. 观察控制台输出
    控制台结果
    在这里插入图片描述
    在这个实验中，我们通过步骤三确定了num可以成功加上，但是由于给输入框输入值的时候触发了页面的刷新导致 let num = 0;语句重新执行，第二次点击输出按钮的时候输出的num 的值又变回了0

使用 useRef 存储数据的案例

import { useRef, useState } from "react";
import "./styles.css";

export default function App() {
 const [uodate, setUpdate] = useState(false);
 const num = useRef(0);

 return (
   <div className="App">
     <h1>Hello CodeSandbox</h1>
     <input
       onChange={(e) => {
         setUpdate(!uodate);
       }}
     />
     <button
       onClick={() => {
         num.current++;
       }}
     >
       点我+ num
     </button>
     <button
       onClick={() => {
         console.log(num.current);
       }}
     >
       输出
     </button>
   </div>
 );
}

页面的布局和作用跟上面那个相同

首先是关于页面内容的说明：

  • 出入框搭配useState实现当输入内容变化的时候组件重新渲染
  • 点我 + num 按钮可以实现增加 num 的值
  • 输出按钮则可以在控制台输出num 的值
    实验的步骤：
  1. 连续点击2（没有要求，点了就行）次 点我 + num 按钮
  2. 点击输出按钮
  3. 向输入框中输入一个值
  4. 再次点击输出按钮
  5. 观察控制台输出
    控制台结果
    在这里插入图片描述
    输出的结果符合预期

其实上面的还可以通过在函数外面var一个num变量也可以避免这种问题的出现，不过其实用哪种方式存储数据，还是要根据我们的场景，有时候我们可能就是需要那种每次刷新变量重新赋值的场景

总结

useMemo可以理解成缓存组件的props 的，只有组件的props变化才会触发组件重新渲染
useCallback可以理解成缓存函数的，只有当这个useCallback对应监听的数据发生改变的时候，才会重新创建这个函数。

程序员_yw
关注
专栏目录
对React Hooks的理解
qq_33495944的博客
07-15 603
文章目录一、Why二、What三、How1.引入库2.读入数据四、Use五、Summarize 一、Why React 创建组件的方式，最常见的有两种，一个是类组件，例如 class Dashboard extends React.Component, 一种是纯函数组件， 例如 const Dashboard = () => {return <></>}， 而我们希望组件不要变成复杂的容器，最好只是数据的管道。所以组件的最佳写法应该是函数，而不是类。 但是，我们知道穿函数组
浅谈React中的Hooks
weixin_57519185的博客
11-12 1337
一，Hooks是什么？ 在React中函数组件是没有React state 、生命周期这些功能的。在React16.8之前的模式是 class 组件(提供状态) + 函数组件(展示内容) ；React16.8之后，React提供了Hooks钩子函数，它使函数组件提供了状态、生命周期等原本 在Class 组件中才提供的功能。 Hooks带来的好处： 函数本身比较简单，提供了Hooks的函数组件可以更好的胜任根据状态来渲染UI这件事 hooks让函数组件内部有...
深拷贝、浅拷贝 react的“不可变值”
faith_girl的博客
12-11 1796
在react中 如果不想改变初始值的话 建议使用hook方法进行深拷贝使用展开运算符（Spread Operator）对象的例子：setState({...state,});在这个例子中，我们使用展开运算符 … 来创建一个新的对象，新对象包含了原对象的所有属性和方法，同时修改了 count 属性的值。由于我们使用了新的对象来更新状态变量，因此可以实现不可变数据。数组的例子：使用数组的 map() 方法可以使用数组的 map() 方法来创建一个新的数组，从而实现不可变数据。
react中类组件以及常见hooks总结
qq_44307861的博客
11-06 205
react中常见hooks总结
React 中的 useMemo 和 useCallback
最新发布
越陌度阡
08-07 405
useCallback优化示例：定义一个子组件在父组件中调用，当父组件更新重新渲染时，子组件也会重新渲染。然后我们对子组件加了memo对传入的参数进行检测，同时对传入子组件的方法使用useCallback进行缓存，这样当父组件在更新时，缓存的方法没有发生变化，子组件通过memo发现传入的方法没有发生改变，也就不会重新渲染，以此提高了性能。
React 的源码与原理解读（十二）：Hooks解读之一 useCallback&useMemo
weixin_46463785的博客
05-10 1643
从这个章节开始，我们将逐步讲解部分常用的 hooks，我会按照我们理解这些 hooks 的难度来讲解，本节主要讲解我们用于优化的useCallback 和 useMemo 两个 api，我们将从使用和源码两个角度来讲它：
React性能优化之useCallback与useMemo
u010651383的专栏
05-03 1193
React性能优化之useCallback与useMemo useMemo 当我们在写一个函数式组件时，经常会遇到非依赖的变量改变导致某些方法重新执行，造成性能浪费，这个时候，我们可以考虑使用useMemo对我们的值进行缓存，只有当这个值的依赖项改变时，我们采取重新执行方法获取新值，否则直接从缓存中获取上一次的值直接返回。 场景与示例 我们来看下面这段伪代码： function Demo(){ const [count, setCount] = useState<number>(0)
react useCallback的用法
秋来九月八
11-23 3万+
useCallback是react中比较重要的一个hook，用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。useCallback 还可以用于优化函数的性能。它的主要作用是缓存一个回调函数，以确保在组件重新渲染时不会创建新的回调函数，从而减少不必要的性能开销。useCallback 通常与 React.memo 或 shouldComponentUpdate 一起使用，以避免不必要的组件重新渲染。
React Hooks的深入理解与使用
10-17
React Hooks的深入理解与使用，主要是为了解决React在使用和维护过程中的一些问题。其中，最主要的问题包括难以重用和共享组件中的与状态相关的逻辑、逻辑复杂的组件难以开发与维护、类组件中的this增加学习成本以及...
react-react面试题之对hooks的理解.zip
03-20
在React的世界里，Hooks是自React 16.8版本引入的一个重大创新，极大地改变了我们编写函数组件的方式。本面试题集重点在于考察...在面试中，对Hooks深入理解的展示将有助于评估候选人的React实战经验和抽象思维能力。
react-native-hooks:完整的React Native + Hooks课程[2020版]-Udemy
04-02
在React Native中，Hooks的使用可以使得代码更加简洁、易于理解和测试。通过本课程，开发者将学习如何有效地利用这些Hooks优化代码结构，提高应用性能，并实现更高效的组件复用。课程可能涵盖了从基本概念到高级技巧...
awesome-react-hooks：关于React Hooks的精选列表
01-31
React Hooks 是React 16.8版本引入的一个重大特性，它彻底改变了React组件的编写方式，使得在函数组件中...在实际工作中，充分利用这些资源，可以帮助开发者更好地理解和运用React Hooks，从而提高开发效率和项目质量。
React 函数式组件缓存原理
PingMinWangZi的博客
11-01 4804
对 React 函数式组件缓存的思考 自从 React 16.8 版本推出 Hooks 用法以来，围绕函数组件的优化出现了各种不同的思考。本篇文章从 React 底层 Render 角度，分析 React 的渲染缓存机制。思考 memo 在函数组件局部内容缓存中发挥的作用。 从 JSX 谈起 我们知道在浏览器中运用 React 技术栈，必不可少的需要两部分东西。一个是 React 本身，另外一个是 React-dom。React 中渲染页面及交互的本质是运用 JS 的各类操作 DOM 的 API ...
useMemo的使用
ZuoZuoDangerou的博客
12-28 1504
useMemo用来缓存一个组件 在父组件中定义俩个时间值传给子组件 //app.js import React,{useState} from 'react'; import Memo from './useMemo' function App(){ const [time,setTime]=useState(new Date().getTime()) const [day,setDay]=useState(new Date().getDay()) return( <div&g.
React.memo()、useCallback()和useMemo()的用法--性能优化--缓存
weixin_45012866的博客
10-20 1725
React.memo()、 钩子函数useCallback和useMemo对react中的组件、函数、函数执行结果进行了缓存的实现。
react中使用useMemo和useCallback
陈开心的博客
01-16 1万+
之前学到的memo是用来优化函数组件的重渲染问题，当传入的属性值都没变化时就不会触发组件的重渲染，否则组件就会重渲染。和类组件中的PureComponent组件是类似。 useMemo功能是判断组件中的函数逻辑是否重新执行，用来优化性能。 import React, { useState, useMemo } from 'react'; // , PureComponent, memo, useS...
一文搞懂useCallback的使用
热门推荐
Kobe_G的博客
12-11 4万+
一、useCallback的作用 usecallback不是用来解决组件中有过多内部函数导致的性能问题： 1.我们要知道，js创建一个函数的成本是非常小的，这点计算对于计算机来说是小case 2.其实使用useCallback会产成额外的性能：对deps的判断 3.其实每次组件重新渲染时，都无所谓避免重新创建内部函数，因为即使useCallback的deps没有变，它也会重新创建内部函数作为useCallback的实参 那么，它的作用到底是什么？useCallback的作用其实是用来避免子组件不必要的reR
10.react的hook之useCallback
weixin_42845571的博客
05-18 652
useCallback是函数组件，类似于userEffect,第一个参数是函数，第二个参数是数组，监听的值变化的时候才会执行当前的函数 function Form() { const [text, updateText] = useState(''); const handleSubmit = useCallback(() => { console.log(text); }, [text]); // 每次 text 变化时 handleSubmit 都会变
React中的useCallback和useMemo
无简介！！
10-28 293
使用 这个useCallback 进行函数记忆 原因就是 我们useState 是可以 记住状态的。和useCallback 一样 但是 useCallback是将保存的函数体返回给你。函数组件重新刷新 这个handleChange的函数 却会被缓存下来。而useMeno 是将保存的函数体的运算结果交给你。这个功能类似于 vue中的computed 计算属性。但是 我们自己定义的 是没有记忆的功能的。这样包裹一下 就算你重新set 状态。就算你每次++ 它还是0。
react中hooks 的隐藏依赖
06-29
在 React 中，Hooks 是一种在函数组件中使用状态和生命周期方法的新方式。它们引入了一些“隐藏”依赖，这些依赖并不是显式传递给 Hook 的参数，但对 Hook 的行为至关重要。主要的隐藏依赖包括： 1. 上下文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值