P06:useReducer介绍与使用方法
在之前的文章我们学习了useContext
函数,那本文就带大家学习一下useReducer
,因为他们两个很像,并且合作可以完成类似的 Redux 库的操作。在开发中使用useReducer
可以让代码具有更好的可读性和可维护性,并且会给测试提供方便,所以我们有必要彻底的学习一下useReducer
。本文我们只是简单的学习一下useReducer
语法和使用方法,尽量避免Redux
的一些操作。这样讲更容易让不了解Redux
的小伙伴接受。
reducer 是什么?
为了更好的理解useReducer
,所以先要了解 JavaScript 里的Redcuer
是什么。它的兴起是从Redux
广泛使用开始的,但不仅仅存在Redux
中,可以使用 JavaScript 来完成Reducer
操作。那reducer
其实就是一个函数,这个函数接收两个参数,一个是状态,一个用来控制业务逻辑的判断参数。我们举一个最简单的例子。
function countReducer(state, action) { switch(action.type) { case 'add': return state + 1; case 'sub': return state - 1; default: return state; } }
上面的代码就是 Reducer,你主要理解的就是这种形式和两个参数的作用,一个参数是状态,一个参数是如何控制状态。
useReducer 的使用
了解reducer
的含义后,就可以讲useReducer
了,它也是React hooks
提供的函数,可以增强我们的Reducer
,实现类似 Redux 的功能。我们新建一个Example5.js
的文件,然后用useReducer
实现计数器的加减双向操作。
import React, { useReducer } from 'react'; function ReducerDemo(){ const [ count , dispatch ] =useReducer((state,action)=>{ switch(action){ case 'add': return state+1 case 'sub': return state-1 default: return state } },0) return ( <div> <h2>现在的分数是{count}</h2> <button onClick={()=>dispatch('add')}>Increment</button> <button onClick={()=>dispatch('sub')}>Decrement</button> </div> ) } export default ReducerDemo
这段代码是 useReducer 的最简单实现了,这时候可以在浏览器中实现了计数器的增加减少。
修改index.js
文件,让ReducerDemo
组件起作用。
import React from 'react'; import ReactDOM from 'react-dom'; import Example from './Example5' ReactDOM.render(<Example />, document.getElementById('root'));
GIF 效果演示:
总结
本文内容就这么多,主要是想让大家了解一下useReducer
,在接下来的文章教程中我会用一个具体的例子,实现类似Redux
的用法。别走开,下节更精彩。
码云笔记 » P06:useReducer介绍与使用方法