「React 深入」一文吃透React v18 全部 Api(1.3w+ 字)

2023-11-02

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

大家好,我是小杜杜,俗话说的好,工欲善其事必先利其器,什么意思呢?就是说你想玩转React就必须知道React有什么,无论是否运用到,首先都要知道,提升思维广度~

其实React官方提供了很多Api,只是这些Api我们并不常用,所以往往会忽略它们,但在一些特定的场景下,这些Api也会起到关键性的作用,所以今天就逐个盘点一下,说说它们的使用方法和使用场景。

当然这些Api并不需要全部掌握,只需要知道有这个知识点就好了~

本文将会全面总结所有的ReactApi,包含组件类工具类生命周期react-hooksreact-dom五大模块,并配带示例,帮助大家更好的掌握,大家可以边嗑瓜子边阅读,如有不全、不对的地方欢迎在评论区指出~

由于本文过长,建议点赞 +收藏, 在正式开始前,我抽取了一些问题,一起来看看:

  • 1.React v18中对react-dom做了那些改动,增加了那些新的hooks?

  • 2.useRef除了获取元素的节点信息,还能做什么?

  • 3.为什么会有Children.map?它与不同的遍历有和不同

  • 4.类组件的生命周期在不同的版本是怎样变化的?

  • 5.子元素如何渲染到父元素上面的?

  • ...

其实问题很多,看完这篇文章后,相信一定能帮你解答的非常清楚,还请各位小伙伴多多支持一下

前言

在之前的几篇文章中,有自定义hooksHOC虚拟DOMdiff算法,多多少少都有React官方Api做为基础条件,我的这个专栏的目的就是对React的深入,就是希望对React有一个全面的提升

写这篇文章的主要目的有:

  • 提升知识广度,要想深入React就必须全面了解React,首先要学会用,要知道,如果连知道都不知道,谈何深入?

  • React v18react-dom的改动还是比较大的,并且新增了五个hooks,逐一盘点一下,看看做了那些改动

  • 这个专栏实际上是循序渐进的,相互之间都有一定的关联,同时要想看懂,也需要有一定的React基础,对刚开始学习React的小伙伴可能并不是太友好,所以特地总结一番,用最简单的示例,帮你掌握这些Api

  • 对之后的源码有帮助,所以本篇文章将会全面解读React Api的使用方法,和场景,如有不足,还希望在评论区指出~

附上一张今天的学习图谱~

45c03cbe8e56344832ad807a246bcfe8.jpeg
全面解读ReactApi.png

组件类

Component

在React中提供两种形式,一种是类组件,另一种是函数式组件,而在类组件组件中需要使用Component继承,这个组件没有什么好讲的,我们可以看看源码:

文件位置packages/react/src/ReactBaseClasses.js

5a3105c15674e15bd89844fff5c3d02d.jpeg
image.png

可以看出Component进行一些初始化的工作,updater保存着更新组件的方法

PureComponent

PureComponent:会对propsstate进行浅比较,跳过不必要的更新,提高组件性能。

可以说PureComponentComponent基本完全一致,但PureComponent会浅比较,也就是较少render渲染的次数,所以PureComponent一般用于性能优化

那么什么是浅比较,举个

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

「React 深入」一文吃透React v18 全部 Api(1.3w+ 字) 的相关文章

