通过点赞功能案例完成超简化版的React

点赞功能案例

首先完成一个点赞组件LikeButton,和一个 DOM 挂载函数 createDOMFromString

  const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
  }

  class LikeButton {
    constructor () {
      this.state = { isLiked: false }
    }

    changeLikeText () {
      const likeText = this.el.querySelector('.like-text')
      this.state.isLiked = !this.state.isLiked
      likeText.innerHTML = this.state.isLiked ? '取消' : '点赞'
    }

    render () {
      this.el = createDOMFromString(`
        <button class='like-button'>
          <span class='like-text'>点赞</span>
          <span>👍</span>
        </button>
      `)
      this.el.addEventListener('click', this.changeLikeText.bind(this), false)
      return this.el
    }
  }

如上代码，代码通过在 this.el 上监听 click 事件，通过 DOM 操作改变页面文字和组件状态。

当页面上需要维护的状态过多时，状态改变，需要写更多的 DOM 操作。

提出这样一种解决方案:一旦状态发生改变，就重新调用 render 方法，构建一个新的 DOM 元素。

于是代码可以改成这样:

class LikeButton {
    constructor () {
      this.state = { isLiked: false }
    }

    setState (state) {
      this.state = state
      this.el = this.render()
    }

    changeLikeText () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      this.el = createDOMFromString(`
        <button class='like-btn'>
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `)
      this.el.addEventListener('click', this.changeLikeText.bind(this), false)
      return this.el
    }
  }

可以看到添加了一个 setState 方法，该方法实现了状态改变，重新调用 render 的目的。

但该版本的问题在于更改了的 DOM 片段没有插入到页面中。

于是，修改代码，进行点赞操作时，删除页面中的旧的点赞代码，添加新的点赞代码。

class LikeButton {
    constructor () {
      this.state = { isLiked: false }
    }

    setState (state) {
      const oldEl = this.el
      this.state = state
      this.el = this.render()
      if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }

    changeLikeText () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      this.el = createDOMFromString(`
        <button class='like-btn'>
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `)
      this.el.addEventListener('click', this.changeLikeText.bind(this), false)
      return this.el
    }
  }

可以看到修改后的 setState 函数添加缓存修改前的 DOM 片段。在 this.onStateChange 函数中进行 DOM 删除添加操作。

该组件使用方法如下:

  const likeButton = new LikeButton()
  wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
  likeButton.onStateChange = (oldEl, newEl) => {
    wrapper.insertBefore(newEl, oldEl) // 插入新的元素
    wrapper.removeChild(oldEl) // 删除旧的元素
  }

仔细思考，可以看到，每次点赞点踩操作，都会从页面中删除和添加 DOM 片段。因而不停的引起页面重排，应用性能很低。

React中引入了 Virtual-Dom ,通过 diff 算法比较更新前后的 Virtual-Dom 树，将 Virtual-Dom 树上更新的部分更新到实际 DOM 中。

当有多个组件时，每个组件中都需要写一个 setState 函数。于是可以提出一个父类组件

  class Component {
    setState (state) {
      const oldEl = this.el
      this.state = state
      this._renderDOM()
      if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }

    _renderDOM () {
      this.el = createDOMFromString(this.render())
      if (this.onClick) {
        this.el.addEventListener('click', this.onClick.bind(this), false)
      }
      return this.el
    }
  }

该类中，有两个方法，一个是 setState；一个是私有方法 _renderDOM。_renderDOM 方法会调用 this.render 来构建 DOM 元素并且监听 onClick 事件。所以，组件子类继承的时候只需要实现一个返回 HTML 字符串的 render 方法就可以

于是点赞组件可更新为

  class LikeButton extends Component {
    constructor () {
      super()
      this.state = { isLiked: false }
    }

    onClick () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      return `
        <button class='like-btn'>
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `
    }
  }

将上面渲染出的 DOM 判断，插入页面

  const mount = (component, wrapper) => {
    wrapper.appendChild(component._renderDOM())
    component.onStateChange = (oldEl, newEl) => {
      wrapper.insertBefore(newEl, oldEl)
      wrapper.removeChild(oldEl)
    }
  }

调用方式如下

 mount(new LikeButton(), wrapper)

实际开发中，可能需要给组件传入一些自定义的配置数据。例如说想配置一下点赞按钮的背景颜色，如果传入一个参数设置颜色。那么这个按钮的定制性就更强了。所以可以给组件类和它的子类都传入一个参数 props，作为组件的配置参数。修改 Component 的构造函数为

  constructor (props = {}) {
    this.props = props
  }

于是点赞组件代码可更新为

  class LikeButton extends Component {
    constructor (props) {
      super(props)
      this.state = { isLiked: false }
    }

    onClick () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      return `
        <button class='like-btn' style="background-color: ${this.props.bgColor}">
          <span class='like-text'>
            ${this.state.isLiked ? '取消' : '点赞'}
          </span>
          <span>👍</span>
        </button>
      `
    }
  }

  mount(new LikeButton({ bgColor: 'red' }), wrapper)

由此，就完成了一个超简化版的React.js

本文总结摘抄自:React.js 小书