ReactuseReducer終極使用教程

第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中結構出來的

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ù)它是一個回調函數(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={

//任務列表數(shù)據(jù)源

todos:[]

//導出用于操作當前todos任務列表的純函數(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}/

{/*任務項*/}

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

任務項組件：

importReactfrom'react'

//任務項組件

constList=({todos,dispatch})={

constdel=id={

dispatch({type:'del',payload:id})

return(

d