useContext简单使用笔记

本文介绍了React Hooks中的useContext API,展示如何使用它来实现跨层级组件间的状态传递,以及如何与useReducer配合以实现类似Redux的状态管理。通过创建和使用Context,可以简化组件间的通信,提高代码复用性。示例代码详细演示了如何创建Context、在Provider中传递值以及在子组件中使用useContext接收并显示传递的状态。
摘要由CSDN通过智能技术生成

useContext简单使用笔记

useContext,可以用来传递参数,不光是父子之间传参,可以跨越组件层级直接传递变量,实现共享

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

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

代码例:createContext 函数创建 context

直接在src目录下新建一个文件 Example.tsx,然后代码如下:

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

引入渲染这个组件以后

再引入 createContext

import React, { useState , createContext } from 'react';
const CountContext = createContext()
function Example(){
    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 Example;

这段代码就相当于把count变量允许跨层级实现传递和使用了(也就是实现了上下文),当父组件的count变量发生变化时,子组件也会发生变化。
接下来就看看一个React Hooks的组件如何接收到这个变量。

useContext 接收上下文变量

接收这个直接使用 useContext 就可以,但是在使用前需要新进行引入useContext

import React, { useState , createContext , useContext } from 'react'; 
function Counter(){
    const count = useContext(CountContext)    //一句话就可以得到count
    return (<h2>{count}</h2>)
}

得到后就可以显示出来了,但是要记得在<CountContext.Provider>的闭合标签中

<CountContext.Provider value={count}>
    <Counter />
</CountContext.Provider>

简单示例:

import React,{useState,createContext,useContext} from 'react'
const CountContext = createContext({});
function Child(){//子组件
  let count= useContext(CountContext)
  return (
    <div>
      这是子组件{count}
    </div>
  )
}
function Example01(){
  const [count,setCount] =useState(0)
 
  return (
    <div>
      <p>点击次数{count}</p>
      <button onClick={()=>{setCount(count+1)}}>点击事件</button>
      <CountContext.Provider value={count}>
        <Child></Child>
      </CountContext.Provider>
    </div>
   
  )
}
export default Example01

调用了 useContext 的组件总会在 context 值变化时重新渲染。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值