面试题-React(九)：React的Context：实现非父子组件通信

前端每日三省2023-09-15 23:56

在React中，组件之间的通信是构建复杂应用的关键问题之一。虽然React的数据流通常是自上而下的，即从父组件传递给子组件，但有时我们需要实现非父子组件之间的通信。为了解决这个问题，React引入了Context，这是一种可以跨层级传递数据的机制。

一、React的Context概述

Context是一种全局状态管理的解决方案，它允许我们在组件树中共享数据，而不需要通过props层层传递。Context通常被用于在组件之间共享通用的数据，例如主题、用户登录状态等。

二、使用Context实现非父子组件通信

通过Context，我们可以实现非父子组件之间的通信，下面是实现步骤：

1. 创建Context：

首先，我们需要创建一个Context。这可以在任何地方完成，但通常我们会在一个单独的文件中定义Context。

jsx 复制代码

// DataContext.js
import React from 'react';

const DataContext = React.createContext();

export default DataContext;

2. 提供数据：

在需要共享数据的父组件中，我们使用<DataContext.Provider>来提供数据。这个Provider将包裹子组件，使得这些子组件能够访问提供的数据。

jsx 复制代码

// ParentComponent.js
import React from 'react';
import DataContext from './DataContext';

class ParentComponent extends React.Component {
  state = { data: 'Hello from parent!' };

  render() {
    return (
      <DataContext.Provider value={this.state.data}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

3. 使用数据：

在子组件中，我们可以通过useContext钩子或Context.Consumer来获取提供的数据。

jsx 复制代码

// ChildComponent.js
import React, { useContext } from 'react';
import DataContext from './DataContext';

function ChildComponent() {
  const data = useContext(DataContext);

  return <p>Data from parent: {data}</p>;
}