React.js 小书阅读笔记2

仅供个人学习！
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/blog/lesson4

抽象出公共组件类

为了让代码更灵活，可以写更多的组件，我们把这种模式抽象出来，放到一个 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
    }
  }

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

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

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

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

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

...
    constructor (props = {}) {//super会调用该类的构造函数 进行传递props值
      this.props = props
    }
...

继承的时候通过 super(props) 把 props 传给父类，这样就可以通过 this.props 获取到配置参数：

补充： 1)super（参数）：调用基类中的某一个构造函数（应该为构造函数中的第一条语句）

这里我们稍微修改了一下原有的 LikeButton 的 render 方法，让它可以根据传入的参数 this.props.bgColor 来生成不同的 style 属性。这样就可以自由配置组件的颜色了。

其实createDOMFromString更简单：

const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
  }//直接传递代码 返回组件

接下来我们可以进行基本环境的安装了！

React.js 小书 阅读笔记2

抽象出公共组件类

猜你喜欢

React.js 小书阅读笔记2