围观“33行代码的React”

╰+哭是因爲堅強的太久メ 2023-05-21 10:24 12阅读 0赞

编者按：本文作者李松峰，资深技术图书译者，翻译出版过40余部技术及交互设计专著，现任360奇舞团Web前端开发资深专家，360前端技术委员会委员、W3C AC代表。

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

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

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

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

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

![format_png][]

*  无注释版：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**

![format_png 1][]

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

**Calendar Picker**

![format_png 2][]

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

**Snake**

![format_png 3][]

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

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

>     class toDoDemo {
>       constructor() {
>         this.todos = []
>         this.render = () => m.render(
>           document.getElementById('example'),
>           {children: [this.showToDos()]},
>         )
>         this.render()
>       }
>       showToDos() {
>         return m('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) {
>         const input = e.target.previousSibling
>         const todo = input.value
>         if(!todo.trim()) return
>         input.value = ''
>         this.todos.push(todo)
>         this.render()
>       }
>     }
>     new toDoDemo()

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

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

#### 参考链接： ####

*  https://leontrolski.github.io/33-line-react.html
 *  https://news.ycombinator.com/item?id=22776753

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 4][]

[format_png]: /images/20230521/4dc9390aadde4c8f8d484982503e5b63.png
[format_png 1]: /images/20230521/e268b18296324fe5892298a756e441df.png
[format_png 2]: /images/20230521/f27e32c29a2f4dc6ba8391c86b91a007.png
[format_png 3]: /images/20230521/d6271ff9c90a4f36b5a8d9063dcafc28.png
[format_png 4]: /images/20230521/9e74d171b25b48bb8fd7b9e7df399046.png