阅读 3227

React的useContext的使用

useContext就是上下文

什么是上下文呢?

全局变量就是全局的上下文,全局都可以访问到它;上下文就是你运行一段代码,所要知道的所有变量

useContext使用的方法

1.要先创建createContex

使用createContext创建并初始化

const C = createContext(null);
复制代码

2.Provider 指定使用的范围

在圈定的范围内,传入读操作和写操作对象,然后可以使用上下文

    <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>
复制代码

3.最后使用useContext

使用useContext接受上下文,因为传入的是对象,则接受的也应该是对象

const {n,setN} = useContext(C);
复制代码

案例

案例:在孙子组件中使用爷爷组件中定义的变量n,并且进行+1操作

import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'

// 创造一个上下文
const C = createContext(null);

function App(){
  const [n,setN] = useState(0)
  return(
    // 指定上下文使用范围,使用provider,并传入读数据和写入据
    <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>
  )
}

function Baba(){
  return(
    <div>
      这是爸爸
      <Child></Child>
    </div>
  )
}
function Child(){
  // 使用上下文,因为传入的是对象,则接受也应该是对象
  const {n,setN} = useContext(C)
  const add=()=>{
    setN(n=>n+1)
  };
  return(
    <div>
      这是儿子:n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}


ReactDOM.render(<App />,document.getElementById('root'));
复制代码

注意

使用useContext在改变一个数据时,是通过自己逐级查找对比改变的数据然后渲染,而不是通过数据响应式来监控变量的。

也就是说在点击+1操作后,React开始从function App开始执行代码了

而Vue3使用的是数据响应式,来监控变量,只要变量一发生改变,就修改数据,不会重新执行一次代码

文章分类
前端
文章标签