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 特征的資料請關注腳本之家其它相關文章！
相關文章
本篇文章主要介紹了詳解使用React進行組件庫開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了react實現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了React?hooks中useState踩坑之異步的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文帶領大家一起探討前端框架react，涉及到前端框架react相關知識，對前端框架react相關知識感興趣的朋友一起學習吧2015-12-12
本文主要介紹了React實現(xiàn)類似于Vue中的插槽的項目實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了React如何使用emotion寫css代碼，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法，針對redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫等問題進行了優(yōu)化，官方總結了四個特點是簡易的/有想法的/強勁的/高效的，總結來看，就是更加的方便簡單了2022-12-12
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過一個demo來學習這個屬性,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
React剛出來不久，組件還比較少，不像jquery那樣已經(jīng)有很多現(xiàn)成的插件了，于是自己寫了一個基于React的輪播效果組件，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07