React hooks ——useContext初学

一、useContext 的作用

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

需要注意的是 useContext和 redux的作用是不同的！！！
useContext：解决的是组件之间值传递的问题
redux：是应用中统一管理状态的问题
但通过和 useReducer的配合使用，可以实现类似 Redux的作用。

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

3.直接上代码

公共封装：通过createContext 函数创建 CountContext对象 ， 在utils文件夹下创建一个index.ts文件

//index.ts
import { createContext } from 'react';
const CountContext = createContext(0)
export default CountContext 

父组件：直接在views目录下新建一个文件 example.tsx作为父组件,在组件中导入index.ts中的CountContext ，并使用标签的形式引用

//example.tsx
import React, { useState , createContext } from 'react';
import CountContext  from '../utils/index'  //这块很重要
import Counter from './counter'
function Example(){
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button> //点击后count在上次点击数的基础上+1
            <CountContext.Provider value={count}> //在这里使用，count为传给子组件的数据
               <Counter />     //对子组件的引用
            </CountContext.Provider>

        </div>
    )
}
export default Example;

子组件：新建一个counter.tsx文件，显示父组件中的点击总次数count，代码如下：

//counter.tsx
import React, { useState , useContext } from 'react';
import CountContext  from ../utils/index' //重要
function Counter(){
    const count = useContext(CountContext)    //重要
    return (<h2>{count}</h2>)
} 
export default Counter

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

<CountContext.Provider value={count}>
    <Counter />
</CountContext.Provider>

总结：

1.把创建context对象的createContext方法，需要作为一个公共部分去封装起来；

2.在父组件和子组件中直接引入封装的context对象

3.父组件中引入后，直接使用<CountContext.Provider>双标签形式引用context，并以标签的value属性值作为对子组件的传参

4.子组件的标签 需要放在父组件的<CountContext.Provider>中

5.子组件引入context对象后，继续引入useContext 。在函数组件中 定义一个变量，变量值为useContext 方法，并将context对象作为参数传入。变量则为父组件共享给子组件的所有信息；