ReactJS - 上下文：初学者指南

你好，有抱负的开发者们！今天，我们将深入ReactJS上下文的美妙世界。作为你友好邻里的计算机老师，我将以我第一次学习这个概念时的热情来引导你。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起踏上这段激动人心的旅程！

ReactJS - Context

React中的上下文是什么？

想象一下，你在一个家庭聚会上，想和大家分享一个有趣的故事。如果你不必逐个低声讲述，而可以直接宣布一次，让大家都听到，那岂不是很好？React中的上下文正是这样做的！

上下文提供了一种方法，可以在组件树中传递数据，而无需在每一层手动传递props。它旨在共享可以被认为是组件树“全局”的数据。

何时使用上下文

在我们深入了解之前，让我们理解何时使用上下文：

当你有数据需要在不同嵌套级别的许多组件中访问时。
当你想要避免“属性钻取”（在不需要数据的中间组件中传递props）时。

创建和使用上下文

让我们通过一些代码示例来了解创建和使用上下文的过程。

步骤1：创建上下文

首先，我们需要创建一个上下文。我们将使用React.createContext()方法。

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

在这个示例中，我们创建了一个ThemeContext，默认值为'light'。这个默认值在组件树中没有匹配的Provider时使用。

步骤2：提供上下文

现在我们有了上下文，我们需要将其提供给我们的组件树。我们使用Context.Provider组件来做到这一点。

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

在这个示例中，我们用ThemeContext.Provider包裹了Toolbar组件（及其所有子组件）。我们将值设置为"dark"，这将使其对Provider内的所有组件可用。

步骤3：使用上下文

现在到了有趣的部分——使用我们的上下文！有两种方法可以消费上下文：

Class.contextType
Context.Consumer

让我们看看两种方法：

使用Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>我是一个主题按钮！</button>;
}
}

在这个示例中，ThemedButton是一个类组件。我们将它的contextType设置为我们的ThemeContext。现在，this.context将为我们提供当前上下文值。

使用Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>我是一个主题按钮！</button>}
</ThemeContext.Consumer>
);
}

在这里，我们使用Context.Consumer组件。它使用一个渲染属性来将当前上下文值传递给一个函数。

多个上下文

有时，你可能需要使用多个上下文。React允许你嵌套多个上下文Provider：

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="张三">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

你可以像这样消费多个上下文：

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} 正在使用 {theme} 主题
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

更新上下文

上下文也可以是动态的。让我们看一个更新我们的主题的例子：

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
切换主题
</button>
</ThemeContext.Provider>
);
}

在这个例子中，我们使用useState钩子来管理我们的主题状态。我们将当前主题和setTheme函数作为上下文值传递。

上下文方法

下面是我们在本文中涉及的主要上下文方法的总结：

方法	描述
React.createContext()	创建一个上下文对象
Context.Provider	向组件提供上下文值
Class.contextType	允许类组件消费单个上下文
Context.Consumer	允许函数组件订阅上下文

结论

好了，各位！我们已经穿越了React上下文的世界，从其创建到消费，甚至更新。上下文是React中一个强大的工具，它允许你避免属性钻取并有效地管理全局状态。

记住，像任何工具一样，上下文并不总是正确的解决方案。对于更简单的情况，props可能是你的最佳选择。但是，当你在不同级别的许多组件之间共享数据时，上下文可以成为你的新朋友。

继续练习，继续编码，最重要的是，继续享受乐趣！下次见，快乐React编程！

Credits: Image by storyset