读react.js小书 02

...
    setState (state) {
      const oldEl = this.el
      this.state = state
      this.el = this.render()
      if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }
...

读react.js小书 01_前端小臻的博客-CSDN博客

接上文的代码，将setstate的函数进行修改一下，将当前的dom元素赋值给oldel

赋值后进行state的操作，将state的这个状态进行更改，再里面调用this.render（）来返回新的dom元素，在判断更改状态后调用切换state的状态（将新老的dom节点进行赋值操作）

const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
likeButton.onStateChange = (oldEl, newEl) => {
  wrapper.insertBefore(newEl, oldEl) // 插入新的元素
  wrapper.removeChild(oldEl) // 删除旧的元素
}

在将dom节点插入后将老的节点删除。

当然假如用户频繁的点击点赞和取消，都重新构造、新增、删除 DOM 元素，会导致浏览器进行大量的重排，严重影响性能。这种暴力行为可以被一种叫 Virtual-DOM 的策略规避掉（等我学到那个地方及时更新）