为什么vue对data直接赋值之后立马就能取到最新值，而React在setData之后取到的还是旧值，render之后才是新值

Question

例如：

// vue部分伪代码
new Vue({
    data() {
        return {
            data: 1
        }
    },
    methods: {
        handleClick() {
            this.data = 100
            console.log(this.data) // 结果是 100
        }
    }
})

// react部分伪代码
class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = { data: 10 }
  }

  handleClick() {
    this.setState({data: 100})
    console.log(this.state.data) // 结果是 10
  }

  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

Answer 1

两者对数据的处理不一样
vue是数据的劫持和通知订阅的方式，所以可以立即响应数据的变化。
react数据更新setState是异步的

this.setState({data: 100}, () => {
  console.log(this.state.data) // 结果是 100
})

Answer 2

两者都是异步渲染。Vue 的设计是 Model 的修改是同步的，然后记录变化到队列，累积一定周期再渲染 View；React 之所以不这么做是为了实现 Slice ，即并发更新，一个组件的渲染过程可以被多次挂起，让出资源给更重要的任务。

另一方面，即便 state 修改同步了，props 也是必须在父组件更新后才知道的，Vue 是 Push 机制，通过劫持可以精确响应更新，而 React 就不好弄了，所以为了避免混乱（同时避免反复渲染）还是保持 state 和 props 同步比较合理。

通过 setState 的回调能保证获取的是新值。

Answer 3

正如楼上所说，react的setState是异步的，有时候你不懂，真的很难玩转。

因此setState重载有一个callback的方式获取state更新之后的值。

react实际上是批量地对state进行更新以提高性能的。