useContext 让父子组件传值更简单（五）

有了useState和useEffect已经能够实现大部分的业务逻辑了，可是React Hooks中仍是有不少好用的Hooks函数的，好比useContext和useReducer。

在用类声明组件时，父子组件的传值是经过组件属性和props进行的，那如今使用方法(Function)来声明组件，已经没有了constructor构造函数也就没有了props的接收，那父子组件的传值就成了一个问题。React Hooks 为咱们准备了useContext。这节课就学习一下useContext，它能够帮助咱们跨越组件层级直接传递变量，实现共享。须要注意的是useContext和redux的做用是不一样的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但经过和useReducer的配合使用，能够实现相似Redux的做用。

这就比如玩游戏时有不少英雄，英雄的最总目的都是赢得比赛，可是做用不一样，有负责输出的，有负责抗伤害的，有负责治疗的。

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

createContext 函数建立context

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

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

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

而后修改一下index.js让它渲染这个Example4.js组件，修改的代码以下。

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

以后在Example4.js中引入createContext函数，并使用获得一个组件，而后在return方法中进行使用。先看代码，而后我再解释。

import React, { useState , createContext } from 'react';
//===关键代码
const CountContext = createContext()

function Example4(){
    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 Example4;

这段代码就至关于把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到知识点，完善本身的知识体系。

转自：https://jspang.com/posts/2019/08/12/react-hooks.html