




版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第ReactuseReducer終極使用教程目錄1.概述2.useReducer使用3.使用useReducer完成todolist列表功能
1.概述
useReducer這個(gè)Hooks在使用上幾乎跟Redux一模一樣,唯一缺點(diǎn)的就是無(wú)法使用redux提供的中間件。
使用hook函數(shù)后,一般情況下,一個(gè)組件組中的數(shù)據(jù)我們可以用useReducer來(lái)管理,而不是用redux來(lái)完成,redux一般存儲(chǔ)公用數(shù)據(jù),而不是把所有的數(shù)據(jù)都存儲(chǔ)在里面,redux它是一個(gè)單一數(shù)據(jù)源,如果存儲(chǔ)多個(gè)數(shù)據(jù)的話(huà),性能會(huì)降低。
2.useReducer使用
importReact,{useReducer}from'react'
//useReducer它就是一個(gè)小型的redux,它幾乎和redux是一樣的,也可以管理數(shù)據(jù)
//初始化數(shù)據(jù)
constinitState={
count:100
//reducer純函數(shù)中的state無(wú)需在定義函數(shù)時(shí)指定初始值,initState會(huì)賦值給reducer
//constreducer=(state,action)={}
//type,payload是從action中結(jié)構(gòu)出來(lái)的
constreducer=(state,{type,payload})={
if(type==='add'){
return{...state,count:state.count+payload}
returnstate
constApp=()={
//state它就是初始化后數(shù)據(jù)的對(duì)象,狀態(tài)
//dispatch它就是用來(lái)發(fā)送指令讓reducer來(lái)修改state中的數(shù)據(jù)
//reducer它就是一個(gè)純函數(shù),用來(lái)修改initState初始化后數(shù)據(jù)狀態(tài)函數(shù)
//initState初始化數(shù)據(jù)
const[state,dispatch]=useReducer(reducer,initState)
constaddCount=()={
//數(shù)據(jù)以改變就會(huì)觸發(fā)useReducer中的reducer函數(shù)
dispatch({type:'add',payload:2})
return(
div
h3App組件--{state.count}/h3
buttonaddCount}++++/button
/div
exportdefaultApp;
useReducer的惰性初始化:
importReact,{useReducer}from'react'
constinitState={
count:100
constreducer=(state,{type,payload})={
if(type==='add'){
return{...state,count:state.count+payload}
returnstate
constApp=()={
//initState初始化數(shù)據(jù)
//如果useReducer它有第3個(gè)參數(shù),則第2個(gè)參數(shù)就沒(méi)有意義,它以第3個(gè)參數(shù)優(yōu)先,第3個(gè)參數(shù),惰性初始化,提升性能
//第3參數(shù)它是一個(gè)回調(diào)函數(shù)且一定要返回一個(gè)對(duì)象數(shù)據(jù),當(dāng)然你也可以直接返回一個(gè)值也可以,不建議
const[state,dispatch]=useReducer(reducer,null,()=({count:2000}))
constaddCount=()={
dispatch({type:'add',payload:2})
return(
div
h3App組件--{state.count}/h3
buttonaddCount}++++/button
/div
exportdefaultApp;
注意:惰性初始化可以提升性能,惰性初始化使得數(shù)據(jù)不會(huì)在一開(kāi)始就進(jìn)行初始化,而是在使用的時(shí)候再進(jìn)行初始化。
3.使用useReducer完成todolist列表功能
reducer.js:
//導(dǎo)出初始化數(shù)據(jù)
exportconstinitState={
//任務(wù)列表數(shù)據(jù)源
todos:[]
//導(dǎo)出用于操作當(dāng)前todos任務(wù)列表的純函數(shù)
exportconstreducer=(state,{type,payload})={
//[...state.todos,payload]追加數(shù)據(jù)
if('add'===type)return{...state,todos:[...state.todos,payload]}
if('del'===type)return{...state,todos:state.todos.filter(item=item.id!=payload)}
returnstate
}
父組件(App.jsx):
importReactfrom'react';
importTodofrom'./Todo';
constApp=()={
return(
div
Todo/
/div
exportdefaultApp;
ToDo組件:
importReact,{useReducer}from'react'
importFormfrom'./components/Form'
importListfrom'./components/List'
//導(dǎo)入reducer文件中的初始化數(shù)據(jù)和操作數(shù)據(jù)函數(shù)
import{initState,reducer}from'./reducer'
constTodo=()={
const[{todos},dispatch]=useReducer(reducer,initState)
return(
div
{/*表單項(xiàng)*/}
Formdispatch={dispatch}/
{/*任務(wù)項(xiàng)*/}
Listdispatch={dispatch}todos={todos}/
/div
exportdefaultTodo
表單項(xiàng)組件:
importReactfrom'react'
//表單項(xiàng)組件
constForm=({dispatch})={
//回車(chē)事件
constonEnter=evt={
if(evt.keyCode===13){
consttitle=evt.target.value.trim()
//todo每項(xiàng)中的數(shù)據(jù)
consttodo={
id:Date.now(),
title,
done:false
dispatch({type:'add',payload:todo})
evt.target.value=''
return(
div
inputonKeyUp={onEnter}/
/div
exportdefaultForm
任務(wù)項(xiàng)組件:
importReactfrom'react'
//任務(wù)項(xiàng)組件
constList=({todos,dispatch})={
constdel=id={
dispatch({type:'del',payload:id})
return(
d
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 城市藝術(shù)經(jīng)濟(jì)影響-洞察及研究
- 媒體從業(yè)人員個(gè)人整改問(wèn)題清單及整改措施
- 六年級(jí)英語(yǔ)教學(xué)雙師課堂計(jì)劃
- 湖北安陸一中2025屆物理高一第二學(xué)期期末經(jīng)典試題含解析
- 急性胰腺炎護(hù)理診斷及生活方式調(diào)整措施
- 高職教育課題研究心得體會(huì)
- 小學(xué)乒乓球社團(tuán)電子化管理計(jì)劃
- 2025屆江蘇省揚(yáng)州市江大橋高級(jí)中學(xué)高一物理第二學(xué)期期末監(jiān)測(cè)試題含解析
- 零售行業(yè)勞務(wù)派遣工作計(jì)劃和流程他
- 醫(yī)療機(jī)構(gòu)考勤制度范文
- 2024年中國(guó)高純鉑族金屬行業(yè)調(diào)查報(bào)告
- 蔣詩(shī)萌小品《誰(shuí)殺死了周日》臺(tái)詞完整版
- 職業(yè)暴露針刺傷應(yīng)急預(yù)案演練腳本-
- GB/T 7092-1993半導(dǎo)體集成電路外形尺寸
- GB/T 15909-2017電子工業(yè)用氣體硅烷
- 第一章有理數(shù)單元測(cè)試 人教版七年級(jí)數(shù)學(xué)上冊(cè)
- 門(mén)診病歷書(shū)寫(xiě)基本規(guī)范-課件
- 做好新形勢(shì)下群眾工作培訓(xùn)課件
- FMEA(失效模式分析)教程課件
- PEP小學(xué)英語(yǔ)單詞分類(lèi)匯總(含音標(biāo))
- NB∕T 10731-2021 煤礦井下防水密閉墻設(shè)計(jì)施工及驗(yàn)收規(guī)范
評(píng)論
0/150
提交評(píng)論