Abstract the common component Classes

In this paper, the author: beard, in this paper, the original: huziketang.com/books/react…

Please indicate the source, keep the original link and author information

Online reading: huziketang.com/books/react

To make the code more flexible and write more components, we abstracted this pattern into a Component class:

  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
    }
  }Copy the code

This is a Component parent class from which all components can be built. It defines two methods, one of which is setState, which we are familiar with; One is the private method _renderDOM. The _renderDOM method calls this.render to build the DOM element and listens for the onClick event. Therefore, component subclasses simply implement a Render method that returns an HTML string.

There is an additional mount method, which inserts the component’s DOM element into the page and updates the page with setState:

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

In this case, if we rewrite the likes component, it will look like:

  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'>The ${this.state.isLiked ? 'cancel' : 'thumb up'}< / span > < span > 👍 < / span > < / button > `
    }
  }

  mount(new LikeButton(), wrapper)Copy the code

That’s not good enough. In real development, you may need to pass in some custom configuration data to the component. For example, if I want to configure the background color of the like button, if I pass it a parameter that tells it how to set its own color. So this button is much more customizable. So we can pass both the component class and its subclasses a parameter, props, as the component’s configuration parameter. Change the Component constructor to:

. constructor (props = {}) {this.props = props
    }
...Copy the code

This. Props is used to pass props to the parent class. This.

  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: The ${this.props.bgColor}">
          <span class='like-text'>
            The ${this.state.isLiked ? 'cancel' : 'thumb up'}< / span > < span > 👍 < / span > < / button > `
    }
  }

  mount(new LikeButton({ bgColor: 'red' }), wrapper)Copy the code

Here we modified the LikeButton render method slightly to generate different style properties based on the parameter this.props. BgColor passed in. This gives you the freedom to configure the colors of the components.

With the above Component class and the mount method, it takes less than 40 lines of code to componentize. If we need to write another Component, we simply inherit the Component class as above:

  class RedBlueButton extends Component {
    constructor (props) {
      super(props)
      this.state = {
        color: 'red'
      }
    }

    onClick () {
      this.setState({
        color: 'blue'
      })
    }

    render () {
      return `
        <div style='color: The ${this.state.color}; '>The ${this.state.color}</div>
      `}}Copy the code

Simple and easy to use, you now have the flexibility to componentize pages.

Oh, there’s also the mysterious createDOMFromString, which is even simpler:

  const createDOMFromString = (domString) = > {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
  }Copy the code

The complete Component code can be found here at ReactJs-in-40.

conclusion

We’ve spent a lot of time talking about a simple like example, and we’ve been tweaking the way we write it in the process. Finally, a class was extracted to help us do better componentization. What have we learned in this process?

Componentization can help us solve the reuse problem of the front-end structure. The whole page can be composed of such different components, nested.

A component has its own display morphology (HTML structure and content above) behavior, which can be determined by both the data state (STATE) and the configuration parameters (props). Changes in data state and configuration parameters affect the appearance of the component.

The display of the component needs to be updated as the data changes. So if the componentized pattern provides an efficient way to automatically help us update pages, it can greatly reduce the complexity of our code and lead to better maintainability.

Well, that’s the end of the lesson. You’ve already learned how to use React. Js because we’ve already written a — I’m joking, but the Component class above is used in a very similar way to the React Component class. After mastering these lessons, you’ll have a basic understanding of the concepts of React.js.

Now let’s get into the theme and introduce react.js. You’ll find that the following is a lot easier to understand now that you’ve laid the groundwork.

Lesson5 React.js Basic Environment Installation