React中this.setState是同步仍是異步？爲何要設計成異步？

在使用react的時候，this.setState爲何是異步呢？

一直以來沒有深思這個問題。昨天就此問題搜索了一下。

react創始人之一 Dan Abramov gaearon在GitHub上回答了這一問題，如下是閱讀後的一些總結吧

1.保持內部的一致性

即便state是同步更新，可是props也不是。props在從新渲染父組件以前，咱們沒法知道。眼下所提供的對象（state，props， refs）是內部一致性，這就意味着若是隻使用這些對象，則能夠保證它們引用徹底協調的樹。

當你只使用狀態時，若是它是同步刷新，這種模式能夠這樣工做：

console.log(this.state.value) // 0

this.setState({value: this.state.value + 1}); 

console.log(this.state.value); // 1

this.setState({value: this.state.value + 1});

console.log(this.state.value); // 2

可是，若是這個狀態被提高到父組件：

this.setState({value: this.state.value + 1});

this.props.onIncrement() // 在父組件身上作一樣的事情。

在典型的react應用中，依賴this.setState()在父組件裏是一種常見的特定於react的方式

console.log（this.props.value）// 0

this.props.onIncrement();

console.log（this.props.value）// 0

this.props.onIncrement();

console.log（this.props.value）// 0

這是由於，在上面這種狀態下。this.state會當即刷新，但this.props不會。而且咱們不能在this.props不從新渲染父級的狀況下當即刷新，根據具體狀況，這回很是顯著的下降性能。

2.啓用併發更新

Dan：咱們一直在解釋「異步呈現的一種方式「是react能夠setState()根據它們的來源調用分配不一樣的優先級：時間處理程序，網絡響應，動畫等。

例如：若是要鍵入消息，setState()在TextBox須要當即刷新組件中的調用。可是，若是你在鍵入時收到新消息，則最好將新的渲染延遲到某個閾值（例如一秒），而不是由於阻塞線程而致使打字斷斷續續。

原文可看這裏：https://github.com/facebook/react/issues/11527