useContext 详细解析 及与 createContext 搭配使用解决祖孙多层组件之间传参问题

1. createContext

import { createContext } from 'react'

let defaultValue = {}

const context = createContext(defaultValue) 

export default context;

创建一个 Context 对象，当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 才会生效

2. useContext

import { useContext } from 'react'
impor context from '@/xxx/xxx.ts'  // 引入上面创建的 Context 对象
 
const contextParams = useContext<any>(context)

useContext 接收一个 Context 对象（即 React.createContext 的返回值），并返回该 context 的当前值。

• useContext 可以帮助我们跨越组件层级直接传递变量，实现数据共享。
• Context 的作用是：对它所包含的组件树提供全局共享数据的一种技术。

3. 使用

可以分为以下三步

1. 在一个单独的 .ts文件中，引入 createContext 方法，并创建 Context 对象、导出

import { createContext } from 'react'

let defaultValue = {}

const context = createContext(defaultValue) 

export default context;

2. 在父/祖组件中使用 Provider 组件包裹需要接收数据的子组件，并通过 value 属性提供要共享的数据

父组件:

import { useContext } from 'react'
impor context from '@/xxx/xxx.ts'  // 引入上面创建的 Context 对象
 
return (
	<context.Provider value={这里放需要传递的数据}> // 比如 value={{isFullScreen: true, toDoFlag: '1'}}
		需要接收数据的子/孙组件	
		这里的子/孙组件中，如果在嵌套子组件，仍然可以获取共享数据
	</context.Provider>
)

3. 在需要获取公共数据的子/孙组件中，使用 useContext方法、Context 对象，得到 value 的值

子/孙组件:

import React, { useContext } from 'react';
import context from '@/xxx/xxx'

const index = () => {
	const contextParams = useContext(context)  // 获取到value，可以在下面进行使用
	return (
		<></>
	)
}