LikeButton类添加了构造函数,这个构造函数会给每一个LikeButton的实例添加一个对象statestate里面保存了每个按钮自己是否点赞的状态。

事件绑定函数:原来只打印 click,现在点击的按钮的时候会调用 changeLikeText 方法,这个方法会根据 this.state的状态改变点赞按钮的文本。

状态改变 -> 构建新的 DOM 元素更新页面

一旦状态发生改变,就重新调用 render 方法,构建一个新的 DOM 元素。可以在 render 方法里面使用最新的 this.state 来构造不同 HTML 结构的字符串,并且通过这个字符串构造不同的 DOM 元素。

  1. render 函数里面的 HTML 字符串会根据 this.state 不同而不同。
  2. 新增一个 setState 函数,这个函数接受一个对象作为参数;它会设置实例的 state,然后重新调用一下 render 方法。
  3. 当用户点击按钮的时候, changeLikeText 会构建新的 state 对象,这个新的 state ,传入 setState 函数当中。

用户每次点击,changeLikeText 都会调用改变组件状态然后调用 setStatesetState 会调用 renderrender 方法会根据 state 的不同重新构建不同的 DOM 元素。

只要调用 setState,组件就会重新渲染。

重新插入新的 DOM 元素

每当 setState 中构造完新的 DOM 元素以后,就会通过 onStateChange 告知外部插入新的 DOM 元素,然后删除旧的元素,页面就更新了。