React Hook: 使用Context和useReducer代替Redux (Typescript)

14. React Hook: useContext + useReducer代替redux

0. 背景

当组件嵌套很深，通过一直传参的方法来实现会非常麻烦，为了共享一些参数，一般可以通过Context来实现参数的托管，如果要对部分参数进行修改，可以通过redux或者mobx来做状态的集中管理。在有了React hooks之后，通过Context + useReducer完成Redux的功能，这里做一个简单的记录。

1. react hook useContext

在没有useContext的时候，类组件调用Context需要三要素

• CreateContext

• Context.Provider

• Context.Consumer

其简单的使用方法可参考React Context的简单使用

当有了useContext，在函数式组件中也可以调用Context了，并且useContext可以直接获得最近的指定的Context中传递的参数，相当于代替了Context.Consumer, 因此，这个时候的三要素转换为了

• CreateContext
• Context.Provider
• useContext

2. react hook useContext例子

1. 简单例子效果

2. SwitchHeader组件的封装

方法一：使用Context传统的传参方式实现

import React, { createContext, useState } from "react";

//　SwitchHeader.tsx
interface Props {
  headerRender: () => JSX.Element;
}

export const SwitchHeader: React.FC = props => {
  const { headerRender, children } = props;
  const [isShow, setShow] = useState(true);

  const showHeader = () => setShow(true);
  const hiddenHeader = () => setShow(false);

  return (