React的特征單向數(shù)據(jù)流學(xué)習(xí)
正文
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上,此時屏幕上顯示 "狀態(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獲取事件動作,產(chǎn)生狀態(tài)變更,渲染到Screen上,此時屏幕上顯示 "事件 => 狀態(tài)改變 => 視圖"
以上就是React的特征單向數(shù)據(jù)流學(xué)習(xí)的詳細(xì)內(nèi)容后續(xù)希望在自學(xué)過程中,陸續(xù)分享更多React的特征,更多關(guān)于React 特征的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐
本文主要介紹了React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05使用React實(shí)現(xiàn)輪播效果組件示例代碼
React剛出來不久,組件還比較少,不像jquery那樣已經(jīng)有很多現(xiàn)成的插件了,于是自己寫了一個基于React的輪播效果組件,現(xiàn)在分享給大家,有需要的可以參考借鑒。2016-09-09