react的createContext及useContext 和 vue3的 provide 及 inject

这几个方法都是用于多层嵌套组件时，父组件向某个深层组件的传值，避免了props一层一层的传递。

react createContext 和 useContext

新建context.ts文件：

import { createContext } from 'react'
export const MyContext = createContext<any>(null)

父组件：

import {MyContext} from './context'
import Child1 from './child1'
function Home(props: any) {
  const [data, setData] = useState({
    name: '测试',
    value: 222
  })
  return (
    <MyContext.Provider value={data}>
      <div className="Home">
        <Child1 />
      </div>      
    </MyContext.Provider>
  )
}

export default Home

创建child1组件及child2组件，其中，child1引入了child2，组件引入结构为：

home >> child1>>child2

child2深层组件：

import { useContext } from 'react'
import {MyContext} from './context'

function child2() {
  const data:any = useContext(MyContext)
  console.log(data) // {name: '测试', value: 222}
  return (
    <div className="child2">
      child2
    </div>
  )
}

export default child2

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。

本例中，当父组件data值改变时，会触发重渲染，子组件child2也会更新。

vue3 provide 和 inject

vue3中依赖注入就相对于简单点，组件结构和上述一样：

父组件：

<template>
<div class="home">
  <child1></child1>
</div>
</template>

<script setup name="home">
import child1 from '@/components/child1.vue'
const message = ref(123)

provide('message', message)
provide('more',{
  name:1,
  age:2
})
</script>

child2组件：

<template>
  <div class="child2">
    2222  
  </div>
</template>

<script setup>
const message = inject('message')
const obj = inject('more')
console.log(message.value,obj) // 123 {name: 1, age: 2}
</script>

一样的，当父组件对应的值发生改变时，也会触发重渲染。