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)制，常見(jiàn)有以下兩種情況:
- 狀態(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
通過(guò)input獲取事件動(dòng)作，產(chǎn)生狀態(tài)變更，渲染到Screen上，此時(shí)屏幕上顯示 "事件 => 狀態(tài)改變 => 視圖"
以上就是React的特征單向數(shù)據(jù)流學(xué)習(xí)的詳細(xì)內(nèi)容后續(xù)希望在自學(xué)過(guò)程中，陸續(xù)分享更多React的特征，更多關(guān)于React 特征的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法,全稱(chēng)為Node Package Manager，是隨同NodeJS一起安裝的包管理工具，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
高階組件也就是我們常說(shuō)的HOC,是React中用于復(fù)用組件邏輯的一種高級(jí)技巧。這篇文章主要通過(guò)一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對(duì)大家有所幫助2023-04-04
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用2022-09-09
react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
本篇文章通過(guò)完整的代碼給大家介紹了react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-01-01
React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)插槽的Layout組件
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)注冊(cè)內(nèi)容的插槽組件,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以了解一下2025-02-02
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫(kù),Zustand以簡(jiǎn)潔易用、靈活性高及最小化原則等特點(diǎn)脫穎而出,旨在提供簡(jiǎn)單而強(qiáng)大的狀態(tài)管理功能2024-10-10
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
深入理解React Ref 機(jī)制useRef 與 forwardRef
這篇文章主要介紹了React Ref機(jī)制useRef 與 forwardRef的協(xié)作原理,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2026-03-03
代碼解析React中setState同步和異步問(wèn)題
前端框架從MVC過(guò)渡到MVVM。從DOM操作到數(shù)據(jù)驅(qū)動(dòng)，一直在不斷的進(jìn)步著，本文給大家介紹React中setState同步和異步問(wèn)題，感興趣的朋友一起看看吧2021-06-06
簡(jiǎn)談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06