React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类

前端之家收集整理的这篇文章主要介绍了React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类

本文作者:胡子大哈
本文原文:http://huziketang.com/books/react/lesson4

转载请注明出处,保留原文链接以及作者信息

在线阅读:http://huziketang.com/books/react


为了让代码更灵活,可以写更多的组件,我们把这种模式抽象出来,放到一个 @H_403_16@Component 类当中:

class Component {
    setState (state) {
      const oldEl = this.el
      this.state = state
      this.el = 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
    }
  }

这个是一个组件父类 @H_403_16@Component,所有的组件都可以继承这个父类来构建。它定义的两个方法,一个是我们已经很熟悉的 @H_403_16@setState;一个是私有方法 @H_403_16@_renderDOM。@H_403_16@_renderDOM 方法调用 @H_403_16@this.render 来构建 DOM 元素并且监听 @H_403_16@onClick 事件。所以,组件子类继承的时候只需要实现一个返回 HTML 字符串的 @H_403_16@render 方法就可以了。

还有一个额外的 @H_403_16@mount 的方法,其实就是把组件的 DOM 元素插入页面,并且在 @H_403_16@setState 的时候更新页面

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

这样的话我们重新写点赞组件就会变成:

class LikeButton extends Component {
    constructor () {
      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>

猜你在找的React相关文章