React是不是雙向數(shù)據(jù)流

這篇文章主要講解了“React是不是雙向數(shù)據(jù)流”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“React是不是雙向數(shù)據(jù)流”吧！

React不是雙向數(shù)據(jù)流，而是單向數(shù)據(jù)流。單向數(shù)據(jù)流是指數(shù)據(jù)在某個(gè)節(jié)點(diǎn)被改動(dòng)后，只會(huì)影響一個(gè)方向上的其他節(jié)點(diǎn)；React中的表現(xiàn)就是數(shù)據(jù)主要通過props從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)，若父級(jí)的某個(gè)props改變了，React會(huì)重渲染所有子節(jié)點(diǎn)。

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

React是雙向數(shù)據(jù)流嗎

React不是雙向數(shù)據(jù)流，react是單向數(shù)據(jù)流

vue和ng都是雙向數(shù)據(jù)流、VM雙向數(shù)據(jù)綁定。而react是單向數(shù)據(jù)流，model層的數(shù)據(jù)流向view層。

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

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

單向數(shù)據(jù)流指只能從一個(gè)方向修改數(shù)據(jù)，姑且我們可以這樣理解，如下圖所示。一個(gè)父組件下有兩個(gè)子組件1和子組件2，父組件可以向子組件傳遞數(shù)據(jù)。假如子組件都獲取到了父組件的name，在子組件1中對(duì)name重新修改之后，子組件2和父組件中的值并不會(huì)發(fā)生改變，這正是因?yàn)閂ue中的機(jī)制是單向數(shù)據(jù)流，子組件不能直接改變父組件的狀態(tài)。但反過來(lái)，如果是父組件中的name修改了，當(dāng)然兩個(gè)子組件中的name也就改變了。

簡(jiǎn)單的單向數(shù)據(jù)流（unidirectional data flow）是指用戶訪問View，View發(fā)出用戶交互的Action，在Action里對(duì)state進(jìn)行相應(yīng)更新。state更新后會(huì)觸發(fā)View更新頁(yè)面的過程。這樣數(shù)據(jù)總是清晰的單向進(jìn)行流動(dòng)，便于維護(hù)并且可以預(yù)測(cè)。

React遵循從上到下的數(shù)據(jù)流向，即單向數(shù)據(jù)流。

React是單向數(shù)據(jù)流，數(shù)據(jù)主要從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)（通過props）。如果頂層（父級(jí)）的某個(gè)props改變了，React會(huì)重渲染所有的子節(jié)點(diǎn)。

單向數(shù)據(jù)流并非‘單向綁定’，甚至單向數(shù)據(jù)流與綁定沒有‘任何關(guān)系’。對(duì)于React來(lái)說(shuō)，單向數(shù)據(jù)流（從上到下）與單一數(shù)據(jù)源這兩個(gè)原則，限定了React中要想在一個(gè)組件中更新另一個(gè)組件的狀態(tài)（類似于Vue的平行組件傳參，或者是子組件向父組件傳遞參數(shù)），需要進(jìn)行狀態(tài)提升。即將狀態(tài)提升到他們最近的祖先組件中。子組件中Change了狀態(tài)，觸發(fā)父組件狀態(tài)的變更，父組件狀態(tài)的變更，影響到了另一個(gè)組件的顯示（因?yàn)閭鬟f給另一個(gè)組件的狀態(tài)變化了，這一點(diǎn)與Vue子組件的$emit()方法很相似）。

感謝各位的閱讀，以上就是“React是不是雙向數(shù)據(jù)流”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)React是不是雙向數(shù)據(jù)流這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！