useContext简单使用笔记

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 值变化时重新渲染。

标签：count,createContext,const,笔记,useState,简单,组件,useContext
来源： https://blog.csdn.net/jojo1001/article/details/121226591