其他分享
首页 > 其他分享> > 围观“33行代码的React”

围观“33行代码的React”

作者:互联网

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

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

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

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

图片

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

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

返回虚拟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”,包括上面的几个示例。


标签:github,render,leontrolski,33,DOM,React,围观
来源: https://blog.51cto.com/u_15127660/2784251