4.优化setState和ref的实现 about blog

[yxxuweb]

click() {
    for (let i = 0; i < 10; i++) {
      this.setState({
        count: ++this.state.count,
      });
    }

    this.state.count = 13;
    console.log(this.state.count);
  }

我在你的列子上这样调用，UI上面显示是13，而不是this.setState之后的值。

[MuYunyun]

@yxxuweb 针对你反馈的这个测试用例，在 react 和 preact 分别做了实验：

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
    this.click = this.click.bind(this)
  }

  click() {
    for (let i = 0; i < 10; i++) {
      this.setState({
        count: ++this.state.count
      })
    }

    this.state.count = 13;
  }

  render() {
    return (
      <div>
        <button onClick={this.click}>增加</button>
        <div>{this.state.count}</div>
      </div>
    )
  }
}

在 React 中(点击按钮)：

• UI 上显示为 10。
• 还有一点是调用完 this.state.count = 13 后，应该调用 this.forceUpdate()，UI 才会生效。

在 cpreact 上表现与 preact 相同

• UI 上显示为 13。

这个案例在 cpreact 执行流程为：click 事件 => setState 函数 10 次异步调用合并 => this.state.count = 13 => render。因此界面上显示为 13。

但是这么做确实有些违规 react 的法则，直接调用 this.state.count(没有 forceUpdate) 就改变了状态。

react 中的执行流程应该为：click 事件 => setState 函数 10 次异步调用合并 => render => this.state.count = 13

即 react 中 this.state.count 应该放在 render 函数的后面再执行，有点好奇 react 事件循环机制是如何实现的。如果有好的想法欢迎指正。

[LuoQaxa]

@MuYunyun 在react中循环10次调用setState，UI显示上还是10。这一点不是很理解，我也很好奇react 事件循环机制是如何实现的，大佬能写篇文章解释一下吗？