react 源码解读(深入详解大佬用33行代码实现了React)

react 源码解读(深入详解大佬用33行代码实现了React)(1)

作者: 李松峰

转发连接:https://mp.weixin.qq.com/s/dIG7QxHyP-EKWH0Fq98dGQ

前言

一位伦敦的Python工程师Oliver Russell最近做了一个好玩的尝试,用33行代码“实现了”React。

他实现的“React”主要涉及如下抽象:

  • 我们传一个取得状态并返回虚拟DOM的函数
  • “React”在浏览器中将虚拟DOM渲染为真实DOM
  • 状态改变,“React”再次运行函数并返回新虚拟DOM
  • “React”高效更新真实DOM,以匹配新虚拟DOM

由此可见,这个实现的功能还十分有限。只涉及虚拟DOM生成、差异比较和真实DOM渲染。

全部实现代码如下图所示。

react 源码解读(深入详解大佬用33行代码实现了React)(2)

  • 无注释版:https://github.com/leontrolski/leontrolski.github.io/blob/master/33-line-react.js
  • 有注释版:https://github.com/leontrolski/leontrolski.github.io/blob/master/33-line-react-with-comments.js

这个实现参考了Mithril(https://mithril.js.org/)的语法。对外主要暴露了两个函数:

  • m():Mithril风格的hyperscript辅助函数,用于创建虚拟DOM
  • m.render():DOM挂载与渲染逻辑

其中m()接收如下参数:

  • 标签名(如 'tr')及 .分隔的类名
  • (可选的){string: any}对象,包含添加给DOM节点的所有属性
  • 任意嵌套的子节点,可以是其他虚拟DOM或字符串

返回虚拟DOM对象,比如:

{ tag:'div', attrs:{}, classes:[], children:[ { tag:'h3', attrs:{}, classes:[], children:[ 'current player:x' ] }, { tag:'table', attrs:{}, classes:[], children:[ { tag:'tr', attrs:{}, classes:[], children:[ ...

虽然在很多人眼里这还是一个“玩具”,但用Oliver Russell的话说:“(对于一般的单面应用)用这33行代码替换React也不会有人看得出来。”为此,他还基于这个“React”写了几个例子。

Noughts and Crosses

react 源码解读(深入详解大佬用33行代码实现了React)(3)

  • https://leontrolski.github.io/33-line-react.html

Calendar Picker

react 源码解读(深入详解大佬用33行代码实现了React)(4)

  • https://leontrolski.github.io/33-line-react-calendar.html

Snake

react 源码解读(深入详解大佬用33行代码实现了React)(5)

  • https://leontrolski.github.io/33-line-react-snake.html

笔者也基于这个“React”写了一个非常简单的ToDo:

classtoDoDemo{ constructor(){ this.todos=[] this.render=()=>m.render( document.getElementById('example'), {children:[this.showToDos()]}, ) this.render() } showToDos(){ returnm('div',[ m('h3','ToDo示例'), m('input',{placeholder:'添加todo'}), m('button', { onclick:(e)=>this.addTodo(e) }, ' ' ), m('ul', this.todos.map((item,i)=>m('li',[ m('span',item), m('button', { onclick:()=>this.removeTodo(i) }, '-' ) ]))) ]) } removeTodo(i){ this.todos.splice(i,1) this.render() } addTodo(e){ constinput=e.target.previousSibling consttodo=input.value if(!todo.trim())return input.value='' this.todos.push(todo) this.render() } } newtoDoDemo()

  • https://code.h5jun.com/zelix/

有兴趣的的读者不妨花点时间研究一下这个“33-line-react”,包括上面的几个示例。

推荐React 学习相关文章

《让你的 React 组件性能跑得再快一点「实践」》

《React源码分析与实现(三):实践 DOM Diff》

《React源码分析与实现(一):组件的初始化与渲染「实践篇」》

《React源码分析与实现(二):状态、属性更新->setState「实践篇」》

《细说React 核心设计中的闪光点》

《手把手教你10个案例理解React hooks的渲染逻辑「实践」》

《React-Redux 100行代码简易版探究原理》

《手把手深入教你5个技巧编写更好的React代码【实践】》

《React 函数式组件性能优化知识点指南汇总》

《13个精选的React JS框架》

《深入浅出画图讲解React Diff原理【实践】》

《【React深入】React事件机制》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手深入Redux react-redux中间件设计及原理(上)【实践】》

《手把手深入Redux react-redux中间件设计及原理(下)【实践】》

《前端框架用vue还是react?清晰对比两者差异》

《为了学好 React Hooks, 我解析了 Vue Composition API》

《【React 高级进阶】探索 store 设计、从零实现 react-redux》

《写React Hooks前必读》

《深入浅出掌握React 与 React Native这两个框架》

《可靠React组件设计的7个准则之SRP》

《React Router v6 新特性及迁移指南》

《用React Hooks做一个搜索栏》

《你需要的 React TypeScript 50 条规范和经验》

《手把手教你绕开React useEffect的陷阱》

《浅析 React / Vue 跨端渲染原理与实现》

《React 开发必须知道的 34 个技巧【近1W字】》

《三张图详细解说React组件的生命周期》

《手把手教你深入浅出实现Vue3 & React Hooks新UI Modal弹窗》

《手把手教你搭建一个React TS 项目模板》

《全平台(Vue/React/微信小程序)任意角度旋图片裁剪组件》

《40行代码把Vue3的响应式集成进React做状态管理》

《手把手教你深入浅出React 迷惑的问题点【完整版】》

作者: 李松峰

转发连接:https://mp.weixin.qq.com/s/dIG7QxHyP-EKWH0Fq98dGQ

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页