围观 “33 行代码的 React”

时间:2021-2-20 作者:admin

一位伦敦的 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”,包括上面的几个示例。

参考链接:

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。