SOURCE

console 命令行工具 X clear

                    
>
console
const stringToDOM = (str)=>{
  const oDiv = document.createElement('div');
  oDiv.innerHTML = str;
  return oDiv
}

class Component{
  setState(state){
    const oldEl = this.el;
    this.state = state;
    this.el = this._renderDOM();
    if(this.onStateChange) this.onStateChange(this.el,oldEl)
  }
  _renderDOM(){
    this.el = stringToDOM(this.render())
    if(this.onClick) this.el.addEventListener('click',this.onClick.bind(this),false)
    return this.el
  }
}

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

class LikeBtn extends Component{
  constructor(){
    super()
    this.state={
      isLike:true
    }
  }
  onClick(){
    this.setState({
      isLike:!this.state.isLike
    })
  }
  render(){
    return (`

	<button class="like-btn">
	<span class="like-text">
		${this.state.isLike?"点赞":"取消"}
</span>
</button>
`)
  }
}

mount(document.querySelector('.wrapper'),new LikeBtn())




<div class="wrapper">
  
</div>