如果您觉得我们写得还不错,记得 点赞 + 关注 + 评论 三连,鼓励我们写出更好的教程💪
随着应用状态越来越复杂,我们迫切需要状态与数据流管理的解决方案。熟悉 React 开发的同学一定听说过 Redux,而在这篇文章中,我们将通过 useReducer + useContext 的组合实现一个简易版的 Redux。首先,我们将带你重新认识“老朋友”useState,并借此引出这篇文章的主角:Reducer 函数与 useReducer 钩子,并通过实战一步步带你理清数据流和状态管理的基本思想。
useState:柳暗花明
欢迎继续阅读《用动画和实战打开 React Hooks 系列》:
如果你想要直接从这一篇开始学习,那么请克隆我们为你提供的源代码:
git clone -b third-part https://github.com/tuture-dev/covid-19-with-hooks.git
# 如果你访问 GitHub 不流畅,我们还提供了 Gitee 地址
git clone -b third-part https://gitee.com/tuture/covid-19-with-hooks.git
在这第三篇文章中,我们将首先来重温一下 useState
。在之前的两篇教程中,我们可以说和 useState
并肩作战了很久,是我们非常“熟悉”的老朋友了。但是回过头来,我们真的足够了解它吗?
一个未解决的问题
你很有可能在使用 useState
的时候遇到过一个问题:通过 Setter 修改状态的时候,怎么读取上一个状态值,并在此基础上修改呢?如果你看文档足够细致,应该会注意到 useState
有一个函数式更新(Functional Update)的用法,以下面这段计数器(代码来自 React 官网)为例:
function Counter({
initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {
count}
<button onClick={
() => setCount(initialCount)}>Reset</button>
<button onClick={
() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={
() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}
可以看到,我们传入 setCount
的是一个函数,它的参数是之前的状态,返回的是新的状态。熟悉 Redux 的朋友马上就指出来了:这其实就是一个 Reducer 函数。
Reducer 函数的前生今世
Redux 文档里面已经详细地阐述了 Reducer 函数,但是我们这里将先回归最基础的概念,暂时忘掉框架相关的知识。在学习 JavaScript 基础时,你应该接触过数组的 reduce
方法,它可以用一种相当炫酷的方式实现数组求和:
const nums = [1, 2, 3]
const value = nums.reduce((acc, next) => acc + next, 0)
其中 reduce
的第一个参数 (acc, next) => acc + next
就是一个 Reducer 函数。从表面上来看,这个函数接受一个状态的累积值 acc
和新的值 next
,然后返回更新过后的累积值 acc + next
。从更深层次来说,Reducer 函数有两个必要规则:
- 只返回一个值
- 不修改输入值,而是返回新的值
第一点很好判断,其中第二点则是很多新手踩过的坑,对比以下两个函数:
// 不是 Reducer 函数!
function buy(cart, thing) {
cart.push(thing);
return cart;
}
// 正宗的 Reducer 函数
function buy(cart, thing) {
return cart.concat(thing);
}
上面的函数调用了数组的 push
方法,会就地修改输入的 cart
参数(是否 return
都无所谓了),违反了 Reducer 第二条规则,而下面的函数通过数组的 concat
方法返回了一个全新的数组,避免了直接修改 cart
。
我们回过头来看之前 useState
的函数式更新写法:
setCount(prevCount => prevCount + 1);
是不是一个很标准的 Reducer?
最熟悉的陌生人
我们在前两篇教程中大量地使用了 useState
,你可能就此认为 useState
应该是最底层的元素了。但实际上在 React 的源码中,useState
的实现使用了 useReducer
(本文的主角,下面会讲到)。在 React 源码中有这么一个关键的函数 basicStateReducer
(去掉了源码中的 Flow 类型定义):
function basicStateReducer(state, action) {
return typeof action === 'function' ? action(state) : action;
}
于是,当我们通过 setCount(prevCount => prevCount + 1)
改变状态时,传入的 action
就是一个 Reducer 函数,然后调用该函数并传入当前的 state
,得到更新后的状态。而我们之前通过传入具体的值修改状态时(例如 setCount(5)
),由于不是函数,所以直接取传入的值作为更新后的状态。
提示
这里选取的是 React v16.13.1 的源码,但是整体的实现应该已经趋于稳定,原理上不会相差太多。
听上去还是有点迷迷糊糊?又到了我们的动画环节。首先,我们传入的 action
是一个具体的值:
当传入 Setter 的是一个 Reducer 函数的时候:
是不是一下子就豁然开朗了?
实战环节
这一步要写的代码比较多(可自行复制粘贴哈),我们要实现如下图所示的历史趋势图展示效果:
注意到我们展示了三个历史趋势(确诊病例 Cases、死亡病例 Deaths 和治愈病例 Recovered),并且每张历史趋势图可以调节过去的天数(从 0 到 30 天)。
实现历史趋势图
首先,让我们来实现历史曲线图 HistoryChart
组件。创建 src/components/HistoryChart.js
组件,代码如下:
// src/components/HistoryChart.js
import React from "react";
import {
AreaChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
Area,
} from "recharts";
const TITLE2COLOR = {
Cases: "#D0021B",
Deaths: "#4A4A4A",
Recovered: "#09C79C",
};
function HistoryChart({
title, data, lastDays, onLastDaysChange }) {
const colorKey = `color${
title}`;
const color = TITLE2COLOR[title];
return (
<div>
<AreaChart
width={
400}
height={
150}
data={
data.slice(-lastDays)}
margin={
{
top: 10, right: 30, left: 10, bottom: 0 }}
>
<defs>