一、Reducer Hook

Flux：Facebook出品的一个数据流框架

规定了数据是单向流动的
数据存储在数据仓库中（目前，可以认为state就是一个存储数据的仓库）
action是改变数据的唯一原因（本质上就是一个对象，action有两个属性）
1. type：字符串，动作的类型
2. payload：任意类型，动作发生后的附加信息
3. 例如，如果是添加一个学生，action可以描述为：
  1. { type:"addStudent", payload: {学生对象的各种信息} }
4. 例如，如果要删除一个学生，action可以描述为：
  1. { type:"deleteStudent", payload: 学生id }
具体改变数据的是一个函数，该函数叫做reducer
1. 该函数接收两个参数
  1. state：表示当前数据仓库中的数据
  2. action：描述了如何去改变数据，以及改变数据的一些附加信息
2. 该函数必须有一个返回结果，用于表示数据仓库变化之后的数据
  1. Flux要求，对象是不可变的，如果返回对象，必须创建新的对象
3. reducer必须是纯函数，不能有任何副作用
如果要触发reducer，不可以直接调用，而是应该调用一个辅助函数dispatch
1. 该函数仅接收一个参数：action
2. 该函数会间接去调用reducer，以达到改变数据的目的

//useReducer
import { useState } from "react"
/*** 通用的useReducer函数* @param {function} reducer reducer函数，标准格式* @param {any} initialState 初始状态* @param {function} initFunc 用于计算初始值的函数*/
export default function useReducer(reducer, initialState, initFunc) {const [state, setState] = useState(initFunc? initFunc(initialState): initialState)function dispatch(action) {const newState = reducer(state, action)console.log(`日志：n的值  ${state}->${newState}`)setState(newState);}return [state, dispatch];
}

//App
import React from 'react'
import useReducer from './Hooks/useReducer';
function reducer(state,action) {switch(action.type){case "increase":return state+1;case "decrease":if(state === 0){return 0}return state - 1default:return state;}
}
export default function App() {const [n,dispatch] = useReducer(reducer, 10,()=>{return 100})return (<div><button onClick={()=>{dispatch({type: "decrease"})}}>-</button><span>{n}</span><button onClick={()=>{dispatch({type: "increase"})}}>+</button></div>)
}

当然，react已经给我们实现，我们可以直接使用

import React,{useReducer} from 'react'function reducer(state,action) {switch(action.type){case "increase":return state+1;case "decrease":if(state === 0){return 0}return state - 1default:return state;}
}
export default function App() {const [n,dispatch] = useReducer(reducer, 10)return (<div><button onClick={()=>{dispatch({type: "decrease"})}}>-</button><span>{n}</span><button onClick={()=>{dispatch({type: "increase"})}}>+</button></div>)
}

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！

react学习—Reducer Hook相关推荐

react学习—ImperativeHandle Hook
ImperativeHandle Hook 一.ImperativeHandle Hook 1.情景想象 2.功能实现一.ImperativeHandle Hook 1.情景想象如果某种情况下你需 ...
react学习—ref Hook
ref Hook 一.ref Hook 1.useRef 2.其它使用一.ref Hook 1.useRef useRef函数: 一个参数:默认值返回一个固定的对象,{current: 值} im ...
React学习笔记（八）--- HooK
一.简介在之前的学习中,我们了解到只有类组件中才能使用 state,函数组件是无法使用的.但Hook的出现,改变这种情况,Hook是React 16.8 版本的新增特性,可以让我们在函数组件中使 ...
React 学习笔记 —— Ref Hook
用以下三种方式创建 Ref 都可以 import React from 'react'export default function Count () {const [count ,setCount] ...
React+DvaJS 之 hook 路由权限控制
博客学院下载 GitChat TinyMind 论坛 APP 问答商城 VIP 活动招聘 ITeye 写博客发Chat 登录注册原 React+DvaJS 之 hook 路由权限控制 20 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
react项目中的参数解构_一天入门React学习心得
一天入门React学习心得阅读前必读本文写的仓促,算是一个学习笔记吧,算是一个入门级的学习文章.如果你刚刚入门,那么可能一些入门的视频可能更加适合你.但如果具备一些知识,比如Vue,那么视频就不适 ...
React官网Hook API 索引模块知识点整理（五）
react版本:16.13.1 1. 概览基础 Hook useState useEffect useContext 额外的 Hook useReducer useCallback useMemo ...
React学习笔记7：React使用注意事项
1. setState setState更新状态的2种写法方式一:setState(stateChange, [callback])------对象式的setState stateChange为状态 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

react学习—Reducer Hook

Reducer Hook

一、Reducer Hook

react学习—Reducer Hook相关推荐

最新文章

热门文章