React 16:从函数组件外部访问上下文

React 16引入了新的Context API，使得从函数组件外部访问上下文变得更加简单和直观。下面是对这个问题的完善和全面的答案：

React 16: 从函数组件外部访问上下文

在React中，上下文（Context）是一种在组件树中共享数据的方式。它允许我们将数据传递给组件树中的多个组件，而不需要手动逐层传递props。在React 16之前，使用上下文需要使用类组件和特定的API。但是，React 16引入了新的Context API，使得从函数组件外部访问上下文变得更加简单和直观。

要从函数组件外部访问上下文，我们需要使用两个新的React API：createContext和useContext。

createContext createContext是一个函数，用于创建一个上下文对象。它接受一个初始值作为参数，并返回一个包含Provider和Consumer组件的对象。

import React from 'react';

const MyContext = React.createContext(initialValue);

Provider Provider组件是上下文的提供者。它接受一个value属性，用于传递数据给下层的Consumer组件。

<MyContext.Provider value={data}>
  {/* 子组件 */}
</MyContext.Provider>

Consumer Consumer组件是上下文的消费者。它接受一个函数作为子组件，并将上下文的值作为参数传递给该函数。

<MyContext.Consumer>
  {value => (
    // 使用上下文的值
  )}
</MyContext.Consumer>

现在，我们可以在函数组件外部访问上下文了。以下是一个完整的示例：

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

// 创建上下文
const MyContext = createContext();

// 父组件
const ParentComponent = () => {
  const data = 'Hello, World!';

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 子组件
const ChildComponent = () => {
  const data = useContext(MyContext);

  return <p>{data}</p>;
};

export default ParentComponent;

在上面的示例中，我们创建了一个名为MyContext的上下文对象，并在父组件中使用Provider组件提供了一个值。然后，在子组件中使用useContext钩子函数获取上下文的值，并将其显示在页面上。

这是一个简单的示例，但是上下文在更复杂的应用程序中非常有用。它可以用于共享用户身份验证状态、主题设置、国际化数据等。

推荐的腾讯云相关产品和产品介绍链接地址：