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