React-Hook：useContext

useReact的应用场景：在组件间共享状态

假设现在有两个组件，想要共享状态，可以使用React.createContext创建一个context对象，为了方便在所有的组件中共享状态，我将创建context的文件抽离为 creatContext.js

#creatContext.js 

import { createContext } from 'react'

const FatherContext = createContext()

export default FatherContext;

组件1：

# Child1
import React, { useContext } from 'react'
import FatherContext from '../context/creatContext'

export default function Child1() {
  const { username } = useContext(FatherContext)

  return (
    <>
      
child1的username============={username}
    
  )
}

组件2：

#Child2
import React, { useContext } from 'react'
import FatherContext from '../context/creatContext'

export default function Child2() {
  const { username } = useContext(FatherContext)

  return (
    <>
      
Child2的username============={username}
    
  )
}

父组件：

# FatherCom
import React from 'react'
import Child1 from './child1'
import Child2 from './child2'
// context对象
import FatherContext from '../context/creatContext'
export default function FatherCom() {
  return (
    

      我是父组件
      
        

          
          
        
      
    
  )
}

运行结果

image.png

文件结构：

image.png