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

Posted wgchen~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P05:useContext 让父子组件传值更简单相关的知识,希望对你有一定的参考价值。

阐述

有了useStateuseEffect 已经可以实现大部分的业务逻辑了,但是React Hooks中还是有很多好用的Hooks函数的,比如 useContextuseReducer

在用类声明组件时,父子组件的传值是通过组件属性和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到知识点,完善自己的知识体系。

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;

以上是关于P05:useContext 让父子组件传值更简单的主要内容,如果未能解决你的问题,请参考以下文章

VUE父子组件之间的传值,以及兄弟组件之间的传值

.sync原理(Vue组件父子传值)

vue2 父子传值 (初学者)内容可能不太规范 欢迎大家指导

父子组件

Vue父子组件之间的传值

组件传值