函数式组件 | 跨组件传值

createContext 和 useContext

• 我们为什么要用context? 因为如果有10层组件 来回传值 浪费时间 维护困难

• 当我们想要跨组件传值时：

1. 我们可以通过 笨方法 <组件 value={value}/> 这种方式传值 但是太不灵活了
2. 我们可以用context传值 好处是：灵活高效 第一步 我们需要创建一个 公共的 Context实例 文件

  import React, { createContext } from "react"
  //ThemeContext可以为任意名称 尽量正式一点
  export const ThemeContext = createContext("笑话")//createContext(填不填都行) 

现在有三个组件 ：爷组件 父组件 子组件 我们想要在 子组件里 用到 爷组件所传过来的值时

爷组件

import React, { useState } from "react"
import Parents from './components/Parents' //引入父组件
import { ThemeContext } from './models/context'//引入所创建好的实例
function GrandParents() {
    const [count,setCount]=useState(0)//定义变量
    return(
       <Parents count={count} setCount={setCount}/>
    )
export default GrandParents

function GrandParents() {
    const [count,setCount]=useState(0)//定义变量
    return(
       <>
         {/*通过ThemeContext。Provider这种方式 传递过去 值 和 方法*/}
         <ThemeContext.Provider value={{ count, setCount }}>
             <A />
         </ThemeContext.Provider>
       </>
    )
export default GrandParents

父组件

import Parents from './components/Parents' //引入父组件 ThemeContext不需要引
function Parents() {
    return(
       <Child/> //什么都不用传
    )
export default Parents

子组件

import Child from './components/Child' //引入子组件
import { ThemeContext } from '../../models/context'//也要引入实例
function Child() {
    const xxx = useContext(ThemeContext)//获取爷组件传过来的 值 和 方法
    const { count, setCount } = xxx//解构
    const onClick = () => {
          setCount(count + 1)
    }
    return(
      <h1 onClick={onClick}>count:{count}</h1>
    )
export default Child