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

ops/2024/9/20 1:29:08/ 标签: spring cloud, spring boot, spring, 技术, css3

本系列源码学习,是基于 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.ppmy.cn/ops/110926.html

相关文章

第三章 转折25 实习生当主角

团队的2个实习同学,基本都入职有3个月了,都成了团队不可或缺的一份子。 首先,我并没有区别对待实习同学,我觉得6个月的实习期很长,可以做很多事情,有更多资源帮我、帮助公司是非常难得的,另外&…

Reactive 编程-Project Reactor

Reactive 编程与 Project Reactor Reactive 编程是一种编程范式,主要用于处理异步数据流。它旨在通过声明式的编程方式处理事件驱动的非阻塞任务,特别适合于构建响应式、可扩展、高并发的应用。随着互联网应用规模的扩大和响应速度的提升需求&#xff0…

Leetcode面试经典150题-79.搜索单词

题目比较简单,回溯最基础的题,记得除非覆盖,否则一定要恢复现场就行 解法都在代码里,不懂就留言或者私信 class Solution {public boolean exist(char[][] board, String word) {int m board.length; int n board[0].length;i…

JS 扩展运算符有哪些使用场景?

你好,我是沐爸,欢迎点赞、收藏、评论和关注。 扩展运算符有哪些使用场景?直接进入正题 一、复制数组 const a1 [1, 2];// 写法一 const a2 [...a1]; // 写法二 const [...a2] a1;二、合并数组 const part1 [1, 2, 3]; const part2 …

Python 数学建模——ARMA 时间序列分析

文章目录 前言使用前提平稳性检验白噪声检验 用法代码实例第一步——平稳性分析方法一方法二方法三 第二步——白噪声分析第三步——确定参数第四步——模型构建与检验检验模型效果预测未来数据 前言 常见的时间序列分析方法有很多,之前介绍了一个稍微新颖的 Prophe…

HarmonyOS开发者基础认证试题

文章目录 一、HarmonyOS介绍二、DevEco Studio的使用三、ArkTS语法介绍四、应用程序框架基础五、从简单的页面开始六、构建更加丰富的页面七、从网络获取数据八、保存应用数据 一、HarmonyOS介绍 判断题: 1.“一次开发,多端部署”指的是一个工程&#x…

【GBase 8c V5_3.0.0 分布式部署(单机安装)】

GBase 8c数据库分布式形态采用share nothing的分布式架构,计算节点和存储节点分离。节点间通过高速网络进行通信,所有节点都有主从互备,确保系统的极致高可用。 本文主要包含GBase 8c V5_3.0.0 分布式部署(单机安装)的简单流程,供…

AI创意引擎:优化Prompt提示词的高效提问技巧

AI内容创作的精髓:提示词(Prompt) 在AI领域中,提示词(Prompt)是与模型沟通的关键工具。提示词不仅决定了AI生成内容的方向和质量,还在优化模型输出、提升用户体验中扮演着至关重要的角色。因此…

【pgAdmin4】使用psql命令行执行查询时,使用占位符(:v1)传入参数

目录 0.环境 1.相关知识点 2.举例 3.详细操作 0.环境 windows11 pgAdmin4 8.10 1.相关知识点 占位符如何理解? SQL语句中的占位符是一种用于代表参数的特殊符号,通常以"?"或":"开头。它们被用来构建可重用的SQL语句&#xff0…

Grafana 汉化

点击 Home -> Administration 点击 Default preferences 点击 中文(简体)后点击 Save 即可

遥感技术在生态系统碳储量、碳收支、碳排放、碳循环以及人为源排放反演等领域的技术发展,实践角度解决遥感技术在生态、能源、大气等领域的碳排放监测及模拟问题

卫星遥感具有客观、连续、稳定、大范围、重复观测的优点,已成为监测全球碳盘查不可或缺的技术手段,卫星遥感也正在成为新一代 、国际认可的全球碳核查方法。本教程的目的就是梳理碳中和与碳达峰对卫星遥感的现实需求,系统总结遥感技术在生态系…

唯徳知识产权管理系统 DownloadFileWordTemplate 文件读取漏洞复现

0x01 产品简介 唯徳知识产权管理系统,由深圳市唯德科创信息有限公司精心打造,旨在为企业及代理机构提供全方位、高效、安全的知识产权管理解决方案。该系统集成了专利、商标、版权等知识产权的全面管理功能,并通过云平台实现远程在线办公,提升工作效率。是一款集知识产权申…

Radware Alteon 负载均衡-基于URL Filetype的七层负载均衡

作者:Xiaolei Ren Radware Alteon作为一款高性能的负载均衡器,其基于URL Filetype的七层负载均衡功能为众多企业提供了灵活、高效的解决方案。 该案例实现如下需求:当客户端访问服务器时,默认访问10.200.1.100,在ht…

快手自研Spark向量化引擎正式发布,性能提升200%

Blaze 是快手自研的基于Rust语言和DataFusion框架开发的Spark向量化执行引擎,旨在通过本机矢量化执行技术来加速Spark SQL的查询处理。Blaze在快手内部上线的数仓生产作业也观测到了平均30%的算力提升,实现了较大的降本增效。本文将深入剖析blaze的技术原…

Anaconda 安装与使用教程

Anaconda 安装与使用教程 介绍 Anaconda 是一个用于科学计算的 Python 和 R 的发行版,它包含了众多流行的科学计算、数据分析、机器学习等领域的库。本教程旨在帮助初学者快速上手 Anaconda,并学会如何使用其管理环境以及安装包。 第一步:…

Linux下的gcc与gdb

目录 Linux下的gcc与gdb 代码编译与链接 函数库 gdb介绍和安装 gdb基本使用指令 示例代码 debug模式和release模式 基本指令 进入gdb调试与显示调试代码 创建断点与删除断点 启用和禁用断点 执行代码 逐语句和逐过程调试 断点跳转 显示指定变量以及对应内容 打印变量的值 执行到…

代码随想录算法day30 | 动态规划算法part03 | 01背包问题 二维 ,01背包问题 一维,416. 分割等和子集

正式开始背包问题,背包问题还是挺难的,虽然大家可能看了很多背包问题模板代码,感觉挺简单,但基本理解的都不够深入。 背包问题,力扣上没有原题,题目是在卡码网找的 动态规划:01背包理论基础 本…

简单易懂的方式来解释机器学习(ML)和深度学习(DL)的区别与联系

让我们从多个角度出发,用一些简单易懂的方式来解释机器学习(ML)和深度学习(DL)的区别与联系。 1. 概念上的区别 机器学习 想象一下你在教一个小孩子如何分辨猫和狗。你可能会给这个孩子看很多猫和狗的照片&#xff…

Unity-Time类

目录 Time.timeScale Time.deltaTime Time.unscaledDeltaTime Time.time Time.frameCount Time.fixedDeltaTime Time.timeScale 时间缩放比例 时间停止 Time.timeScale 0; //回复正常 //Time.timeScale 1; //2倍速 …

VSCode 离线安装中文语言包

1.插件市场 Extensions for Visual Studio family of products | Visual Studio Marketplace 输入: language 在version history里面下载相应的版本,若没有就下载最新的 在下面安装 安装完重启就可以了。 可能会提示的失败: Unable to ins…