React之Context

最新推荐文章于 2024-02-23 15:45:37 发布

Meskjei

最新推荐文章于 2024-02-23 15:45:37 发布

阅读量331

点赞数 1

分类专栏：前端 React 文章标签： React Context

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/102462249

版权

前端同时被 2 个专栏收录

70 篇文章

订阅专栏

React

18 篇文章

订阅专栏

React的Context提供了一种在组件树中传递数据的方法，避免了在组件层级间手动传递props的繁琐。Context API包括createContext，它创建了一个上下文并设置默认值。在组件中，Provider传递值，Consumer组件通过props回调获取这些值。然而，过多使用Context可能导致模块独立性降低，使用时需谨慎。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

Context可以让数据在组件树中自上而下自由传递，而不需要在树中层层的传递。层层传递不仅在编写代码的时候会十分繁琐，而且中间层级可能根本不关心所要传递的数据，所以也为后期的维护制造理解上的障碍。

可以将Context简单理解为一个全局变量。

API

createContext

这是Context的一个核心API，从名字就可以看出，这是用来创建Context的。

它接受一个参数，createContext(defaultContextValue)。这个参数就是默认的Context值，该值仅在Consumer找不到Provider的时候才生效。

使用

Context的使用依赖于Context.Provider和Context.Consumer这两个组件。

Provider为被它包裹在内的所有组件提供Context的值，而Consumer组件则可以获得Provider提供的数据。

import React, { Component, createContext } from 'react';

const SpeedContext = createContext();

class Leaf extends Component {
    render(){
        return (
            <SpeedContext.Consumer>
                {
                    speed => <h1>Speed: {speed}</h1>
                }
            </SpeedContext.Consumer>
        );
    }
}

class Middle extends Component {
    render(){
        return (
            <Leaf/>
        );
    }
}

class App extends Component {
    render(){
        return (
            <SpeedContext.Provider value={50}>
                <Middle/>
            </SpeedContext.Provider>
        );
    }
}

Consumer组件内包裹的是一个回调函数，函数的参数正是Provider提供的数据。

注意

如果有多个Context，使用起来在Provider这边就只是简单的嵌套，而且顺序无所谓。在Consumer这边虽然也是嵌套，但是写起来有点麻烦：

<SpeedContext.Consumer>
    {
        speed => (
            <TestContext.Consumer>
                ...
            </TestContext.Consumer>
        )
    }
</SpeedContext.Consumer>

此外，使用Context有一定弊端，因为这会使模块的独立性降低，所以使用之前要考虑清楚是否必要。