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

上一篇:函数式组件useState中state更新问题和useEffect模拟生命周期


下一篇:ice中redux转useState