React中的Context和useContext钩子

React中的Context

在之前的学习中，我们用组件传递参数都是通过props，一层一层传递下去的，但是并不是所有的结构都适用于这种方式，比如有时多个组件共用数据，Props一层层传递的方式实在是太笨拙和麻烦了，在后期维护也会带来很多的麻烦。

这时候就要介绍我们的新朋友了

它就是Context

Context在外层为我们提供了一种在不同组件间共享数据的方式，他不再拘泥于像props那样一层层的传递，而是在外层统一设置，这时内层的所有组件都可以访问到Context中存储的数据，就相当于在JS中设置了一个全局变量，谁都可以查看和更改。

创建一个Context

const MyContext = React.createContext(defaultContext)

React.createContext(defaultContext)用来创建一个Context对象，在创建时，我们要给他一个初始值作为参数，这个值可以是一个原始值或者一个js对象，在调用之后，它会返回一个Context对象，当以后我们想要访问Context中的数据时，就要用到这个对象。

由于Context对象 在不同的组件间使用，所以我们通常会将Context对象创建为一个模块，并导出

import React from 'react'

export default const TestContext = React.createContext({
  name:'孙悟空',
  age:18,
  gender:'男',
  sayHello:()=>{
    alert(this.name)
  }
})

如果想要访问到我们这个context对象中的数据，我们必须先将context引入当前组件中来，然后通过context对象来访问其中的数据

第一种方式

import React from 'react'
import TestContext from '../store/test-context'

const MyComponent=()=>{
  return (
  	<TestContext.Consumer>
    	{ctx=>{
        return (
        	<ul>
          	<li>{ctx.name}</li>
            <li>{ctx.age}</li>
            <li>{ctx.gender}</li>
          </ul>
        )
      }}
    </TestContext.Consumer>
  )
}

export default MyComponent

访问Context之前 我们要先引入之前已经创建好的context

Context对象中有一个属性叫做Consumer，翻译过来就是消费者，如果你了解生产消费者模式这里就比较好理解了，如果没接触过，你可以将Consumer理解为数据的获取工具。你可以将它理解为一个特殊的组件，所以你需要这样使用它。

Consumer的标签体必须是一个函数，这个函数会在组件渲染时调用并且将Context中的数据作为参数传递进函数，函数返回值将会作为组件直接渲染进页面。这里我们将Context命名为ctx，在回调中我们可以通过ctx.xx访问到Context对象中存储的数据，如果要访问多个context 使用多个Consumer嵌套即可

通过Consumer使用Context实在是不够优雅，所以React还未我们准备了一个钩子函数useContext(),我们只需要将Context对象作为参数传递给钩子函数，它就会直接给我们返回Context中存储的数据

import React,{useContext} from 'react'
import TestComponents from '../store/test-cotnext'

const MyContext = ()=>{
  const ctx=useContext(TestComponents)
  return (
   <ul>
            <li>{ctx.name}</li>
            <li>{ctx.age}</li>
            <li>{ctx.gender}</li>
        </ul>
  )
}

export default MyComponent

像上边那样使用Context并不十分常见，因为这种方式中Context的值是写死的，并不是在组件中指定的。所以React还提供了Provider，用来在组件中指定Context值：

import React from "react";
import MyComponent from "./component/MyComponent";
import TestContext from "./store/test-context";

const App = () => {
    return <TestContext.Provider value={{name:'猪八戒', age:28, gender:'男'}}>
        <MyComponent/>
    </TestContext.Provider>;
};

export default App;

Provider译为生产者，和Consumer消费者对应。Provider会设置在外层组件中，通过value属性来指定Context的值。这个Context值在所有的Provider子组件中都可以访问。Context的搜索流程和JS中函数作用域类似，当我们获取Context时，React会在它的外层查找最近的Provider，然后返回它的Context值。如果没有找到Provider，则会返回Context模块中设置的默认值。