useContext

作用：简化context的获取返回

 

1.useContext可以帮助我们跨越组件层级直接传递变量，实现共享。

需要注意的是useContext和redux的作用是不同的！！！

useContext：解决的是组件之间值传递的问题

redux：是应用中统一管理状态的问题

但通过和useReducer的配合使用，可以实现类似Redux的作用。

2.Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

代码例：createContext 函数创建 context

直接在src目录下新建一个文件 Example.js,然后代码如下：

import React, { useState , useEffect } from 'react';

function Example(){

 

const [ count , setCount ] = useState(0);

return (

<div>

<p>You clicked {count} times</p>

<button onClick={()=>{setCount(count+1)}}>click me</button>

</div>

)}

 

export default Example;

引入渲染这个组件以后

再引入 createContext

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

const CountContext = createContext()

function Example(){

 

const [ count , setCount ] = useState(0);

 

return (

<div>

<p>You clicked {count} times</p>

<button onClick={()=>{setCount(count+1)}}>click me</button>

<CountContext.Provider value={count}>

</CountContext.Provider>

 

</div>

)}export default Example;

这段代码就相当于把count变量允许跨层级实现传递和使用了（也就是实现了上下文），当父组件的count变量发生变化时，子组件也会发生变化。

接下来我们就看看一个React Hooks的组件如何接收到这个变量。

useContext 接收上下文变量

已经有了上下文变量，剩下的就是如何接收了

接收这个直接使用 useContext 就可以，但是在使用前需要新进行引入useContext（不引入是没办法使用的）。

import React, { useState , createContext , useContext } from 'react';

引入后写一个Counter组件，只是显示上下文中的count变量代码如下：

　　function Counter(){

　　const count = useContext(CountContext) //一句话就可以得到count

　　return (<h2>{count}</h2>)}

得到后就可以显示出来了，但是要记得在<CountContext.Provider>的闭合标签中,代码如下。

　　<CountContext.Provider value={count}>

　　<Counter /></CountContext.Provider>