当前位置： 面试刷题>> React 组件间怎么进行通信？

在React中，组件间的通信是构建复杂应用不可或缺的一部分。作为一名高级程序员，理解并掌握多种通信模式对于提升应用的可维护性和可扩展性至关重要。React的组件间通信主要分为以下几大类：父子组件通信、兄弟组件通信、跨层级组件通信以及通过Context API的全局状态管理。下面我将逐一详细阐述每种通信方式，并附上示例代码。

1. 父子组件通信

父向子通信

父组件可以通过props向子组件传递数据。

// 父组件
function ParentComponent() {
  const childData = 'Hello from Parent';
  return <ChildComponent data={childData} />;
}

// 子组件
function ChildComponent({ data }) {
  return <div>{data}</div>;
}

子向父通信

子组件可以通过回调函数（props传递）向父组件发送数据或事件。

// 父组件
function ParentComponent() {
  const handleData = (data) => {
    console.log(data); // 处理来自子组件的数据
  };

  return <ChildComponent onData={handleData} />;
}

// 子组件
function ChildComponent({ onData }) {
  const sendDataToParent = () => {
    onData('Hello back from Child');
  };

  return <button onClick={sendDataToParent}>Send Data</button>;
}

2. 兄弟组件通信

兄弟组件间直接通信并不直接支持，但可以通过它们共同的父组件作为桥梁来实现。

// 父组件
function ParentComponent() {
  const [data, setData] = React.useState('');

  const handleDataFromChildA = (newData) => {
    setData(newData);
  };

  return (
    <>
      <ChildA onData={handleDataFromChildA} />
      <ChildB data={data} />
    </>
  );
}

// ChildA 组件（发送数据）
function ChildA({ onData }) {
  const sendData = () => {
    onData('Data from Child A');
  };

  return <button onClick={sendData}>Send to Child B</button>;
}

// ChildB 组件（接收数据）
function ChildB({ data }) {
  return <div>Data from Child A: {data}</div>;
}

3. 跨层级组件通信

对于更复杂的跨多层级通信，React提供了Context API。

// 创建Context
const ThemeContext = React.createContext('light');

// 使用Context
function ThemedButton() {
  const theme = React.useContext(ThemeContext);

  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
    I am styled by theme context!
  </button>;
}

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

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

4. 全局状态管理

对于大型应用，推荐使用全局状态管理库，如Redux、MobX或React的Hooks（如useReducer和useContext结合使用）来管理全局状态。

示例（使用useReducer和useContext）

// 创建全局状态Context
const StoreContext = React.createContext(null);

// 创建reducer来管理状态
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 提供全局状态
function StoreProvider({ children }) {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });

  return (
    <StoreContext.Provider value={{ state, dispatch }}>
      {children}
    </StoreContext.Provider>
  );
}

// 使用全局状态
function Counter() {
  const { state, dispatch } = React.useContext(StoreContext);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </>
  );
}

// 应用根组件
function App() {
  return (
    <StoreProvider>
      <Counter />
    </StoreProvider>
  );
}

以上就是在React中组件间通信的几种主要方式及其实例代码。通过这些方法，你可以根据应用的需求和复杂度选择最合适的通信模式。在构建大型应用时，合理使用Context API或全局状态管理库（如Redux）可以显著提高开发效率和应用的可维护性。在探索和实践这些技术时，记得参考“码小课”上的深入教程和实战案例，这将有助于你更深入地理解和应用这些概念。

推荐面试题