ReactuseReducer终极使用教程

第ReactuseReducer终极使用教程目录1.概述2.useReducer使用3.使用useReducer完成todolist列表功能

1.概述

useReducer这个Hooks在使用上几乎跟Redux一模一样，唯一缺点的就是无法使用redux提供的中间件。

使用hook函数后，一般情况下，一个组件组中的数据我们可以用useReducer来管理，而不是用redux来完成，redux一般存储公用数据，而不是把所有的数据都存储在里面，redux它是一个单一数据源，如果存储多个数据的话，性能会降低。

2.useReducer使用

importReact,{useReducer}from'react'

//useReducer它就是一个小型的redux，它几乎和redux是一样的，也可以管理数据

//初始化数据

constinitState={

count:100

//reducer纯函数中的state无需在定义函数时指定初始值，initState会赋值给reducer

//constreducer=(state,action)={}

//type,payload是从action中结构出来的

constreducer=(state,{type,payload})={

if(type==='add'){

return{...state,count:state.count+payload}

returnstate

constApp=()={

//state它就是初始化后数据的对象，状态

//dispatch它就是用来发送指令让reducer来修改state中的数据

//reducer它就是一个纯函数，用来修改initState初始化后数据状态函数

//initState初始化数据

const[state,dispatch]=useReducer(reducer,initState)

constaddCount=()={

//数据以改变就会触发useReducer中的reducer函数

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初始化数据

//如果useReducer它有第3个参数，则第2个参数就没有意义，它以第3个参数优先，第3个参数，惰性初始化，提升性能

//第3参数它是一个回调函数且一定要返回一个对象数据,当然你也可以直接返回一个值也可以，不建议

const[state,dispatch]=useReducer(reducer,null,()=({count:2000}))

constaddCount=()={

dispatch({type:'add',payload:2})

return(

div

h3App组件--{state.count}/h3

buttonaddCount}++++/button

/div

exportdefaultApp;

注意：惰性初始化可以提升性能，惰性初始化使得数据不会在一开始就进行初始化，而是在使用的时候再进行初始化。

3.使用useReducer完成todolist列表功能

reducer.js：

//导出初始化数据

exportconstinitState={

//任务列表数据源

todos:[]

//导出用于操作当前todos任务列表的纯函数

exportconstreducer=(state,{type,payload})={

//[...state.todos,payload]追加数据

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文件中的初始化数据和操作数据函数

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每项中的数据

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