react 中的 context 使用方法

Contex 的 API 在新 react 版本中变动还是很大的，我们这里通过一个实例为大家讲解一下，如果以前没有接触过 context ,也可以借此机会了解一下 context 的强大之处。首先大家要明白一些概念，首先是 react 组件间传递数据是通过 props 向下（也就是想子组件传递），是单向传递的，从父级一层一层地通过 props 地向下传递到子子孙孙，有的时候我们组件一层一层的嵌套多层，这样这种方式一层一层传递麻烦，我们可不可以进行跃层传递，这就会用到 context。

建是我们创建简单的登录登出页面,

这定义 viewer 变量，未登录时其为 null，登录后为用户名，然后创建 logIn 和 logOut 方法分别对应登录和注销按钮。

下面代码相信大家并不陌生，一看就懂我就不赘述了，值得说是一下 Fragment 这个新特性，他的好处就是不会带来多余的 div。

看一下效果

然后我们在实际开发时，会对代码进行整理，将 LoginForm 拆分出来作为组件使用，然后再将 LoginForm 放 nav 组件中，这样从页面到 LoginForm 组件传递数据我们需要跨越 nav 组件，如果将一些变量或方法一层一层传递显得很麻烦，例如先传给 Nav 组件，然后再传递给 LoginForm 组件。

我们这里就会用到 context  这方法，先我们需要创建一个 context 对象，这个对象提供 provider 和 consumer ，通过名字应该不陌生，我们 java8 就看到类似的 API

然后创建我们 Provider 组件，从名字我们可以看出他是数据提供者，负责定义共享数据，在 Prodiver 组件中  value 属性用于定义会共享到其包含组件的值，这里包含 viewer 属性和 logIn 和 logOut 两个方法，注意包含子元素的标签为<context 名称.Provider>

然后我们修改刚刚提取出来的组件 LoginForm 在这里如果我们想使用 context 我们就需要将其内容包含在<context名称.Consumer> 这对标签中，标签接受一个函数，value 作为值会传递过来一遍我们调用

然后在最后调用Nav(包含LoginForm>的组件时，需要用 Provider 标签包裹一下。