zoukankan      html  css  js  c++  java
  • useContext

    在用类声明 组件时,父子组件的传值是通过组件属性 props 进行的,现在使用 Function  来声明组件,已经没有了 constructor 构造函数也就没有了 props 的接收,父子组件的传值就成了一个问题,React Hooks 准备了 useContext ,它可以帮助我们跨域组件层级直接传递变量,实现共享。需要注意的是,useContext 和 redux 的作用是不同的,一个解决的是组件之间值传递的问题,一个是应用中统一管理状态的问题,但通过和 useReducer 的配合使用,可以实现类似 Redux 的作用。

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

    import React,{useState,createContext,useContext} from 'react'
    
    const CountContext = createContext()  //createContext 创建 context, CountContext 是一个组件(父组件)
    
    function Counter(){ //子组件,需要接收CountContext传过来的count
        const count = useContext(CountContext) //使用useContext 接收
        return (<p>Counter组件中点击次数:{count}</p>)
    }
    
    function HContext(){
        const [count,setCount] = useState(0)
        return (
            <div>
              <h3>点击次数:{count}</h3>
              <button onClick={()=>setCount(count+1)}>点击</button>
               <CountContext.Provider value={count}>
                  <Counter />
               </CountContext.Provider>
            </div>
        )
    }
    export default HContext;

    当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定

    当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值

    useContext 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。

  • 相关阅读:
    删除某个目录下面指定名字的文件夹的命令
    ubuntu 12.04 下面安装vmware workstation 8.0.4
    最近一段时间总结
    ejb 学习笔记HelloWorld入门实例
    状态会话bean的session周期与Web上的session周期
    ubuntu做路由器
    Heron and His Triangle 递推 高精度 打表 HDU6222
    洛谷训练赛 A.Misaka Network
    HZNU Training 1 for Zhejiang Provincial Competition 2020 Xeon第三场训练赛
    莫比乌斯反演
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/13129256.html
Copyright © 2011-2022 走看看