读react.js小书 抽象公共组件类

首先在component的类中定义了一个按钮抽象出来的一个类

  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
    }
  }

这个mount函数中的wrapper就是我们在在html中写的div的类

在wrapper中添加删除操作后的dom节点

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

可以在构造函数中进行参数的传递在constructor中进行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)