一位伦敦的 Python 工程师 Oliver Russell 最近做了一个好玩的尝试，用 33 行代码 “实现了”React。
他实现的 “React” 主要涉及如下抽象：
- 我们传一个取得状态并返回虚拟 DOM 的函数
- “React” 在浏览器中将虚拟 DOM 渲染为真实 DOM
- 状态改变，“React” 再次运行函数并返回新虚拟 DOM
- “React” 高效更新真实 DOM，以匹配新虚拟 DOM
由此可见，这个实现的功能还十分有限。只涉及虚拟 DOM 生成、差异比较和真实 DOM 渲染。
全部实现代码如下图所示。
这个实现参考了 Mithril（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
Calendar Picker
Snake
笔者也基于这个 “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()
有兴趣的的读者不妨花点时间研究一下这个 “33-line-react”，包括上面的几个示例。
