React Hooks -- useContext父子组件传值

javafanwk

已于 2022-01-29 21:39:36 修改

阅读量1.1k

点赞数

分类专栏： react 前端文章标签： react.js vue.js javascript

于 2022-01-29 21:29:07 首次发布

本文链接：https://blog.csdn.net/fwk19840301/article/details/122747909

版权

前端同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

react

23 篇文章 0 订阅

订阅专栏

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

通过createContext创建
通过useContext使用

useContext：可访问全局状态，避免一层层的传递状态。这符合Redux其中的一项规则，就是状态全局化，并能统一管理。

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

function App(){
    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>
    )
}
function Counter(){
    const count = useContext(CountContext)  //一句话就可以得到count
    return (<h2>{count}</h2>)
}
export default App;

PS：

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