React Context的使用 React Context能不能取代Redux？

官方给的解释如下

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

context和redux解决了什么问题？

用过React都会知道一个重要的概念：单向数据流，React App 遵循数据从上往下单一传递，如果需要子组件需要去改变父组件或者兄弟组件，只能通过event callback或者dispatch action去通知组件改变状态，父组件render之后再通过props把更新值传给子组件完成视图的更新。

当一个state变化影响多个组件更新视图时候，这个state就应该上升存到共有的父组件中，如果只有父子间1-2层之间的传递，那么state与callback通过props传递还是比较好处理的。但是试想一下如果中间还有很多wrapper，间隔着5~6层甚至更多的组件，props还这样一层层传下去的话，很容易造成不可预知的bug，并且让代码难以维护。

要解决上述提及到的这种”Props drilling”问题，通过一个集中的Data Store，把需要共享或更新共同状态的组件用HOC来连接Data Store,这样做我们不但遵从数据单一流动性，并且可以让组件快速获取数据，不用再一层层去传递。

Context API和Redux都解决了props存在的“只要是子组件需要的信息，即使父组件不需要，也必须先传给父组件然后一层层传到子组件”的问题。

如何使用 Context

下面我简单编写了一个操作用户信息的示例

1.首先定义我们的Context文件
test.js

import React, {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useReducer,
} from "react";

//actions
const LOGIN = "LOGIN";
const LOGOUT = "LOGOUT";
const UPDATE_USER_NAME = "UPDATE_USER_NAME";

//初始状态
const INITIAL_STATE = {};

const TestContext = createContext();

export function useTestContext() {
  return useContext(TestContext);
}

//reducer
function reducer(state, { type, payload }) {
  switch (type) {
    case LOGIN: {
      const { userInfo } = payload;
      return Object.assign({}, state, userInfo);
    }
    case UPDATE_USER_NAME: {
      const { userName } = payload;
      return Object.assign({}, state, { userName });
    }
    case LOGOUT:
      return {};
    default:
      throw Error(`Unexpected action type in TestContext reducer: '${type}'.`);
  }
}

export default function Provider({ children }) {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
  //登录
  const login = useCallback(
    (userInfo) =>
      dispatch({
        type: LOGIN,
        payload: {
          userInfo,
        },
      }),
    []
  );
  //退出
  const logOut = useCallback(
    () =>
      dispatch({
        type: LOGOUT,
      }),
    []
  );
  //更新userName
  const updateUserName = useCallback(
    (userName) =>
      dispatch({
        type: UPDATE_USER_NAME,
        payload: {
          userName,
        },
      }),
    []
  );
  return (
    <TestContext.Provider
      value={useMemo(() => [state, { login, logOut, updateUserName }], [
        logOut,
        login,
        state,
        updateUserName,
      ])}
    >
      {children}
    </TestContext.Provider>
  );
}

在App.js注入Context关系
App.js

import "./App.css";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import TestContextProvider from "./contexts/test"; //这里我取名test
import Mine from "./pages/Mine";
import Home from "./pages/Home";
function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/">Home</Link>
        <br />
        <br />
        <Link to="/mine">Mine</Link>
        <TestContextProvider>
          <Switch>
            <Route path="/" exact>
              <Home />
            </Route>
            <Route path="/mine" exact>
              <Mine />
            </Route>
          </Switch>
        </TestContextProvider>
      </Router>
    </div>
  );
}

export default App;

3.使用
Home.js

import React from "react";
import { useTestContext } from "../../contexts/test";
import "./styles.css";
function Home() {
  const [state, { login, logOut, updateUserName }] = useTestContext();
  const { userName } = state;
  return (
    <div className="home">
      <span>{userName}</span>
      <button
        onClick={() =>
          login({ userName: "小明", userAge: 22, userGender: "男" })
        }
      >
        login
      </button>
      <button onClick={logOut}>logOut</button>
      <button onClick={() => updateUserName("mason")}>updateUserName</button>
    </div>
  );
}
export default Home;

Mine.js

import React from "react";
import { useTestContext } from "../../contexts/test";
function Mine() {
  const [state] = useTestContext();
  const { userName } = state;
  return (
    <div>
      <h1>Mine</h1>
      <span>{userName}</span>
    </div>
  );
}
export default Mine;

一个简单的Context示例编写完成，它解决了组件之间共享数据的问题，可以和redux去做相同的事情

结合其他的hooks我们还可以编写一个这样的function

export function useLogin() {
  const [userInfo, { login }] = useTestContext();
  const { userName } = userInfo;
  useEffect(() => {
    //模拟请求
    async function fetch() {
      setTimeout(() => {
        login({ userName: "小红", userAge: 22, userGender: "男" });
      }, 2000);
    }
    if (userName !== "小红") {
      fetch();
    }
    fetch();
  }, [login, userName]);
  return userInfo;
}

使用

Login.js

import React from "react";
import { useLogin } from "../../contexts/test";
function Login() {
  const userInfo = useLogin();
  const { userName } = userInfo;
  return (
    <div>
      <h1>Login</h1>
      <span>{userName}</span>
    </div>
  );
}
export default Login;

使用hooks会发现一切数据的使用都变得那么理所当然
拥抱hooks！

最后总结一下context能否取代redux

我不觉得context的出现是为了干掉redux，充其量也只能说是补上了一块长期或缺功能，让React不需要依赖第三方flux组件情况下可以解决props drilling这个痛点。

redux强大不止redux本身，还有它强大的生态，以及一些中间件。

借鉴redux的维护者常挂嘴边的一句话，一百个案子有一百个不同的考量，选工具一向没有什么好与不好，能不能适合团队的需求才是最重要!

推荐阅读文章

https://www.sohu.com/a/229028038_609503