12 React 中小节组件之间的通信

在 React 中，组件是构建用户界面的基本单元。有时我们需要在不同组件之间进行数据传递或事件处理。这里将详细介绍小节（子组件）之间的通信方法。

1. 升级与降级数据

在 React 中，数据是通过props（属性）从父组件传递到子组件的。而子组件不能直接更新父组件的状态。如果需要在子组件中处理数据，我们通常使用数据提升的方法，将状态提升到共同的父组件中。

1.1 父组件中的状态

首先，创建一个父组件来管理状态：

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

const Parent = () => {
  const [data, setData] = useState('');

  return (
    <div>
      <ChildA setData={setData} />
      <ChildB data={data} />
    </div>
  );
};

export default Parent;

1.2 子组件 A（发送数据）

子组件 A 可以通过调用 setData 函数来更新父组件的状态：

import React from 'react';

const ChildA = ({ setData }) => {
  const handleChange = (e) => {
    setData(e.target.value); // 更新父组件的状态
  };

  return (
    <input type="text" onChange={handleChange} placeholder="Type something..." />
  );
};

export default ChildA;

1.3 子组件 B（接收数据）

子组件 B 通过 props 接收父组件传来的数据：

import React from 'react';

const ChildB = ({ data }) => {
  return <div>Received data: {data}</div>; // 显示父组件的状态
};

export default ChildB;

1.4 整体效果

父组件将状态提升到父级，并通过 props 传递给子组件 A 和子组件 B。子组件 A 更新状态，子组件 B 根据变化自动渲染。

2. 通过 Context API 实现组件间通信

在某些情况下，当多个层级的子组件需要共享数据时，使用 Context API 是一个不错的选择。

2.1 创建 Context

首先，创建一个上下文（Context）：

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

export const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const [data, setData] = useState('');

  return (
    <MyContext.Provider value={{ data, setData }}>
      {children}
    </MyContext.Provider>
  );
};

2.2 使用 Context 提供数据

在父组件中使用 MyProvider 来包裹子组件：

import React from 'react';
import { MyProvider } from './MyContext';
import ChildA from './ChildA';
import ChildB from './ChildB';

const Parent = () => {
  return (
    <MyProvider>
      <ChildA />
      <ChildB />
    </MyProvider>
  );
};

export default Parent;

2.3 子组件 A（使用 Context）

子组件 A 从上下文中获取 setData 函数：

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const ChildA = () => {
  const { setData } = useContext(MyContext);

  const handleChange = (e) => {
    setData(e.target.value);
  };

  return (
    <input type="text" onChange={handleChange} placeholder="Type something..." />
  );
};

export default ChildA;

2.4 子组件 B（使用 Context）

子组件 B 从上下文中获取 data：

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const ChildB = () => {
  const { data } = useContext(MyContext);

  return <div>Received data: {data}</div>;
};

export default ChildB;

2.5 整体效果

通过 Context API，我们成功地实现了没有直接层级关系的多个组件之间的数据共享。每当子组件 A 更新数据时，子组件 B 都会响应更新。

3. 使用事件机制

另一个组件间通信的方法是通过事件传递。这种方式通常在使用类组件时更加明显，但也可以通过 useEffect 钩子在函数组件中实现。

3.1 使用事件总线

创建一个简单的事件总线：

import { EventEmitter } from 'events';

const eventBus = new EventEmitter();
export default eventBus;

3.2 发布事件

在子组件 A 中，通过事件总线发布事件：

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

const ChildA = () => {
  const handleChange = (e) => {
    eventBus.emit('dataChanged', e.target.value); // 发布事件
  };

  return (
    <input type="text" onChange={handleChange} placeholder="Type something..." />
  );
};

export default ChildA;

3.3 监听事件

在子组件 B 中，监听这个事件并更新状态：

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

const ChildB = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    const handleDataChange = (newData) => {
      setData(newData);
    };

    eventBus.on('dataChanged', handleDataChange); // 监听事件

    return () => {
      eventBus.off('dataChanged', handleDataChange); // 清理事件监听
    };
  }, []);

  return <div>Received data: {data}</div>;
};

export default ChildB;

3.4 整体效果

通过事件机制，我们能够实现子组件之间的通信，尽管它们没有直接的层级关系。子组件 A 发布事件，子组件 B 监听并响应这个事件。

总结

在 React 中，小节组件之间的通信可以通过以下几种方式进行：

1. 数提升：将组件的状态提升到共同的父组件中，然后通过 props 方式传递。
2. Context API：适合深层嵌套的组件间数据传递。
3. 事件机制：使用事件总线来实现非关联组件之间的通信。

选择合适的通信方式可以有效提升应用的结构和可维护性。