React16源码: Why16, 研究源码的意义, 源码目录核心结构分析

为什么要选择React16

  • 现在React18都早已实践很多,为何回过头来看16版本的代码
  • 理由如下
    • 从实际出发,企业内老旧项目多为16版本,理解16的核心能够帮助我们快速解决问题
    • 16版本React是完全重写了核心代码, 是一次重大的更新
      • 引入了 fiber 这个概念,从根本上解决了JS单线程运行问题
      • 引入了hooks,摆脱了 class component 的一些繁琐的内容

关于React框架

  • React 是一个非常纯粹的 UI 框架,通过state映射UI的方式来屏蔽了dom操作
  • 现在业界的框架大多如此, 但是说React纯粹是因为它的API设计非常的纯粹
    • 核心API就是 setState,其余所有的内容都围绕着组件化来设计
    • 没有directive双向绑定以及其他的一些API
    • 它要改变一个UI你只能通过setState来改变对应的状态
    • 这就给了react无比纯粹的开发体验, 一切基于组件
    • 同时react又是一个思想超前的框架
    • 而Vue框架是基于React发展而来,很多思想都是借鉴React的思路

深入研究React源码的意义

  • 能在遇到bug的时候,从底层去思考如何去解决问题
  • 并且能够让你在开始项目之前就想好更好的架构方式
  • React源码的很多设计细节都是非常高明的,学习源码能有助于你提升整体的编码能力
  • React源码是由全世界最好的一部分前端开发人员一起维护了好几年才形成现在这个版本的代码
  • 它的代码质量肯定是非常高的, 它的一些解决方案是非常有效的
  • 研究这些编码的思维,对我们将来肯定也有非常大的帮助

React16 源码目录结构分析


1 )概述
  • 比如: React 16.6 版本
  • 仓库地址: https://github.com/facebook/react/tree/v16.6.0/packages

核心结构

react/packages
├── event        # 编译相关 
├── react            # 核心 api
├── react-dom       # 核心 api 操作dom
├── react-reconciler          # 服务端渲染
├── scheduler             # .调度计划
├── shared          # 共享代码
├── ...          # 其他

2 )说明

  • event 事件系统

    • 我们知道react使用的是onClick这种在标签上面写props的方法去绑定事件
    • 它跟原生的事件绑定是有一定的区别的
    • 它自己实现了一套事件的一个传播的体系
    • 这部分的代码就在events 目录下面
  • react 核心api

    • 它的核心代码全在这里面
  • react-dom dom操作核心api

    • 和 dom操作有关
    • react-dom 本身非常依赖 react-reconciler 包
  • react-reconciler 协调器

    • react api外最核心的api
    • 被 react-dom 包重度依赖
    • 同时也被用于 react-native 中
  • scheduler 调度器

    • 调度过程的逻辑非常复杂
    • 是 React16之后非常核心的一块内容
  • shared 工具包

    • 存放一些比较共用的代码

3 )其他

  • 不是说其他的源码内容不重要,先主要关注这几大模块核心的逻辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈大模型推理成本优化

上回说了,全赞AI的应用里面有用到几十个大模型,我的其他的应用比如渣渣句,熊喵表情都会或多或少的用到一到两个大模型的推理。而众所周知,目前大模型的推理存在两个问题,一个是慢,一个是贵,慢的…

MyBatisPlus之逻辑删除

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 MyBatisPlus之逻辑删除 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、什么是逻辑删…

微服务系列之分布式事务理论

概述 事务是由一组操作构成的可靠的独立的工作单元,事务具备ACID的特性,即原子性、一致性、隔离性和持久性。 分类 大多数情况下,分类是没有意义的一件事。但是分类可以一定程度上,加深理解。 实现 从实现角度来看&#xff0…

轻松删除文件名中的符号,使用替换功能,让管理文件更加得心应手!

在我们的日常生活和工作中,文件管理是一项必不可少的任务。而一个整洁、有序的文件名系统则有助于我们快速找到所需的文件。如果你发现文件名中存在一些不必要的符号,那么这款文件重命名工具将是你的得力助手。它具备强大的替换功能,可以轻松…

数的高次幂运算取余,解决大数溢出问题

目录 解决思路引用基础数学公式公式1证明:公式2证明:公式3证明:公式4,但无法证明大数分解解决思路 当一个幂运算很大,而模为整型数时,通常的做法(先求幂再取模),结果很大可能就是数溢出,无法表示这样的大数,导致运算失败。 可以先试着将数分割成几个部分,然后一个…

在 Unity 中获取 Object 对象的编辑器对象

有这个需求的原因是,在编辑器的 Inspector 逻辑中,写了许多生成逻辑。 现在不想挨个在 Inspector 上都点一遍按钮,所以就需要能获取到它们的编辑器对象。 发现可以借助官方的 UnityEditor.Editor.CreateEditor 方法达到目的,如下…

