React的特征單向數(shù)據(jù)流學習
更新時間:2022年09月17日 14:53:40 作者:Flag還是要立的
這篇文章主要為大家介紹了React的特征單向數(shù)據(jù)流學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
正文
React推薦one-way單向數(shù)據(jù)流,注意只是推薦,并不強制,常見有以下兩種情況:
- 狀態(tài) => 視圖
- 事件 => 狀態(tài)改變 => 視圖
狀態(tài) => 視圖
import React from 'react' const App = () => { //設置狀態(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獲取事件動作,產生狀態(tài)變更,渲染到Screen上,此時屏幕上顯示 "事件 => 狀態(tài)改變 => 視圖"
以上就是React的特征單向數(shù)據(jù)流學習的詳細內容后續(xù)希望在自學過程中,陸續(xù)分享更多React的特征,更多關于React 特征的資料請關注腳本之家其它相關文章!