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

叁歲伎倆 2024-03-27 10:56 52阅读 0赞

## 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 (
    		<></>
    	)
    }