React源码学习(一):如何学习React源码

news2024/9/20 18:44:07

本系列源码学习,是基于 v16.13.1,v17.x与v16.x区别并不太大!

一、如何正确的学习React源码?

  1. 找到Github,转到React仓库,fork / clone源码:React
  2. 查看Readme,在Documentation中有Contributing Guide(参与贡献指南)
  3. 点击跳转后,在“Development Workflow”中有如下一段话:

The easiest way to try your changes is to run yarn build react/index,react-dom/index --type=UMD and then open fixtures/packaging/babel-standalone/dev.html. This file already uses react.development.js from the build folder so it will pick up your changes.

最简单的方法就是先 git 下载 react 官方源码,然后编译成 UMD 库,再使用 fixtures/packaging/babel-standalone/dev.html,这个文件默认使用 react.development.js

我们可以修改react源码,然后build,再打开/刷新dev.html(也可以自己demo),就能学习了。

二、流程步骤:

  1. fork / clone source code;
  2. 进入根目录;
  3. yarn (国内情况...也许要墙);
  4. yarn build react/index,react-dom/index --type=UMD

三、关注官方资源

【React官方博客】

  • Behind the Scenes: Improving the Repository Infrastructure 这篇介绍的是 React 项目仓库的基础设施。
  • Sneak Peek: Beyond React 16
  • React Fiber Architecture Andrew Clark对Fiber架构的介绍

Dan Abramov 最近在 JSConf 上对 React 未来的一些新特性的介绍 - Beyond React 16(墙)

四、附录

【达人分享】
  • Evan You 介绍前端框架数据变化侦测原理的 Talk;Vue 文档中也有 Reactivity in Depth 这样的介绍原理的章节
  • Sean Larkin 的 Everything is a plugin! Mastering webpack from the inside out 介绍了 Webpack 的核心组件 Tapable
  • James Kyle 的 How to Build a Compiler 可以让我们了解 Babel 转译代码的基本流程
【其它博客】
  • 完全理解React Fiber
  • React16.2的fiber架构
  • 一看就晕的React事件机制
  • React 中常见的动画实现方式


喜欢的朋友记得点赞、收藏、关注哦!!!

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

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

相关文章

VLAN原理学习笔记

以太网是一种基于CSMA/CD的数据网络通信技术,其特征是共享通信介质。当主机数目较多时会导致安全隐患、广播泛滥、性能显著下降甚至造成网络不可用。 在这种情况下出现了VLAN (Virtual Local Area Network)技术解决以上问题。 1、VLAN快速配置 Vlan:Virtual Local…

【XR】AR HUD

1. AR HUD(head up display)原理 目标: 产业链上的各大Tier1及PGU企业都在积极开发这一技术,许多厂家已推出LCOS样机,比如说水晶光电、华阳集团、瀚思通、疆程已在北京车展或去年的上海车展上展出了LCOS方案的AR-HUD样…

第一届长城杯信息安全铁人三项赛决赛 取证溯源 (复现)

前言: 2024铁人三项决赛应急响应 您的同事李白在运维一台部署了移动应用服务端的linux服务器时发现了异常,好像被黑客攻 击了。小李通过简单分析,发现可能是由于公司的移动应用和其服务端程序都存在安全问题导致 的。小李将当天可能与攻击相关…

(安装VMtools工具)将一个文件从主系统(windows)传送到VMware虚拟机的Linux系统中

解决问题:将一个文件从主系统(windows)传输到VMware虚拟机的AlmaLinux系统中 博主在主系统和虚拟机文件传输时发现了共享文件夹这一办法,发现需要安装VMtools工具,且网上有关VMtools的教程大多为图形化界面的操作&…

盘点那些初级软件测试面试题汇总

一、请描述如何划分缺陷与错误严重性和优先级别? 给软件缺陷与错误划分严重性和优先级的通用原则: (1)表示软件缺陷所造成的危害和恶劣程度。 (2)优先级表示修复缺陷的重要程度和次序。 严重性&#xf…

基于SpringBoot+Vue的驾校信息管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

OpenAI o1:AI领域的“草莓”革命,华人科学家贡献卓越

最近,科技界的热门明星“草莓”频繁出现在大家的视线中。9月11号,The Information报道称:OpenAI计划在未来两周内推出一款更智能、更昂贵、更谨慎的AI模型!网友们对此消息持怀疑态度,认为类似消息屡见不鲜,…

使用肘部法则确定K-Means中的k值

一 肘部法则 在K-means算法中,对于确定K(簇的数目),我们经常使用肘部法则。 肘部法则是一种用于确定在k均值聚类算法中使用的质心数(k)的技术。 在这种方法中,为了确定k值,我们连续…

