作者 Austin Johnston, 翻译,侵删React Hooks - A deeper dive featuring useContext and useReducer | TestDriven.io

这篇文章的主要目的是让你了解 `useContent` 和 `useReducer` 如何共同作用而实现 React 应用简洁而高效的状态管理.

新的 Hooks API 具备很优秀的特性, 他潜在的消除了状态管理库的需求(例如Redux或Flux)，更厉害的是，我们可以通过函数组件完成，而不需要类组件，仅仅是javaScript就足够了。

首先, 将概述"pre-hooks" Context API, 最好的示例方式就是在 react 应用中实践, 本文会将一个基础示例重构以实现 `useContext`, 然后从 `useContext` 过渡, 围绕 reducer 函数的概念去实现 `useReducer`, 以及使用它来管理复杂的状态, 在对这两个 hooks 有了深入的了解之后, 结合他们创建一个 react 独有的状态管理工具。

致读者

这是一个中级教程，面向具有以下基本知识的 React 开发人员：

1.  React 数据流
2. `useState` 和 `useEffect` hooks
3.  全局的状态管理工具(例如 Redux 或 Flux) 和准则
4.  React Context API

如果您是 React hooks 的新手，请查看React Hook 文档。

学习目标

在本教程结束时，您将能够：

1. 解释什么是 context
2. 确定何时应该实现 context
3. 通过 useContext hook 实现 context
4. 确定何时实现 useReducer
5.  为组件状态管理实现 useReducer 
6. 利用 useReducer 和 useContext 作为应用程序状态管理工具
7. 通过实现 hook 简化 React

项目总览

演示的项目是一个"竞赛系列"的管理工具，在最后，将会用 `useContent` 和 `useReducer` 实现应用的状态管理, 文章开头项目的当前状态不会使用任何状态管理库, 也没有实现 `Context` 或 Hooks APIs,  它只通过 props 来传递逻辑, 本文不会对整个项目进行分解, 而是着重于重构实现 useContext 和 useReduce r的状态管理所必需的部分。

完整的项目代码在这里

什么是比赛系列管理工具？

简单地说，一个比赛系列有多个比赛和多个参与者（用户）。不是所有的用户都参加了每一场比赛。该应用程序将作为一个管理工具，允许管理员访问系列中的比赛列表和用户列表。当管理员登录并选择查看比赛列表时，他们将能够看到系列中的所有比赛。从该列表中选择一个比赛将显示参加该比赛的注册用户。相反，当选择查看用户列表时，管理员还可以查看特定用户正在参加的比赛。

回顾: 基础 hooks

如果您不熟悉Hooks API，请从这里开始。Hooks 允许您访问状态和生命周期方法，并可以在函数组件中使用许多其他很棒的技巧而不需要编写类组件。如果你想打好不编写类组件的基础，就从 `useState` 和 `useEffect` 入手吧。

1. `useState`：允许访问和控制函数组件中的状态。以前，只有基于类的组件可以访问状态。
2. `useEffect`：允许抽象访问函数组件中 React 的生命周期方法。您不会按名称调用各个生命周期方法，但是您可以通过更函数式和更简洁的代码获得类似的控制。

列如: 

```import React, { useState, useEffect } from 'react';
export const SomeComponent = () = {
  const [ DNAMatch, setDNAMatch ] = useState(false);
  const [ name, setName ] = useState(null);
  useEffect( () = > {
      if (name) {
          setDNAMatch(true);
          setName(name);
          localStorage.setItem('dad',name);
       }
   }, [DNAMatch] );
   return (
      // ...
    );
};```

```

console.log(lkk)

```