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

React源码解读之React Fiber 该文章涉及的源码部分基于React v17.0.2该文章涉及的源码部分基于React v17.0.2。 阅读详情

为什么要选择React16

  • 现在React18都早已实践很多,为何回过头来看16版本的代码
  • 理由如下
    • 从实际出发,企业内老旧项目多为16版本,理解16的核心能够帮助我们快速解决问题
    • 16版本React是完全重写了核心代码, 是一次重大的更新
      • 引入了 fiber 这个概念,从根本上解决了JS单线程运行问题
      • 引入了hooks,摆脱了 class component 的一些繁琐的内容
      • 引入了ConcurrentMode, 优化渲染过程, 提供渲染中断能力
      • 引入了Suspense, 用于加载的缓冲的内置组件
      • 引入了Memo, 用于给functional component提供pure component的功能
      • 引入了Fiber架构, 是一种数据结构,方便逐步地、增量地完成渲染任务
      • …

关于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/packages
├── event                    # 事件 
├── react                    # 核心api
├── react-dom                # dom 核心api
├── 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 )其他

  • 不是说其他的源码内容不重要,先主要关注这几大模块核心的逻辑
政务帮办新范式:基于检索增强与多智能体协同的智能系统实践 本文提出了一种多智能体协同的智能政务系统架构,突破传统方案在状态管理、职责过载和感知闭环方面的局限。系统由中央规划智能体、对话引导智能体、参数提取智能体和执行状态分析智能体组成,通过职责分离与显式状态管理实现高效协同。核心创新在于中央决策引擎的确定性逻辑,采用基于规则的状态机设计,确保系统可靠可控。该架构支持自然语言交互、参数自动提取、业务系统操作和视觉闭环验证,能够真正实现"帮办"功能,显著提升政务服务的智能化水平。 阅读详情

相关推荐

从宏观到街道:如何利用七普数据为WorldPop人口栅格做“本地化”校准?

本文探讨了如何利用第七次全国人口普查(七普)数据对WorldPop人口栅格进行本地化校准,以提高街道级别的人口分布精度。通过分析数据偏差、选择适当的技术路线和工具(如Arcgis和栅格计算器),文章详细介绍了从宏观到街道的校准实践,帮助规划公共卫生资源和优化城市基础设施。

janckywong963的专栏 513

React源码之深入React Fiber

开始之前,先讲一下该文章能帮你解决哪些问题? facebook为什么要使用重构React React Fiber是什么 React Fiber的核心算法 - react是如何中断重启任务的 react fiber部分源码简化版 前言 该文章涉及的源码部分基于React v17.0.2 why React Fiber 浏览器渲染过程 从浏览器的运行机制谈起。大家都知道,浏览器是多进程多线程的,多进程包括主进程,渲染进程,插件进程,GPU进程等,作为前端开发者,我们主要关注其中的渲染进程,这里是页面渲染

weixin_43970698的博客 357

基于Android Studio的校园智能点餐系统开发实战(附完整源码与部署指南)

本文详细介绍了基于Android Studio开发校园智能点餐系统的完整流程,包括需求分析、环境搭建、数据库设计、客户端与后台功能实现。系统采用SSM框架和MySQL数据库,解决了校园食堂高峰期排队问题,提供高效的点餐体验。附完整源码与部署指南,助力开发者快速构建类似应用。

weixin_29015801的博客 560

React Hooks 源码学习

React Hooks 添加于 React 16.8,用于 React 中函数组件的一类特殊函数,它们允许你在不编写类组件而是使用简单的函数组件(Function Component,以下称FC)的情况下依然享受到状态、上下文、副作用等 React 特性。自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。// 下面自定义了一个获取窗口长宽值的hooks}...

发果叁 594

深度学习Halcon中GPU显存利用率高,但GPU、CPU利用率较低,导致模型训练速度很慢,通过设置硬件参数的解决方法

深度学习Halcon中GPU显存利用率高,但GPU、CPU利用率较低,导致模型训练速度很慢,通过设置硬件参数的解决方法 前言 在训练自己模型的时候,会遇到GPU显存利用率高,但GPU、CPU利用率较低,导致模型训练速度很慢的问题。这个问题一方面是由于硬件没有设置到最佳工作状态,另一方面是代码中参数没有设置好。最近在跑Halcon DL遇到这个问题,而Halcon不像开源的几个框架那样自由,代码封装的比较多。所以遇到这种问题,只能在参数最优的情况下,通过设置硬件参数来提升性能。 当然,在跑DL之前,无论什么框

ZiLiangQin的博客 9917

逆向攻防世界CTF系列40-ReverseMe-120

注意sub_401000main中只传了两个参数,但是跟进后发现四个(可能是隐式传递,放在寄存器里传递了),调试发现a4是输入长度,与最终的you_know_how_to_remove_junk_code比较的是v12(但是并没有被传入),开始怀疑是不是隐式传递了。_mm_xor_si128用于计算128位(16字节)的按位异或,然后通过v14控制循环结束的条件,可以看到v14增长的步长为16,而且通过上面得到的flag值解码得到的字符串为32个字节大小,正好是16的整数倍。

