React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo

ops/2024/11/29 6:19:46/

文章目录

  • 项目地址
  • 十六、useContecxt
  • 十七、useReducer
  • 十八、React.memo以及产生的问题
    • 18.1组件嵌套的渲染规律
    • 18.2 React.memo
    • 18.3 引出问题
  • 十九、useCallback和useMemo
    • 19.1 useCallback对函数进行缓存
    • 19.2 useMemo
      • 19.2.1 基本的使用
      • 19.2.2 缓存属性数据
    • 19.2.3 对于更新的理解
  • 二十、useRef记忆功能
    • 20.1 与useState的区别


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

十六、useContecxt

让子组件,子孙组件,不用通过props一层一层传递,可以直接取值,类似于定义一个全局变量,子孙组件都可以直接使用这个全局变量,而不是一层一层获取

  1. 创建context,给子组件传值
    在这里插入图片描述
  2. 使用context里的数据

在这里插入图片描述

十七、useReducer

  1. 设置一个函数,用来管理所有状态的操作,其中state表示操作之前的值,action = {type:具体操作的名称, payload:表示操作附带的值},最后操作结束后return的值去覆盖之前的state的值
    在这里插入图片描述

  2. 使用useReducer,第一个参数就是操作状态的函数,参数二,就是初始值,用来被参数一操作的值

在这里插入图片描述
注意:这里的state是个数值,所以它可以直接进行加减,但是如果state是对象或者数组,需要解构,使用的时候也是以对象的形式

十八、React.memo以及产生的问题

18.1组件嵌套的渲染规律

  1. 当父组件重新渲染,子组件默认情况下,跟着父组件一起重新渲染;
  2. 如果子组件重新渲染,父组件是不会重新渲染的;

18.2 React.memo

  • 为了解决上面父组件重新渲染,导致子组件也跟着一起渲染的资源浪费问题, 我们使用React.memo,对子组件进行缓存,只有当子组件发生了变化后,才会一起渲染,子组件 重新缓存的情况:
    1. props属性发生了改变;
    1. state组件的状态发生改变
    1. unseContext的值发生了改变
  1. 使用memo将子组件包裹起来

在这里插入图片描述
2. 但是,下面这种情况,由于父组件给子组件传递了props,子组件虽然设置了memo,但是还是会重新渲染,原因是因为每次父组件重新渲染后,里面传值的内存地址发生了变化,虽然值没变,但是对于子组件来说 发生了变化
在这里插入图片描述

18.3 引出问题

上面的数组和function为了保持不变,不让子组件重新渲染,需要使用useMemo和useCallback来防止子组件重新渲染

十九、useCallback和useMemo

19.1 useCallback对函数进行缓存

使用useCallback对函数进行缓存,其中参数1,是函数体,参数2是 依赖项,就是被观察是否变化的项,根据变化与否,改变来判断是否重新渲染

在这里插入图片描述

19.2 useMemo

19.2.1 基本的使用

  1. 假如以下代码,当x或y发生了变化的时候,下面的繁重计算也会发生重新渲染,重新计算,是非常消耗内存的
    在这里插入图片描述
  2. 为了解决这一问题,我们需要设计的程序是,只有计算条件发生变化的时候,才对计算部分进行重新渲染,使用useMemo解决这一问题,也是需要依赖项

在这里插入图片描述

19.2.2 缓存属性数据

  • 解决18里面的arr= [1,2,3]属性,没发生变化,但是传入子组件用的时候,会 导致子组件重新渲染
const arr = useMemo(()=>[1,2,3],[])

19.2.3 对于更新的理解

只要有方法把不变的状态记住,那么在父组件渲染的时候,子组件就不会重新渲染

  • useState
    在这里插入图片描述
  • useRef:这里使用useRef更合适,因为不需要渲染
  • 在这里插入图片描述

二十、useRef记忆功能

只用于记忆,不用于渲染

20.1 与useState的区别

  1. useState是,更改+渲染
  2. useRef 只更改不渲染

http://www.ppmy.cn/ops/137587.html

相关文章

深入理解 JavaScript 中的 AbortController

在现代 JavaScript 开发中,处理异步操作是极为常见的任务。然而,有时我们需要一种机制来主动取消正在进行的异步操作,这时候 AbortController 就派上了大用场。本文将深入探讨 AbortController 的功能、用法以及它在实际开发中的应用场景。 …

练习题 - Django 4.x CSRF 站点保护示例和使用配置方法

在 Web 应用程序的开发中,安全性是一个非常重要的方面。CSRF(跨站请求伪造)是一种常见的网络攻击方式,攻击者通过伪造用户的请求来执行恶意操作。为了防止这种攻击,Django 提供了内置的 CSRF 防护机制。学习如何在 Django 中正确配置和使用 CSRF 保护,可以有效地提高 Web…

csp-j初赛模拟试题(解析)

题目: 在 C中,以下哪个关键字用于实现多态性? A. virtualB. staticC. externD. const 以下数据结构中,不属于线性结构的是( )。 A. 栈B. 队列C. 二叉树D. 链表 一个有 8 个顶点的无向图,若每个…

blender如何使用nerf插件得到渲染好的二维图像和相机内外参数(blender数据集的构建)

GitHub - maximeraafat/BlenderNeRF: Easy NeRF synthetic dataset creation within Blender 上述链接是插件github地址,得到插件后在左上角的编辑中选择 启用插件,效果如下 按n键,弹出UI界面 三种模式都可以使用: SOF模式&…

【代码随想录|贪心算法02】

122.买股票的最佳时机 题目链接https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-ii 好巧妙的一道题啊,做之前完全不会想到这种解法。 局部最优:收集每天正利润 全局最优:求得最大利润 这道题只让你返回最大的利润和&…

Python学习35天

# 定义父类 class Computer: CPUNone MemoryNone diskNone def __init__(self,CPU,Memory,disk): self.disk disk self.Memory Memory self.CPU CPU def get_details(self): return f"CPU:{self.CPU}\tdisk:{self.disk}\t…

Leetcode1. 两数之和(HOT100)

链接 我的代码&#xff1a; class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int,int> hash;vector<int>res;for(int i 0;i<nums.size();i){hash[nums[i]] i;}for(int i 0;i<nums.size();i…

视觉语言模型(VLM)学习笔记

目录 应用场景举例 VLM 的总体架构包括&#xff1a; 深度解析&#xff1a;图像编码器的实现 图像编码器&#xff1a;视觉 Transformer 注意力机制 视觉-语言投影器 综合实现 训练及注意事项 总结 应用场景举例 基于文本的图像生成或编辑&#xff1a;你输入 “生成一张…