react的setState函数

问题情境一：当我们要改变React类组件的状态的时候，为什么不能直接用 this.state = xxx 这种方式来修改？

setState方法是由父类Component所提供的，当我们调用这个函数时，React.js会更新组件的状态state，并重新调用render方法，然后把render方法所渲染的最新内容显示到页面上。而如果直接用 this.state = xxx 这种方式来修改， React.js就没办法知道你修改了组件的状态，它也就没有办法更新页面，所以，一定要使用 React.js 提供的 setState方法，它接受一个对象或者函数作为参数。

大致的setState方法类似于：

    // ::String => ::Document
        const createDOMFromString = (domString) => {
            const div = document.createElement('div')
            div.innerHTML = domString
            return div
        }
        // 组件父类
        class Component{
            constructor(props = {}){
                this.props = props;
            }
            setState(state){
                const oldEl = this.el;// 获得旧的DOM节点
                this.state = state;//获得新的状态
                this.el = this._renderDOM();//获得新的DOM节点
                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));
                }
                return this.el;
            }
        }
        class LikeButton extends Component{
            constructor(props){
                super(props);
                this.state = {isLiked: false};
            }
            onClick(){
                this.setState({
                    isLiked: !this.state.isLiked
                })
            }
            render(){
                return `
                <button id='like-btn' style="background-color: ${this.props.bgColor}">
                    <span class='like-text'>${this.state.isLiked ? "取消": "点赞"}</span>
                    <span></span>
                </button>
                `
            }
        }
        const mount = (component, wrapper)=>{
            // 将绑定监听事件的元素更新到页面
            wrapper.appendChild(component._renderDOM());
            component.onStateChange = (oldEl, newEl)=>{
                wrapper.insertBefore(newEl, oldEl);
                wrapper.removeChild(oldEl);
            }
        }
        const wrapper = document.querySelector('.wrapper');
        mount(new LikeButton({bgColor: 'red'}), wrapper);

问题情境二：调用setState之后state会马上被修改吗？怎么让后续操作按照前一个 setState 的结果进行修改（函数参数）？

setState接受函数、对象参数：
要注意的是，当你调用 setState 的时候，React.js 并不会马上修改state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。这一点要好好注意。可以体会下面的代码：

 handleClickOnLikeButton () {
    console.log(this.state.isLiked)
    this.setState({
      isLiked: !this.state.isLiked
    })
    console.log(this.state.isLiked)
  }

你会发现两次打印的都是 false，即使我们中间已经 setState 过一次了。这并不是什么 bug，只是 React.js 的 setState 把你的传进来的状态缓存起来，稍后才会帮你更新到 state 上，所以你获取到的还是原来的 isLiked。
所以如果你想在 setState 之后使用新的 state 来做后续运算就做不到了，例如：

handleClickOnLikeButton () {
    this.setState({ count: 0 }) // => this.state.count 还是 undefined
    this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
    this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN
  }

上面的代码的运行结果并不能达到我们的预期，我们希望 count 运行结果是 3 ，可是最后得到的是 NaN。但是这种后续操作依赖前一个 setState 的结果的情况并不罕见。

这里就自然地引出了 setState 的第二种使用方式，可以接受一个函数作为参数。React.js 会把上一个 setState 的结果传入这个函数，你就可以使用该结果进行运算、操作，然后返回一个对象作为更新 state 的对象：

 handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
    })
    // 最后的结果是 this.state.count 为 3
  }

这样就可以达到上述的利用上一次 setState 结果进行运算的效果。

问题情境三：上面操作了三次setState，那么实际上组件会重新渲染几次？

上面我们进行了三次 setState，但是实际上组件只会重新渲染一次，而不是三次；这是因为在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的 setState 都进行合并以后再重新渲染组件。
深层的原理并不需要过多纠结，你只需要记住的是：在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。