LH1013886337的博客 1411

React源码解读之ReactFiber

该文章涉及的源码部分基于React v17.0.2。

weixin_59558923的博客 454

小龙虾 OpenClaw 权限全攻略:轻松激活 elevated (最新版 OpenClaw 自动化任务降智、无权限、无法执行sudo等系统命令、提升 elevated 权限的解决方案)

升级小龙虾 OpenClaw 后权限不足?elevated 报错?📛 本文教你如何正确配置 OpenClaw 权限💻,让自动化任务顺利执行 🚀

XiaoqiangClub的博客 733

react classname多个_React 入门

共计 10137 字,阅读时长约 25 分钟谁都没有看见过风,更不用说你和我了。但是当纸币在飘的时候,我们知道那是风在数钱。React 影响着我们工作的方方面面,我们每天都在使用它,只窥其表却难以窥其里。正所谓看不如写,本篇文章的目的就是从原理层面探究 React 是如何工作的。工具—在写文章之前,为了方便理解,我准备了一个懒人调试仓库 simple_react[1] ,这个仓库将 be...

weixin_39945445的博客 772

华为OD机考双机位C卷 - 最左侧冗余覆盖子串 (Java)

华为OD机考双机位C卷 - 最左侧冗余覆盖子串 (Java), 提供Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解,以及在线OJ模拟做题。

算法大师! 59

海思3516DV300智能算法实现

海思3516DV300智能算法实现

xiaoning132的专栏 937

从原理层面探究 React 是如何工作的

共计 10137 字,阅读时长约 25 分钟谁都没有看见过风,更不用说你和我了。但是当纸币在飘的时候,我们知道那是风在数钱。React 影响着我们工作的方方面面,我们每天都在使用它,只窥...

frontend_frank的博客 388

2023全国职业技能大赛 网络系统管理 服务部署 Linux部分--基础配置

服务器和客户端基本配置如下表,各虚拟机已预装系统。一、关闭防火墙和Selinux。七、需要使用到的命令详解。三、修改root密码。

weixin_62926639的博客 1002

react实现div隐藏_React源码解析(上)

资源1. React中文网:https://react.docschina.org2. React源码:https://github.com/facebook/react3. Debug React: https://github.com/bubucuo/DebugReact4. 源码指引:https://www.processon.com/view/link/5dd68342e4b00...

weixin_35899659的博客 144

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

react classname多个_React 是如何工作的

共计 10137 字,阅读时长约 25 分钟谁都没有看见过风,更不用说你和我了。但是当纸币在飘的时候,我们知道那是风在数钱。React 影响着我们工作的方方面面,我们每天都在使用它,只窥其表却难以窥其里。正所谓看不如写,本篇文章的目的就是从原理层面探究 React 是如何工作的。工具—在写文章之前,为了方便理解,我准备了一个懒人调试仓库 simple_react[1] ,这个仓库将 be...

weixin_39624389的博客 125

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

react render没更新_React源码解析(上)

资源1. React中文网:https://react.docschina.org2. React源码:https://github.com/facebook/react3. Debug React: https://github.com/bubucuo/DebugReact4. 源码指引:https://www.processon.com/view/link/5dd68342e4b00...

weixin_39706127的博客 121

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

《React Native 精解与实战》书籍连载「React 与 React Native 简介」

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。 书籍还配套了视频教程「80 节实战课精通...

DevOpenClub 专栏 529

react 合并数组_React 入门儿

作者: 凹凸曼-风魔小次郎 谁都没有看见过风,更不用说你和我了。但是当纸币在飘的时候,我们知道那是风在数钱。 React 影响着我们工作的方方面面,我们每天都在使用它,只窥其表却难以窥其里。正所谓看不如写,本篇文章的目的就是从原理层面探究 React 是如何工作的。 工具 在写文章之前,为了方便理解,我准备了一个懒人调试仓库 simple_react ,这个仓库将 benchmark 用例(只...

weixin_31435039的博客 1350

json react 展示工具_从原理层面探究 React 是如何工作的

共计 10137 字,阅读时长约 25 分钟谁都没有看见过风,更不用说你和我了。但是当纸币在飘的时候,我们知道那是风在数钱。React 影响着我们工作的方方面面,我们每天都在使用它,只窥其表却难以窥其里。正所谓看不如写,本篇文章的目的就是从原理层面探究 React 是如何工作的。工具—在写文章之前,为了方便理解,我准备了一个懒人调试仓库 simple_react[1] ,这个仓库将 be...

weixin_28785757的博客 178
上一篇: Go语言中支持的internal目录配置与组织内私网包配置详解
下一篇: React16源码: JSX2JS及React.createElement源码实现
Wang's Blog
博客等级 码龄12年 7433粉丝 2421原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值