给LikeButton类添加了构造函数,这个构造函数会给每一个LikeButton的实例添加一个对象state,state里面保存了每个按钮自己是否点赞的状态。
事件绑定函数:原来只打印 click,现在点击的按钮的时候会调用 changeLikeText 方法,这个方法会根据 this.state的状态改变点赞按钮的文本。
DOM 元素更新页面一旦状态发生改变,就重新调用 render 方法,构建一个新的 DOM 元素。可以在 render 方法里面使用最新的
this.state 来构造不同 HTML 结构的字符串,并且通过这个字符串构造不同的 DOM 元素。
render 函数里面的 HTML 字符串会根据 this.state 不同而不同。setState 函数,这个函数接受一个对象作为参数;它会设置实例的 state,然后重新调用一下 render 方法。changeLikeText 会构建新的 state 对象,这个新的 state ,传入
setState 函数当中。
用户每次点击,changeLikeText 都会调用改变组件状态然后调用 setState;setState 会调用 render ,render 方法会根据 state 的不同重新构建不同的 DOM 元素。
只要调用 setState,组件就会重新渲染。
DOM 元素每当 setState 中构造完新的 DOM 元素以后,就会通过 onStateChange 告知外部插入新的 DOM 元素,然后删除旧的元素,页面就更新了。