P05：useContext 让父子组件传值更简单

以你之姓@ 2023-10-06 20:59 23阅读 0赞

#### React Hooks ####

*  阐述
 *  createContext 函数创建 context
 *  useContext 接收上下文变量

## 阐述 ##

有了`useState` 和 `useEffect` 已经可以实现大部分的业务逻辑了，但是React Hooks中还是有很多好用的Hooks函数的，比如 `useContext` 和 `useReducer`。

在用类声明组件时，父子组件的传值是通过组件属性和props进行的，那现在使用方法(Function)来声明组件，已经没有了constructor 构造函数也就没有了props的接收，那父子组件的传值就成了一个问题。

React Hooks 为我们准备了useContext。本文就带大家学习一下useContext，它可以帮助我们跨越组件层级直接传递变量，实现共享。需要注意的是useContext和redux的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但通过和useReducer的配合使用，可以实现类似Redux的作用。

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

## createContext 函数创建 context ##

直接在 `src` 目录下新建一个文件 `Example6.js`，然后拷贝Example.js里的代码，并进行修改，删除路由部分和副作用的代码，只留计数器的核心代码就可以了。

`ReactHooksDemo\demo01\src\Example6.js`

import React, {
         useState , useEffect } from 'react';
    
    function Example6(){
        
        const [ count , setCount ] = useState(0);
        return (
            <div>
                <p>You clicked {
        count} times</p>
                <button onClick={
        ()=>{
        setCount(count+1)}}>click me</button>
            </div>
        )
    }
    
    export default Example6;

然后修改一下 `index.js` 让它渲染这个 `Example6.js` 组件，修改的代码如下：

`ReactHooksDemo\demo01\src\index.js`

import React from 'react';
    import ReactDOM from 'react-dom';
    import Example from './Example6';
    
    ReactDOM.render(<Example />, document.getElementById('root'));

之后在 `Example6.js` 中引入createContext函数，并使用得到一个组件，然后在return方法中进行使用。

先看代码，再解释。

import React, {
         useState , createContext } from 'react';
    //===关键代码
    const CountContext = createContext()
    
    function Example6(){
        
        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 Example6;

这段代码就相当于把 `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>

其实 useContext 的用法比以前简单很多，既然简单，就没必要讲解的那么难，希望小伙伴这节课都能get到知识点，完善自己的知识体系。

![在这里插入图片描述][61e25718fc614acaa5ef34395a54a4bd.gif_pic_center]

`ReactHooksDemo\demo01\src\Example6.js`

import React, {
         useState , createContext , useContext } from 'react';
    
    //===关键代码
    const CountContext = createContext()
    
    function Counter(){
        
        const count = useContext(CountContext)  //一句话就可以得到count
        return (<h2>{
        count}</h2>)
    }
    
    function Example6(){
        
        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}>
                    <Counter />
                </CountContext.Provider>
            </div>
        )
    }
    export default Example6;

[61e25718fc614acaa5ef34395a54a4bd.gif_pic_center]: https://img-blog.csdnimg.cn/61e25718fc614acaa5ef34395a54a4bd.gif#pic_center