useContext详细说明与使用

一、什么是useContext

在Hooks之前，react开发者都是使用class组件进行开发，父子组件之间通过props传值。但是现在开始使用方法组件开发，没有constructor构造函数，也就没有了props的接收，所以父子组件的传值就成了一个问题。

于是，就有了useContext。

别忘记 useContext 的参数必须是 context 对象本身：

• 正确： useContext(MyContext)
• 错误： useContext(MyContext.Consumer)
• 错误： useContext(MyContext.Provider)

二、useContext作用

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

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

三、代码示例

1、创建父组件

import React,{useContext, useState, createContext} from 'react';
import {Button} from 'antd';
import '../../App.css';

const CountContext = createContext();

const TestContext = () =>{
    const [count, setCount] = useState(0);
    console.log(CountContext);
    console.log(useContext(CountContext));
    return(
      <div>
          <p>父组件点击次数：{count}</p>
          <Button type={"primary"} onClick={()=>setCount(count+1)}>点击+1</Button>
          <CountContext.Provider value={count}>
            <Counter/>
          </CountContext.Provider>
      </div>
  )
};

2、创建子组件

const Counter = () => {
    const count = useContext(CountContext);
    console.log(CountContext);
    // console.log(count);
    // console.log(useContext(CountContext));
    return (
        <div>
            <p>子组件获得的点击数量：{count}</p>
        </div>
    );
};

3、完整代码

import React,{useContext, useState, createContext} from 'react';
import {Button} from 'antd';
import '../../App.css';

const CountContext = createContext();

const TestContext = () =>{
    const [count, setCount] = useState(0);
    console.log(CountContext);
    console.log(useContext(CountContext));
    return(
      <div>
          <p>父组件点击次数：{count}</p>
          <Button type={"primary"} onClick={()=>setCount(count+1)}>点击+1</Button>
          <CountContext.Provider value={count}>
            <Counter/>
          </CountContext.Provider>
      </div>
  )
};

const Counter = () => {
    const count = useContext(CountContext);
    console.log(CountContext);
    // console.log(count);
    // console.log(useContext(CountContext));
    return (
        <div>
            <p>子组件获得的点击数量：{count}</p>
        </div>
    );
};

export default TestContext;

4、运行效果

点击+1的时候，父组件和子组件都能获取到当前点击的次数。