React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类-CSDN博客

作者：胡子大哈
原文链接： http://huziketang.com/books/react/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) } }

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

  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>?</span> </button> ` } } mount(new LikeButton(), wrapper)

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

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

继承的时候通过 super(props) 把 props 传给父类，这样就可以通过 this.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=" padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(228, 86, 73);">${this.props.bgColor}"> <span class='like-text'> ${this.state.isLiked ? '取消' : '点赞'} </span> <span>?</span> </button> ` } } mount(new LikeButton({ bgColor: 'red' }), wrapper)

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

只要有了上面那个 Component 类和 mount 方法加起来不足40行代码就可以做到组件化。如果我们需要写另外一个组件，只需要像上面那样，简单地继承一下Component 类就好了：

  class RedBlueButton extends Component { constructor (props) { super(props) this.state = { color: 'red' } } onClick () { this.setState({ color: 'blue' }) } render () { return ` <div style='color: ${this.state.color};'>${this.state.color}</div> ` } }