后边三个组件化,前端开荒早报

图片 1


React.js 小书

本文小编:胡子大哈
本文原来的书文:http://huziketang.com/books/react/

转发请注解出处,保留原版的书文链接以致笔者音讯

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


Three.js 初探 微场景制作;css常用代码大全;jQuery 效能进步提出;你不知晓的sublime高效操作snippet篇;创设离线web应用;玩转异步 JS :async/await 简明教程;React.js 小书 Lesson3 前端组件化:优化 DOM 操作;从零初叶塑造react应用代码改进自动应用

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

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

转发请申明出处,保留原版的书文链接以至小编音讯

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


为了让代码更加灵活,能够写越多的机件,大家把这种方式抽象出来,放到二个 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'>
          ${this.state.isLiked ? '取消' : '点赞'}
          
			

本文由新葡萄京娱乐场8522发布于计算机编程,转载请注明出处:后边三个组件化,前端开荒早报

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。