React context 父子组件传值

我是学vue的来着
之前做项目现学的react以及hooks
hooks呢推荐使用context来实现父子组件传值，说实话我也不清楚比原来方便在了什么地方
以下简要说明一下如何使用：

父组件：

import React, {
    
     useState, createContext } from 'react'
import Son from './Son'

export const CountContext = createContext() // 这个CountContext在子组件中要使用花括号接收

function Father () {
    
    
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>父组件中的count ：{
    
    count}</p>
      <button
        onClick={
    
    () => {
    
    
          setCount(count + 1)
        }}
      >
        点击
      </button>
      <CountContext.Provider value={
    
    count}>
        <Son />
      </CountContext.Provider>
    </div>
  )
}

export default Father

子组件

import React, {
    
     useContext } from 'react'
import {
    
     CountContext } from './Father'

function Son () {
    
    
  const count = useContext(CountContext)
  return <div>子组件接收的count ：{
    
    count}</div>
}

export default Son

总结一下：
父组件要引入createContext和子组件 并且导出CountContext(也就是使用createContext创建的实例)
子组件要引入useContext和父组件中的CountContext

在父组件中创建的context实例，包裹子组件后，需要向内传入的属性和值，写在行内即可

如下图：

补充：context实例可以不在父组件中创建，可以单独一个jsx文件存放，父子组件分别引入就可，相当于一个公共传值器。