three.js 一个页面可以存在多个render吗_你真的会用setState吗？

setState函数是什么？

1. 将需要处理的变化塞入组建的state对象中

2. 告诉该组件及其子组件需要用更新的状态来重新渲染

3. 响应事件处理和服务端响应更新用户界面的主要方式

setState经典例子

constructor(props) {    super(props);    this.state = {        count: 0    };    this.increase = this.increase.bind(this);}increase() {    this.setState({ count: this.state.count + 1 });    // 第一次输出    console.log('第一次输出：', this.state.count);        this.setState({ count: this.state.count + 1 });    // 第二次输出    console.log('第二次输出：', this.state.count);        setTimeout(() => {        this.setState({ count: this.state.count + 1 });        // 第三次输出        console.log('第三次输出：', this.state.count);                this.setState({ count: this.state.count + 1 });        // 第四次输出        console.log('第四次输出：', this.state.count);    }, 1000)}

不知道你们心里是否有上面代码的答案了呢？不错，正确输出是：0 0 2 3。那可能刚开始学React的童鞋就会问了？为什么前面都是0，后面的正常加了了？那这个setState究竟是同步的还是异步的了？那么，接下来就为你解答心中的疑惑=。=

合并更新

前两次的setState，不会立即改变React组件中的state的值，这两次输出的都是0；合并更新，将多次的setState合并成一次，不引发重复渲染

setTimeout 同步更新，引发两次渲染。

setState是异步的吗？

其实，这只是React的障眼法。

setState是同步执行的！但是state并不一定会同步更新(异步更新和同步更新都存在)

那setState究竟干了什么了？

setState()中有个特别重要的布尔属性isBatchingUpdates(默认为false)，它决定了state是同步更新还是异步更新。

setState调用

setState只在合成事件何钩子函数中是“异步更新”的。

异步更新的背后，是同步代码处理(“合成事件何钩子函数”的调用在“更新”前)。

异步是为了实现批量更新的手段，也是React新能优化的一种方式。

为什么直接修改this.state无效

要知道setState本质是通过一个队列机制实现state更新的。执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时，状态队列新进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去。

React.setState中的同步更新

当然了，我们也是有办法同步获取state更新后的值：

1. setTimeout等异步操作中调用setState函数
2. DOM原生事件
3. 利用setState回调函数
4. 函数式setState用法

前两个都是比较好理解，因为没有前置的 batchdUpdate 调用，所以 isBatchingUpdates 为false。不会开启批量更新模式。

后面两个方法，是React本身提供的。要注意的是，setState回调函数要在render函数被重新执行后才执行。

// 回调函数this.setState({ count: 1 }, () => {    console.log(this.state.count)})// 函数式this.setState(prevState => {    return {        count: prevState.count + 1    }})

对比VUE批量更新

Vue在监听到数据变化后，会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更(如果同一个watcher被多次触发，只会被推入到队列中一次)。然后，在下一次事件循环Tick／微任务中，Vue刷新队列执行实际工作。

更新

vue批量更新体现为：

1. Mutation Observer(变动观察器)是侦听DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。
2. 概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质区别：事件是同步触发，DOM发生变化会立刻触发响应的事件。
3. Mutation Observer是异步触发，DOM发生变动，并不会立刻触发，而是要等到当前所有DOM操作都结束后才会触发。

针对以上的知识点，我们来看看下面这段代码，看我们是否理解setState：

class Demo extends React.Component {  state = {    count: 0,  };  componentDidMount() {    this.setState({      count: this.state.count + 1,    });    console.log("console: " + this.state.count);    this.setState({ count: this.state.count + 1 }, () => {      console.log("console from callback: " + this.state.count);    });    this.setState(      (prevState) => {        console.log("console from func: " + prevState.count);        return {          count: prevState.count + 1,        };      },      () => {        console.log("last console: " + this.state.count);      }    );  }  render() {    console.log("render: " + this.state.count);    return 

test

; }}

总结

1. state更新需要通过setState，而不能直接操作state。
2. 调用setState更新，state不会立刻生效。
3. 多个顺序执行的setState不是同步一个个执行，会加入到一个队列中，然后最后一起执行，及批量更新。