React的特征單向數(shù)據(jù)流學(xué)習(xí)
更新時(shí)間：2022年09月17日 14:53:40 作者：Flag還是要立的
這篇文章主要為大家介紹了React的特征單向數(shù)據(jù)流學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
React推薦one-way單向數(shù)據(jù)流，注意只是推薦，并不強(qiáng)制，常見有以下兩種情況:
- 狀態(tài) => 視圖
- 事件 => 狀態(tài)改變 => 視圖
狀態(tài) => 視圖
import React from 'react'
const App = () => {
//設(shè)置狀態(tài)
const [data, setData] = React.useState('狀態(tài) => 視圖')
return (
<div>
// 視圖顯示
<p>{data}</p>
</div>
)
}
export default App
以上可看到，根據(jù)提前定義的狀態(tài)，渲染到Screen上，此時(shí)屏幕上顯示 "狀態(tài) => 視圖"
事件 => 狀態(tài)改變 => 視圖
另一種的情況是由外部事件觸發(fā)狀態(tài)改變
import React from 'react'
const App = () => {
const [data, setData] = React.useState('事件 => 狀態(tài)改變 => 視圖')
return (
<div>
<input type="text" onChange={e=>setData(e.target.value)}/>
<p>{data}</p>
</div>
)
}
export default App
通過input獲取事件動(dòng)作，產(chǎn)生狀態(tài)變更，渲染到Screen上，此時(shí)屏幕上顯示 "事件 => 狀態(tài)改變 => 視圖"
以上就是React的特征單向數(shù)據(jù)流學(xué)習(xí)的詳細(xì)內(nèi)容后續(xù)希望在自學(xué)過程中，陸續(xù)分享更多React的特征，更多關(guān)于React 特征的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React使用State?Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React項(xiàng)目中動(dòng)態(tài)插入HTML內(nèi)容的實(shí)現(xiàn)
本文主要介紹了React項(xiàng)目中動(dòng)態(tài)插入HTML內(nèi)容的實(shí)現(xiàn),通過使用React的dangerouslySetInnerHTML屬性,我們可以將HTML內(nèi)容插入到組件中,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了React?中的?setState?是同步還是異步，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了react-router-dom的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
我們在后臺(tái)管理系統(tǒng)React項(xiàng)目開發(fā)中會(huì)有Table表格、Form表單、List列表、Button按鈕等組件，這個(gè)時(shí)候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題，本文就介紹了eact項(xiàng)目中使用AntDesign，感興趣的可以了解一下2022-04-04
React實(shí)現(xiàn)數(shù)字滾動(dòng)組件numbers-scroll的示例詳解
數(shù)字滾動(dòng)組件，也可以叫數(shù)字輪播組件，這個(gè)名字一聽就是非常普通常見的組件。本文將利用React實(shí)現(xiàn)這一組件，感興趣的小伙伴可以了解一下2023-03-03
這篇文章主要介紹了React技巧之改變元素樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
react項(xiàng)目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項(xiàng)目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
手把手教您實(shí)現(xiàn)react異步加載高階組件
這篇文章主要介紹了手把手教您實(shí)現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
解讀useState第二個(gè)參數(shù)的"第二個(gè)參數(shù)"
這篇文章主要介紹了useState第二個(gè)參數(shù)的"第二個(gè)參數(shù)",具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03