OpcUaHelper实现西门子OPC Server数据交互

Opc ua客户端类库,基于.net 4.6.1创建,基于官方opc ua基金会跨平台库创建,方便的实现和OPC Server进行数据交互。 FormBrowseServer 在开发客户端之前,需要使用本窗口来进行查看服务器的节点状态,因为在请求服务器的节点数据之前,必须知道节点的名称,而节点的名称可以…

分布式技术之负载均衡技术

文章目录 什么是负载均衡?服务请求的负载均衡方法轮询策略随机策略哈希和一致性哈希策略对比分析 负载均衡是分布式可靠性中非常关键的一个问题或技术,在一定程度上反映了分布式系统对业务处理的能力。比如,早期的电商抢购活动,当…

4.36 构建onnx结构模型-Where

前言 构建onnx方式通常有两种: 1、通过代码转换成onnx结构,比如pytorch —> onnx 2、通过onnx 自定义结点,图,生成onnx结构 本文主要是简单学习和使用两种不同onnx结构, 下面以 Where 结点进行分析 方式 方法一…

记录一下imx6ull linux 5.10.9多点电容触摸屏驱动报错问题解决方法

最近再研究如何将linux 5.10.9移植到imx6ull,用的原子的开发板,在移植电容触摸屏驱动时报错gpio gpiochip0: (209c000.gpio): gpiochip_lock_as_irq: tried to flag a GPIO set as output for IRQ,如下图: 该错误的意思就是尝试将…

数据库系统概论SQL编程题合集(包含期末题、考研初试题以及复试题)

二、现有数据库casemanage中表结构如下图 1)请编写sql语句对年龄进行升序排列 select * from afinfo order by birth;2)请编写sql语句查询对“徐”姓开头的人员名单 select * from afinfo where name like 徐%;3)请编写sql语句修改“陈晓”…

【在大厂做测试外包这一年】

​ 在大厂做测试外包这一年 大厂外包是一种趋势,以后可能会越来越多,最起码测试行业是这样,像我们的测试工作,我所在的项目领导是大厂内部的,组长是OD外包,组员是普通外包。   1、关于办公方式 有两种方…

2024年【茶艺师(初级)】考试技巧及茶艺师(初级)试题及解析

题库来源:安全生产模拟考试一点通公众号小程序 茶艺师(初级)考试技巧是安全生产模拟考试一点通生成的,茶艺师(初级)证模拟考试题库是根据茶艺师(初级)最新版教材汇编出茶艺师&#…

「Kafka」入门篇

「Kafka」入门篇 基础架构 Kafka 快速入门 集群规划 集群部署 官方下载地址:http://kafka.apache.org/downloads.html 解压安装包: [atguiguhadoop102 software]$ tar -zxvf kafka_2.12-3.0.0.tgz -C /opt/module/修改解压后的文件名称: [a…

Vue3使用WangEditor编辑器

WangEditor的基本使用&#xff0c;图片上传功能 没详细讲解&#xff0c;只是做个记录。 Componets 下定义 WangEditor.vue 文件 <template><div style"border: 1px solid #ccc;"><Toolbar style"border-bottom: 1px solid #ccc" :editor&q…

关于HTTPS

目录 什么是加密 对称加密 非对称加密 中间人攻击 引入证书 HTTPS是一个应用层的协议,是在HTTP协议的基础上引入了一个加密层. HTTP协议内容都是按照文本的方式明文传输,这就导致在传输的过程中出现一些被篡改的情况. 运营商劫持事件 未被劫持的效果,点击下载按钮,就会…

Mybatis分页插件之PageHelper生效and失效原理解析

文章目录 前言整合PageHelperPageHelper生效原理PageHelper的分页参数和线程绑定核心拦截逻辑生成分页SQLdialect.afterAll() PageHelper失效原理分页失效案例分页失效原理总结 Mybatis拦截器系列文章&#xff1a;从零开始的 MyBatis 拦截器之旅&#xff1a;实战经验分享 构建自…

探索 3D 图形处理的奥秘

最近一年多来&#xff0c;在 3Dfx、Intel 们的狂轰滥炸中&#xff0c;在 Quake、古墓丽影们的推波助澜下&#xff0c;三维图形已经成为计算机迷眼中的又一个热点。3D 世界到底是怎样的神奇&#xff0c;我们又是怎样享受它的乐趣呢&#xff1f;就让我们来一探究竟吧。 图形基础…

K8s资源管理介绍

用这个官网下的&#xff0c;kube-flannel.yml &#xff0c;就不会nodes not-ready --- kind: Namespace apiVersion: v1 metadata:name: kube-flannellabels:k8s-app: flannelpod-security.kubernetes.io/enforce: privileged --- kind: ClusterRole apiVersion: rbac.author…

递归详解之青蛙跳台阶和汉诺塔问题

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…