ReactuseReducer終極使用教程

第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ì)降低。

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