




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
第ReactuseReducer終極使用教程目錄1.概述2.useReducer使用3.使用useReducer完成todolist列表功能
1.概述
useReducer這個Hooks在使用上幾乎跟Redux一模一樣,唯一缺點的就是無法使用redux提供的中間件。
使用hook函數(shù)后,一般情況下,一個組件組中的數(shù)據(jù)我們可以用useReducer來管理,而不是用redux來完成,redux一般存儲公用數(shù)據(jù),而不是把所有的數(shù)據(jù)都存儲在里面,redux它是一個單一數(shù)據(jù)源,如果存儲多個數(shù)據(jù)的話,性能會降低。
2.useReducer使用
importReact,{useReducer}from'react'
//useReducer它就是一個小型的redux,它幾乎和redux是一樣的,也可以管理數(shù)據(jù)
//初始化數(shù)據(jù)
constinitState={
count:100
//reducer純函數(shù)中的state無需在定義函數(shù)時指定初始值,initState會賦值給reducer
//constreducer=(state,action)={}
//type,payload是從action中結(jié)構(gòu)出來的
constreducer=(state,{type,payload})={
if(type==='add'){
return{...state,count:state.count+payload}
returnstate
constApp=()={
//state它就是初始化后數(shù)據(jù)的對象,狀態(tài)
//dispatch它就是用來發(fā)送指令讓reducer來修改state中的數(shù)據(jù)
//reducer它就是一個純函數(shù),用來修改initState初始化后數(shù)據(jù)狀態(tài)函數(shù)
//initState初始化數(shù)據(jù)
const[state,dispatch]=useReducer(reducer,initState)
constaddCount=()={
//數(shù)據(jù)以改變就會觸發(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個參數(shù),則第2個參數(shù)就沒有意義,它以第3個參數(shù)優(yōu)先,第3個參數(shù),惰性初始化,提升性能
//第3參數(shù)它是一個回調(diào)函數(shù)且一定要返回一個對象數(shù)據(jù),當然你也可以直接返回一個值也可以,不建議
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ù)不會在一開始就進行初始化,而是在使用的時候再進行初始化。
3.使用useReducer完成todolist列表功能
reducer.js:
//導出初始化數(shù)據(jù)
exportconstinitState={
//任務(wù)列表數(shù)據(jù)源
todos:[]
//導出用于操作當前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'
//導入reducer文件中的初始化數(shù)據(jù)和操作數(shù)據(jù)函數(shù)
import{initState,reducer}from'./reducer'
constTodo=()={
const[{todos},dispatch]=useReducer(reducer,initState)
return(
div
{/*表單項*/}
Formdispatch={dispatch}/
{/*任務(wù)項*/}
Listdispatch={dispatch}todos={todos}/
/div
exportdefaultTodo
表單項組件:
importReactfrom'react'
//表單項組件
constForm=({dispatch})={
//回車事件
constonEnter=evt={
if(evt.keyCode===13){
consttitle=evt.target.value.trim()
//todo每項中的數(shù)據(jù)
consttodo={
id:Date.now(),
title,
done:false
dispatch({type:'add',payload:todo})
evt.target.value=''
return(
div
inputonKeyUp={onEnter}/
/div
exportdefaultForm
任務(wù)項組件:
importReactfrom'react'
//任務(wù)項組件
constList=({todos,dispatch})={
constdel=id={
dispatch({type:'del',payload:id})
return(
d
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 自助洗車客戶管理辦法
- 藥品品種注冊管理辦法
- 藥品短期供應(yīng)管理辦法
- 藥品采購議價管理辦法
- 車輛維修招標管理辦法
- 西安地震預警管理辦法
- 西服輔料庫存管理辦法
- 西藏小區(qū)滴灌管理辦法
- 設(shè)施材料周轉(zhuǎn)管理辦法
- 證書暫停注冊管理辦法
- 水庫安保服務(wù)方案
- INSAR技術(shù)在城市地面沉降監(jiān)測中的應(yīng)用
- 產(chǎn)品審核VDA6.5培訓課件
- 艾滋病乙肝梅毒知識講座
- 九年級化學下冊 第11單元 課題2 化學肥料課件 新人教版
- 暖氣片報價單范本
- 臨床醫(yī)學研究中心年度考核細則
- PSSE軟件操作說明
- 22S803 圓形鋼筋混凝土蓄水池
- 級配碎石試驗段施工總結(jié)報告
- 人力資源管理概論第三章員工招聘、篩選與錄用-董克用
評論
0/150
提交評論