React Context介绍和使用

原文链接：https://www.robinwieruch.de/react-context

我是前言

React Context是个很强悍的功能。如果你的应用在逐步增大，试试它准没错。许多著名的第三方库也在使用它，例如Redux。

当你的应用控件层级很多，有时候需要把Props逐级传递，尤其是把一个Props从顶层传递到最底层，而中间的控件又不需要用这个Props的时候，React Context就显现出它的威力了。

本文将介绍React Context的使用方法，并附带例子。

为什么要用（Why）

在你的工程中，你肯定有过把一个Props从父控件逐级传递给一个很深的子控件的经历。

如下：

          +----------------+
          |                |
          |        A       |
          |        |Props  |
          |        v       |
          |                |
          +--------+-------+
                   |
         +---------+-----------+
         |                     |
         |                     |
+--------+-------+    +--------+-------+
|                |    |                |
|                |    |        +       |
|       B        |    |        |Props  |
|                |    |        v       |
|                |    |                |
+----------------+    +--------+-------+
                               |
                      +--------+-------+
                      |                |
                      |        +       |
                      |        |Props  |
                      |        v       |
                      |                |
                      +--------+-------+
                               |
                      +--------+-------+
                      |                |
                      |        +       |
                      |        |Props  |
                      |        C       |
                      |                |
                      +----------------+

这种情况下，中间每个控件都得去帮忙传递Props，尽管他们用不到这个Props。

React Context可以来帮你摆平这种混乱场景。不需要逐级传递，只需要在用这个Props的自定义控件中手到擒来，按需消费。你可以理解成：有一个全局控件在context中存储着这些Props。

          +----------------+
          |                |
          |       A        |
          |                |
          |     Provide    |
          |     Context    |
          +--------+-------+
                   |
         +---------+-----------+
         |                     |
         |                     |
+--------+-------+    +--------+-------+
|                |    |                |
|                |    |                |
|       B        |    |        D       |
|                |    |                |
|                |    |                |
+----------------+    +--------+-------+
                               |
                      +--------+-------+
                      |                |
                      |                |
                      |        E       |
                      |                |
                      |                |
                      +--------+-------+
                               |
                      +--------+-------+
                      |                |
                      |        C       |
                      |                |
                      |     Consume    |
                      |     Context    |
                      +----------------+

这种情况应用在什么场景呢？

举个简单的例子： 假如有一个主题颜色，一个界面的很多子控件都需要用到它。这个时候如果从父控件向每一个子控件逐级传递，那就很麻烦。这个时候React Context就可以上场了。

React Context需要谁来提供的，又是谁来使用？

顶层控件提供，例如结构图中的A。

需要使用这个Props的控件使用，例如结构图中的C。

使用方法（How）

首先，你得创建一个React Context控件，以供提供者和使用者调用。

在你使用React的createContext函数创建了context的时候，你可以赋给它一个初始值，这个初始值可以使null。

// src/ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext(null);
export default ThemeContext;

其次，控件A利用上面创建的控件提供一个context。这个时候可以提供初始值，这个初始值可以是任何值。如果这个值是个可读写的状态值，那么可以在接收使用这个值的控件中更改。

// src/ComponentA.js
import React from 'react';
import ThemeContext from './ThemeContext';
const A = () => (
  <ThemeContext.Provider value="green">
    <D />
  </ThemeContext.Provider>
);

这里提供了一个要传递的值：value=“green”。 这个值将要在C中使用。

// src/ComponentC.js
import React from 'react';
import ThemeContext from './ThemeContext';
const C = () => (
  <ThemeContext.Consumer>
    {value => (
      <p style={{ color: value }}>
        Hello World
      </p>
    )}
  </ThemeContext.Consumer>
);

C直接从context中取出value。

什么情况下使用（When）

什么情况下使用？简单概括以下两种情况：

• 界面上有很多层级控件的时候，如果你想从最顶层向底层控件传递一个Props，而中间的控件又不需要使用这个Props的时候。（其实上面已经说过了，外国人好啰嗦^_）
• 当一个全局状态需要管理的时候（想象一下状态机），React Context可以用于全局状态管理。

附上一个例子： 例子github

翻译能力一般，请多包含^ _ ^。再次感谢原作者！