Luy 1.0 :一个React-like轮子的诞生
前言
在过去的一个多月中,为了能够更深入的学习,使用React,了解React内部算法,数据结构,我自己,从零开始写了一个玩具框架。
截止今日,终于可以发布第一个版本,因为就在昨天,我跑通了之前的一个小项目。
- 预览地址:动态简历luy版本
- 仓库地址:喜欢的给点星星哦~
- 框架地址:Luy
真的从零开始吗?
其实并不是,我并没有重新把jsx解析器进行造轮子,我用上了官方的解析器去帮助我解析jsx。
在正式开始写Luy的时候,还是比较盲目和恐惧的,原因如下
- 虽然都知道React是基于虚拟DOM来渲染的,但是虚拟DOM到底是什么?怎么运作的
React的setState是异步的,这个我们都知道。但是他的异步和setTimeOut的异步是一样的吗?内部是不是用setTimeOut
实现的? - react的事件合成系统。在react官方中,几万行代码,有差不多40%左右是用于模拟事件的。这部分内容是如何实现的?为什么这么做呢?
- React列表中的key为什么那么重要?虚拟DOM的优化策略又是什么?
带着这些疑问,我要么是去读源码,要么去找文章,但是真正弄懂这些知识,可能还得动手自己实践一次我才会感到安心。
制造这个玩具框架碰到了很多问题吗?
虽然说现在React-like的框架一大堆,大家都想做出自己的mini 化方案,但是制造一个React-like框架还是超级困难的,可想而知,当初FB工程师们在没有React的情况下,是如何造出React的,天才。
源码解析不多,而且不完备:很多号称解析React源码的文章其实只是非常浅层次的读一读,基本上的套路就是,看到哪里的代码,网上一帖就成了一篇文章了,很多知识点还是得亲自去打断电调试React官方版本才能知道。
好的文章往往只专研了一两个点,知识点需要慢慢拼凑:网上不乏好文章的,但是好的文章不可能面面俱到。比如有些人研究setState
,有些人研究生命周期函数,有些人还研究了ref,甚至有些人研究了Vdom。这些知识点很散乱,非常难以拼凑在一起,基本要花一两天才能搞懂一个知识点。
虚拟dom算法
:我说实话,虚拟DOM的算法其实并不难,也就是树的递归遍历,在遍历的同时创建和比对。但是奇妙的就是,市面上有一堆虚拟DOM产品,虽然大致相同,但是在处理某些地方的时候不一样,后文会讲。列表的key
:虚拟DOM算法最难的地方。对应的实际场景就是如下:
<ReactComponent><div key='1'></div><div key='2'></div><div key='3'></div><div key='4'></div><div key='5'></div><div key='6'></div>....
</ReactComponent>
这一个部分难就难在「更新」上,这也是每一款虚拟DOM最不一样的地方。
为什么inferno.js这么快?这个回答里,其实给出了答案。
而Luy
使用的算法是:vue2源码学习开胃菜,速度上来说非常不错。
当然我不是吹嘘自己的框架有多牛逼,只是实现了这个算法还是非常开心的。
这部分内容给想学习React源码的朋友们
首先,阅读React代码是最直接的方案,但是因为react源码实在太多了,我们必须另寻出路。有两个办法
- 阅读react代码最初版本(非常的老了...
- 阅读市面上比较成熟的react-mini框架的代码
我选择了第二种方式,可能会有人说哎呀,你水平不够。我承认,我水平确实不行,读react源码头有点痛。
我的方法就是先把东西做出来,然后有了基本思路,再看React源码你就知道它在干什么了。一定要注意的是:框架里任何一行代码都是为了解决某一个或者多个问题而存在的,当你脑海中不能将这些问题和代码联系在一起的时候,你他吗根本就是在读天书。所以,选择一个代码较少的先读着,理解react的套路。
- @司徒正美 的anujs:一款了不起的mini 化react方案,支持到IE6。代码及其好懂和老练,框架如其签名:javascript魔法师。如果阅读过anujs的朋友,一定也会发现Luy部分代码很像anujs,没错,有很多代码我都直接抄的,因为 @司徒正美 的代码写的真的很好。RubyLouvre/anu,是世界上最接近react官方的产品了。
- Inferno.js:另外一款出名的react lite框架,Vdom的速度是最高的,一系列的优化方案非常值得学习
- developit/preact:大名鼎鼎的preact,速度快,体积小而著称。gzip完只有3k,不过对react官方的支持其实非常的差。比较搞笑的是,当你支持react的轮子的时候,使用compact功能时,其性能大大下降!(哈哈哈哈哈哈哈哈哈笑死我了)
- @胡子大哈 :他写的React.js 小书,非常的棒,给予了我造react的最基本知识。
- 40 行代码内实现一个 React.js: @胡子大哈 实现的作品
- snabbdom/snabbdom:其实就是vue的vdom了
- preact源码学习(1) - 个人文章 - SegmentFault
- preact源码学习(2) - 个人文章 - SegmentFault
- preact源码学习(3) - 个人文章 - SegmentFault
- preact源码学习(4) - 个人文章 - SegmentFault:这几片文章的作者都是 @司徒正美 ,全面的解析和官方的对比。牛x到了极点。
- Build your own React.js · GitBook:一篇外国的文章,看完你基本可以造出一个可以setState的react了
- Build Your Own React:第一次渲染:本文也很重要,介绍了react component的几种模式
- @程墨Morgan :《深入浅出react和redux》一书非常的实在,我也推荐过很多次了,对我理解react和redux很有帮助.
当然,还有很多知识点是通过google得到的,一切来之不易。在读源码的过程中,痛苦但是快乐。
这个框架会有未来吗?
这个项目其实最初的想法只是学习react的内部原理,但是一路走来我的想法也改变了,会尽自己最大的所能,维护下去,并且跟进react官方的变化(说实话createPortal Luy也是支持的!)
毕竟,学习其实就是模仿,创造永远在模仿的前提下。最近公司准备上一个新的小项目,也是我第一个全权负责的项目,所以我决定上一把我的Luy进行试点(好就好在,Luy更换react其实是无痛的,实在有什么问题,直接换react上,哈哈哈
最后
代码在这里,框架地址:Luy,总共加起来目前只有1100+行,不多,可以作为「react套路学习版本」
Luy 1.0 :一个React-like轮子的诞生相关推荐
- 构建一个react项目_您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
- react项目_保证一看就会 | 手把手教你创建一个React项目
一.如何使用 git 在 GitHub 上创建一个项目 新建一个项目 首先,在github上注册自己的账号,然后登录后,可以看到如下界面,是你的主页.点击右边的➕号,选择第一个选项 填写项目信息 此时 ...
- .NET Core 3.0 一个 jwt 的轻量角色/用户、单个API控制的授权认证库
作者:痴者工良(朋友合作原创) 来源: https://www.cnblogs.com/whuanle/p/11743406.html 目录 说明 一.定义角色.API.用户 二.添加自定义事件 三. ...
- 怎么安装aptdaemon模块_自己开发一个React Native 模块
大纲 为什么需要 React Native Module 如何创建一个 React Native的模块 编写 Android Toast 功能模块 如何调试 React Native 模块------ ...
- 我如何为我的第一个自由客户构建第一个React Native应用程序
by Charlie Jeppsson 查理·杰普森(Charlie Jeppsson) 我如何为我的第一个自由客户构建第一个React Native应用程序 (How I built my firs ...
- 如何搭建一个react项目?
使用react很长时间,写个搭建项目的文档,用于新项目的快速启动. 本项目使用的技术栈: create-react-app react-router ant-design react-redux 一. ...
- 如何创建一个 react 项目及如何运行?
如何创建一个 react 项目及如何运行? 一.安装 create-react-app 二.检测 create-react-app 是否安装成功 三.创建 react 项目 四.运行 react 项目 ...
- React-从0到1搭建一个React项目(一)
文章目录 架构介绍 第三方组件库 项目准备 环境准备 使用create-react-app初始化项目 创建项目目录结构 安装第三方库 利用工作之余的时间学习了react,今年一回来,部门要在公众号上面 ...
- React教程之使用create-react-app构建你的第一个react应用
What's React? React 是 facebook 開發的一個 JS 函式庫,負責產生與管理前端的 UI .它並不算框架. Why React? 用純 JS 在前端產生 HTML (一般來說 ...
最新文章
- 【java】File的使用:将字符串写出到本地文件,大小0kb的原因
- 如何做EL表达式能调用的函数-小例子(转)
- python 断点调试 pdb
- linux mkfs.ext3 参数,linux命令mkfs.ext3用法[阮胜昌]
- h5页面长按保存图片
- html选项卡_适用于Mac的最佳HTML文本编辑器,编码开发必备
- 开发人员指南 Googlemap API教程
- Ext.Ajax.request
- vs2010 学习Silverlight学习笔记(18):JavaScript
- Linux查看so库访问的IP,linux-ip命令杂记
- GNU make manual 翻译(三)
- RangeError: Maximum call stack size exceeded
- Typora下载地址
- SecureCRT Win免安装版本,简单好用
- 1754. 骑士精神
- 【论文阅读】DNS隧道攻击检测算法整合
- 软件项目管理(第二版 宁涛)问答题(个人背诵)
- 如何打造有特色的在线教育培训平台
- 我实测了国内外GPT,问了10个问题,差点把电脑砸了...
- 7-7 字符串中的大写字母改成小写字母 (10 分)
热门文章
- boost::callable_traits的remove_varargs_t的测试程序
- VTK:结构化网格之VisualizeStructuredGrid
- VTK:图片之PickPixel2
- OpenCV训练面部界标探测器face_landmark_trainer
- C++加号运算符重载
- c++类与类之间关系
- c语言 动态内存相关函数
- C++11右值引用和移动构造函数
- dvi黑屏解决方法_赛博朋克2077黑梦黑屏怎么办 黑梦BUG全黑模式解决方法
- 1.Slf4j使用log4j的配置参数、配置sl4j/log4j输出到不同的文件、案例