這篇文章主要介紹“react是單向數(shù)據(jù)流的原因有哪些”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“react是單向數(shù)據(jù)流的原因有哪些”文章能幫助大家解決問題。

目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、侯馬網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

在react中，因?yàn)閿?shù)據(jù)在某個(gè)節(jié)點(diǎn)被改動(dòng)之后，只會(huì)影響一個(gè)方向上的其他節(jié)點(diǎn)；如果是雙向數(shù)據(jù)流父組件的數(shù)據(jù)通過props傳遞給子組件，而子組件更新了props，導(dǎo)致父組件和其他關(guān)聯(lián)組件的數(shù)據(jù)更新，UI渲染也會(huì)隨著數(shù)據(jù)而更新會(huì)導(dǎo)致數(shù)據(jù)紊亂和不可控制，所以react是單向數(shù)據(jù)流。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react為什么是單向數(shù)據(jù)流

單向數(shù)據(jù)流就是：數(shù)據(jù)在某個(gè)節(jié)點(diǎn)被改動(dòng)后，只會(huì)影響一個(gè)方向上的其他節(jié)點(diǎn)。

1.你是如何理解單向數(shù)據(jù)流的？

• 組件的狀態(tài)：狀態(tài)可以理解為數(shù)據(jù)，與props類似，但是state是私有的，并且完全受控于當(dāng)前組件，因此：組件狀態(tài)指的就是一個(gè)組件自己維護(hù)的數(shù)據(jù)。

• 數(shù)據(jù)驅(qū)動(dòng)UI：意思很簡(jiǎn)單，就是：頁(yè)面所展現(xiàn)的內(nèi)容，完全是受狀態(tài)控制的。這也就是mvvm的理念，UI的改變，全部交給框架本身來做，我們只需要管理好數(shù)據(jù)（狀態(tài)）就好了。

• 那么在 React 中，如何對(duì)狀態(tài)進(jìn)行管理呢？這就是本章節(jié)的重點(diǎn)，也是整個(gè) React 學(xué)習(xí)的重點(diǎn)：組件的狀態(tài)管理。

1. 什么是數(shù)據(jù)流？

數(shù)據(jù)流就是：數(shù)據(jù)在組件之間的傳遞。

2. 單向數(shù)據(jù)流是什么意思？

單向數(shù)據(jù)流就是：數(shù)據(jù)在某個(gè)節(jié)點(diǎn)被改動(dòng)后，只會(huì)影響一個(gè)方向上的其他節(jié)點(diǎn)。

3. 為什么是自頂向下的？

就是說：數(shù)據(jù)只會(huì)影響到下一個(gè)層級(jí)的節(jié)點(diǎn)，不會(huì)影響上一個(gè)層級(jí)的節(jié)點(diǎn)。用下面的圖來說就是：L2數(shù)據(jù)改變，只會(huì)影響到L3，不會(huì)影響到L1或者其他的節(jié)點(diǎn)。這就是自頂向下的單向數(shù)據(jù)流。那么我們?cè)趓eact框架中，就可以明確定義單向數(shù)據(jù)流：規(guī)范數(shù)據(jù)的流向，數(shù)據(jù)由外層組件向內(nèi)層組件進(jìn)行傳遞和更新。

4. 為什么是單向的？不能是雙向的么？

因?yàn)椋何覀冊(cè)O(shè)想這樣的情景：

父組件的數(shù)據(jù)通過props傳遞給子組件，而子組件更新了props，導(dǎo)致父組件和其他關(guān)聯(lián)組件的數(shù)據(jù)更新，UI渲染也會(huì)隨著數(shù)據(jù)而更新。毫無疑問，這是會(huì)導(dǎo)致嚴(yán)重的數(shù)據(jù)紊亂和不可控制的。
不能是雙向的。

因此絕大多數(shù)框架在這方面做了處理。而 React 在這方面的處理，就是直接規(guī)定了 Props 為只讀的，而不是可更改的。這也就是我們前面看到的數(shù)據(jù)更新不能直接通過 this.state 操作，想要更新，就需要通過 React 提供的專門的 this.setState() 方法來做。

單向數(shù)據(jù)流其實(shí)就是一種框架本身對(duì)數(shù)據(jù)流向的限制。

5. 單向數(shù)據(jù)流有什么作用呢？
   保證數(shù)據(jù)的可控性。

2.setState 是同步還是異步的呀？

1. setState 本身的默認(rèn)行為是什么？

其實(shí)也很簡(jiǎn)單，我們都知道，setState可以傳遞對(duì)象形式的狀態(tài)，也可以傳遞函數(shù)形式的狀態(tài)。而不論狀態(tài)是對(duì)象形式還是函數(shù)形式，它都會(huì)先將所有狀態(tài)保存起來，然后進(jìn)行狀態(tài)合并，所有狀態(tài)合并完成后再進(jìn)行一次性 DOM 更新。

• 如果狀態(tài)是對(duì)象形式，后面的狀態(tài)會(huì)直接覆蓋前面的狀態(tài)。類似于 Object.assign() 的合并操作。
  對(duì)于對(duì)象狀態(tài)這一點(diǎn)，我們看下代碼：
  

運(yùn)行以上代碼，Dom 中展示的結(jié)果為 1。很顯然兩次 setState 只有一次生效了。

真的嗎？其實(shí)兩次都有生效，只不過這兩次 setState 在執(zhí)行前，被合并成了一個(gè)。你不能說到底是那個(gè)生效，你可以說兩個(gè)都沒生效，因?yàn)樽罱K執(zhí)行的是被合并的那個(gè)代碼。

• 如果狀態(tài)是函數(shù)形式，那么依次調(diào)用函數(shù)進(jìn)行狀態(tài)累積，所有函數(shù)調(diào)用完成后, 得到最終狀態(tài)，最終進(jìn)行一次性 DOM 更新。
  
  明顯不一樣的結(jié)果就能說明，兩次都執(zhí)行了，因?yàn)楹瘮?shù)狀態(tài)并不會(huì)合并，而是以此運(yùn)行。

以上就是setState的默認(rèn)行為。

2. setState 同步 OR 異步

從 API 層面上說，它就是普通的調(diào)用執(zhí)行的函數(shù)，自然是同步 API 。

因此，這里所說的同步和異步指的是 API 調(diào)用后更新 DOM 是同步還是異步的。
 

通過結(jié)果我們可以發(fā)現(xiàn)，非常奇怪的一個(gè)現(xiàn)象：

第一次事件執(zhí)行顯然為異步的，先打印了兩個(gè) 0，Dom 隨之改變?yōu)?1 ；
第二次同樣是異步的，但是我們發(fā)現(xiàn)多次執(zhí)行沒效果 (異步？)；
而第三次又是同步執(zhí)行的了；

先說結(jié)論，首先，同步和異步主要取決于它被調(diào)用的環(huán)境。

• 如果 setState 在 React 能夠控制的范圍被調(diào)用，它就是異步的。

比如：合成事件處理函數(shù), 生命周期函數(shù), 此時(shí)會(huì)進(jìn)行批量更新, 也就是將狀態(tài)合并后再進(jìn)行 DOM 更新。

• 如果 setState 在原生 JavaScript 控制的范圍被調(diào)用，它就是同步的。

比如：原生事件處理函數(shù)中, 定時(shí)器回調(diào)函數(shù)中, Ajax 回調(diào)函數(shù)中, 此時(shí) setState 被調(diào)用后會(huì)立即更新 DOM 。

關(guān)于“react是單向數(shù)據(jù)流的原因有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。