springboot修改组件扫描包位置

步骤很详细,直接上教程 问题分析 默认情况下组件扫描包范围为启动类所在包及其子包 解决方法 我们只需要在启动类上面加个注解配置扫描范围 效果演示 温馨提示 非必要不建议修改,按规范创建项目结构一般不会出现这个问题

此mac无法连接Apple媒体服务,因为“”出现问题。

出现问题: 这是因为mac登陆过别人的appId下载过软件,但是没有完全退出登陆 解决 打开偏好设置,点击头像,点击媒体与已购项目,能看到弹框内AppleID登陆的应用,打开对应的那个应用,我这里是音…

对抗性EM用于变分深度学习:在低剂量PET和低剂量CT中的半监督图像质量增强应用|文献速递--Transformer架构在医学影像分析中的应用

Title 题目 Adversarial EM for variational deep learning: Application to semi-supervised image quality enhancement in low-dose PET and low-dose CT 对抗性EM用于变分深度学习:在低剂量PET和低剂量CT中的半监督图像质量增强应用 01 文献速递介绍 医学影…

OpenAI 全新 o1 模型上线 Cursor,开发者们欢呼!

最近 OpenAI 推出了新一代 o1模型,现在可以在 Cursor 上使用了。这些 o1模型在处理复杂和精细的推理任务上表现出色,令许多开发者为之兴奋。 特别值得一提的是,o1-mini 模型专门为高级编程设计,成为了开发者们的新宠。 最开始&am…

c++类和对象(3):默认成员函数(下)

1.拷贝构造函数 如果⼀个构造函数的第⼀个参数是自身类类型的引用,且任何额外的参数都有默认值,则此构造函数也叫做拷贝构造函数,也就是说拷贝构造是⼀个特殊的构造函数。 c规定:类类型的传值传参必须用拷贝构造 1.1拷贝构造函数…

SpringBoot:Web开发(基于SpringBoot使用MyBatis-Plus+JSP开发)

目录 前期准备 构建项目(IDEA2023.1.2,JDK21,SpringBoot3.3.3) 添加启动器 Model准备 这里我们利用MybatisX插件生成我们所需要的实体类、数据访问层以及服务层 注意选择MyBatis-Plus3以及Lombok 然后再在service接口中定义…

Leetcode 每日一题:Course Schedule II

写在前面: 今天我们继续来看一道经典的图论问题,而这个问题可以说是跟我们一众学生的生活息息相关啊!我们每年都有很多需要完成的必修指标,每一个必修指标可能会有一个或多个先修要求,而我们需要决定是否能将这些课全…

kAFL部署、使用与原理分析

文章目录 前言1、概述1.1、工作原理1.2、工作流程1.2.1、部署kAFL1.2.2、准备工作1.2.2.1、准备主机代理内核1.2.2.2、准备待Fuzz目标1.2.2.3、配置待Fuzz目标1.2.2.4、配置kAFL组件 1.2.3、Fuzz测试1.2.3.1、获取配置信息1.2.3.2、准备工作目录1.2.3.3、复制种子文件1.2.3.4、…

大顶堆+动态规划+二分

前言&#xff1a;我们这一题需要分类讨论 对于我们左边和右边的我们需要预处理 有点类似反悔堆的做法&#xff0c;得出i之前取出 m 个元素代价最小&#xff0c;并且这个代价一定是递减的&#xff08;可以推导一下&#xff09; 题目地址 #include<bits/stdc.h> using name…

Docker 华为云镜像加速器配置

​​ 操作说明 1. 安装/升级容器引擎客户端 推荐安装1.11.2以上版本的容器引擎客户端 2. 加速器地址 访问华为云容器镜像服务&#xff1a;https://console.huaweicloud.com/swr/ 获取加速器地址 https://xxxxxxxxx.mirror.swr.myhuaweicloud.com3. 配置镜像加速器 针对…

c语言快递小项目

struct pack_head{ int fd;//通信的文件描述符 unsigned char type; //消息类型 unsigned char usertype; //用户类型&#xff1a;1&#xff1a;用户 2&#xff1a;快递员 char name[32]; //用户名 char paaswd[32]; //密码 char buf[32]; //调试…

抗金属RFID标签如何提升资产管理效率

在资产管理中&#xff0c;金属表面的设备和资产对传统RFID标签来说是一大挑战。为了解决这一问题&#xff0c;企业开始广泛采用抗金属RFID标签&#xff0c;以确保在金属环境下也能高效地进行资产跟踪与管理。 抗金属RFID标签的应用场景 抗金属RFID标签是一种专门设计用于金属…