React之Context

落日映苍穹つ 2023-06-05 15:54 15阅读 0赞

### 文章目录 ###

*  概念
 *  API
 *   *  createContext
 *  使用
 *  注意

# 概念 #

`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`有一定弊端，因为这会使模块的独立性降低，所以使用之前要考虑清楚是否必要。