随机推荐

  • MFC快速入门

    1 新建 MFC 2 直接进入框图界面 资源文件 rc Dialog 3 给控件添加消息处理函数 选中控件 右键 添加事件处理程序 跳转函数 写函数 4 在消息处理函数中添加自定义功能 在我们使用任意一种方法添加了消息处理函数以后 都只能得
  • unity3D 《见缝插针》--得分显示、结束动画、以及游戏的重置

    一 得分显示 1 首先在scene新建一个Text的UI组件 它在Canvas面板下 2 进行缩放 3 为Canvas添加脚本 代码如下 public static int scoreValue public Text scoreText
  • 【Android】常用对话框大全(三)自定义Dialog的三种方式(Theme,PopupWindow,Dialog)

    Android Dialog自定义的方式有很多 例如 Theme Dialog PopupWindow AlertDialog View等方式 Android常用对话框系列文章 Android 常用对话框大全 一 Android Dialo
  • [毕业设计]LaTeX论文模板排版

    目录 前言 课题背景和意义 实现技术思路 实现效果图样例 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个学校要求的毕设项目越来越难 有不少课题是研究生级别难度
  • matplotlib—画正弦、余弦函数图

    一 导入模块 import matplotlib pyplot as plt import numpy as np plt rcParams font sans serif SimHei 用于正常显示中文标签 plt rcParams ax
  • 人工智能与神经网络-激活函数

    人工神经元的工作原理 大致如下 上述过程的数学可视化过程如下图 激活函数 Activation Function 是一种添加到人工神经网络中的函数 旨在帮助网络学习数据中的复杂模式 类似于人类大脑中基于神经元的模型 激活函数最终决定了要发射
  • 【宝塔面板建站】01. 5分钟windows宝塔面板的安装(保姆级图文)

    目录 1 下载宝塔面板 2 安装宝塔面板 3 初始化面板 4 安装套件 关于建站使用 总结 宝塔面板建站 分享宝塔面板从安装到实战的宝塔面板本机免云服务器免域名搭建网站等内容 欢迎关注 宝塔面板建站 系列 持续更新中 欢迎关注 宝塔面板建站
  • 机器人学之动力学笔记【11】—— 拉格朗日 动力学方程

    机器人学之动力学笔记 11 拉格朗日 动力学方程 1 拉格朗日法 2 举例 An RP Manipulator 3 转换到笛卡尔空间下 4 考虑能量损耗 1 拉格朗日法 之前我们学习了如何使用牛顿 欧拉法 基于力和力矩分析 建立机械臂的动力
  • 解决文件只能在windows系统上传成功,而linux系统上传失败。

    场景 在我们项目准备上线进行SIT测试的时候 测试在文件上传的时候 一直上传不成功 表示当前文件不支持上传 然后我们让测试将他的文件发送给我们进行测试 我们是能够上传成功的 然后询问他们使用的什么系统 发现他们使用的是Linux发行版操作系
  • android中surfaceview时间长了卡主,被SurfaceView搞死了的搞后感

    这几天遇到一个问题 视频播放时 为了保持视频的宽高比 就需要在surfaceView的父view的大小改变的时候 改变SurfaceView的大小 父View的大小改变的时候 会走View的onSizeChanged回调 所以 复写了这个方
  • Oracle 11G Client 客户端安装步骤(图文详解)

    oracle 2010 http www cnblogs com jiguixin archive 2011 09 09 2172672 html 下载地址 http download oracle com otn nt oracle11g
  • 文件操作 和 IO

    目录 编辑一 认识文件 1 文件路径 2 其它知识 二 Java 中操作文件 三 文件内容的读写 1 Reader 2 InputStream 3 输出 一 认识文件 文件是在硬盘上存储数据的一种方式 操作系统帮我们把硬盘的一些细节都封装起
  • docker运行nginx为什么要使用 nginx -g ‘daemon off;‘

    1 docker容器跑着为啥会挂掉 docker 容器默认会把容器内部第一个进程 也就是pid 1的程序作为docker容器是否正在运行的依据 如果docker 容器pid挂了 那么docker容器便会直接退出 2 docker run的时
  • AngularJS全局API

    AngularJS全局API AngularJS全局API是一组全局JavaScript函数 用来进行一些常用的操作 例如 比较两个对象 迭代对象 进行数据格式转换 全局API函数可以通过angular对象来直接调用 下表列除了一些比较常用
  • Atitit. 有限状态机 fsm 状态模式

    Atitit 有限状态机 fsm 状态模式 1 有限状态机 1 2 状态表 和 状态轮换表 1 3 有限状态机概念 状态 State 事件 Event 转换 Transition 动作 Action 2 4 状态机的应用场景 2 4 1 有
  • 运行monkeyrunner报 ANDROID_SWT set error

    运行monkeyrunner报错 Please set ANDROID SWT to point to the folder containing swt jar for your platform 原因 monkeyrunner 找不到s
  • 《A Survey on Visual Transformer》阅读笔记

    文章目录 前言 一 用于视觉的transformer介绍 1 transformer发展的关键节点如下 视觉相关的transformer用红色标记 2 用于视觉的transformer代表性成果 二 transformer模型 1 原始tr
  • 【python爬虫】7.爬到的数据存到哪里?

    文章目录 前言 存储数据的方式 存储数据的基础知识 基础知识 Excel写入与读取 基础知识 csv写入与读取 项目 存储周杰伦的歌曲信息 复习 前言 上一关我们以QQ音乐为例 主要学习了如何带参数地请求数据 get请求 和Request
  • Web服务器、Servlet容器和Servlet

    1 什么是Web服务器 想要知道什么是Servlet容器 我们首先要知道什么是Web服务器 Web服务器使用HTTP协议来传输数据 最简单的一种情况是 用户在浏览器 客户端 client 中输入一个URL 如 www programcree
  • 「React 深入」一文吃透React v18 全部 Api(1.3w+ 字)

    点击上方 前端Q 关注公众号 回复加群 加入前端Q技术交流群 大家好 我是小杜杜 俗话说的好 工欲善其事必先利其器 什么意思呢 就是说你想玩转React就必须知道React有什么 无论是否运用到 首先都要知道 提升思维广度 其实React官
Powered by Hwhale