面试题之React组件通信：从基础到高级实践

在React开发中，组件通信是构建复杂应用的核心技能。作为阿里巴巴通义实验室研发的超大规模语言模型，我将系统性地为您解析React组件通信的各种方式，帮助开发者构建高效、可维护的应用架构。

1. 父子组件通信：Props与回调

1.1 父组件向子组件传递数据（Props）

Props是React中最基础的通信方式，通过属性传递实现单向数据流。

// 子组件接收props
function UserProfile({ name, avatar, bio }) {
  return (
    <div className="profile">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{bio}</p>
    </div>
  );
}

// 父组件传递数据
function App() {
  const user = {
    name: '张三',
    avatar: '/avatar.jpg',
    bio: '前端开发工程师'
  };

  return <UserProfile {...user} />;
}

1.2 子组件向父组件通信（回调函数）

通过传递回调函数实现子组件向父组件的数据传递。

// 子组件触发回调
function SearchInput({ onSearch, placeholder }) {
  const [value, setValue] = useState('');
  
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(value); // 调用父组件回调
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value}
        onChange={handleChange}
        placeholder={placeholder}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

// 父组件处理搜索逻辑
function ProductList() {
  const [products, setProducts] = useState([]);
  
  const handleSearch = async (keyword) => {
    const results = await searchProducts(keyword);
    setProducts(results);
  };

  return (
    <div>
      <SearchInput onSearch={handleSearch} placeholder="搜索商品..." />
      <ProductGrid products={products} />
    </div>
  );
}

2. 跨层级通信：Context API

当组件层级较深时，Context API能有效避免props drilling问题。

2.1 创建和使用Context

// 1. 创建Context
import { createContext, useContext, useState } from 'react';

const AppContext = createContext();

// 2. 创建Provider组件
export function AppProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);
  const [cart, setCart] = useState([]);

  const addToCart = (item) => {
    setCart(prev => [...prev, item]);
  };

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  const value = {
    theme,
    user,
    cart,
    addToCart,
    toggleTheme,
    setUser
  };

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

// 3. 在深层组件中使用
function ThemeButton() {
  const { theme, toggleTheme } = useContext(AppContext);
  
  return (
    <button 
      onClick={toggleTheme}
      style={{ background: theme === 'dark' ? '#333' : '#fff' }}
    >
      切换到{theme === 'dark' ? '亮' : '暗'}模式
    </button>
  );
}

// 4. 在应用根部包裹Provider
function App() {
  return (
    <AppProvider>
      <Header />
      <MainContent />
      <Footer />
    </AppProvider>
  );
}

3. 全局状态管理

3.1 Zustand：轻量级状态管理

// 创建store
import { create } from 'zustand';

const useStore = create((set) => ({
  user: null,
  cart: [],
  theme: 'light',
  
  // actions
  setUser: (user) => set({ user }),
  addToCart: (item) => set((state) => ({ 
    cart: [...state.cart, item] 
  })),
  removeFromCart: (id) => set((state) => ({
    cart: state.cart.filter(item => item.id !== id)
  })),
  toggleTheme: () => set((state) => ({
    theme: state.theme === 'light' ? 'dark' : 'light'
  }))
}));

// 在组件中使用
function Cart() {
  const { cart, removeFromCart } = useStore();
  
  return (
    <div>
      {cart.map(item => (
        <CartItem 
          key={item.id} 
          item={item}
          onRemove={() => removeFromCart(item.id)}
        />
      ))}
    </div>
  );
}

3.2 Redux Toolkit（现代Redux）

// slices/userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: null,
    status: 'idle'
  },
  reducers: {
    setUser: (state, action) => {
      state.data = action.payload;
    },
    clearUser: (state) => {
      state.data = null;
    }
  }
});

export const { setUser, clearUser } = userSlice.actions;
export default userSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  }
});

// 在组件中使用
import { useSelector, useDispatch } from 'react-redux';
import { setUser } from './slices/userSlice';

function Login() {
  const dispatch = useDispatch();
  
  const handleLogin = (userData) => {
    dispatch(setUser(userData));
  };
}

4. 兄弟组件通信

4.1 通过共同父组件

function Parent() {
  const [selectedItem, setSelectedItem] = useState(null);
  
  return (
    <div>
      <ItemList onSelect={setSelectedItem} />
      <ItemDetail item={selectedItem} />
    </div>
  );
}

function ItemList({ onSelect }) {
  const items = ['苹果', '香蕉', '橙子'];
  
  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={() => onSelect(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

function ItemDetail({ item }) {
  return (
    <div>
      {item ? <p>选中了：{item}</p> : <p>请选择一个项目</p>}
    </div>
  );
}

5. 高级通信技巧

5.1 Ref与useImperativeHandle

import { forwardRef, useImperativeHandle, useRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    getValue: () => {
      return inputRef.current?.value;
    },
    clear: () => {
      inputRef.current.value = '';
    }
  }));

  return <input ref={inputRef} {...props} />;
});

function Form() {
  const inputRef = useRef();
  
  const handleSubmit = () => {
    const value = inputRef.current?.getValue();
    console.log('输入值:', value);
  };

  return (
    <div>
      <CustomInput ref={inputRef} placeholder="请输入..." />
      <button onClick={() => inputRef.current?.focus()}>
        聚焦
      </button>
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

5.2 自定义Hook实现通信

// hooks/useEventBus.js
import { useState, useEffect } from 'react';

const events = new Map();

export function useEventBus(event, callback) {
  useEffect(() => {
    if (!events.has(event)) {
      events.set(event, new Set());
    }
    events.get(event).add(callback);
    
    return () => {
      events.get(event).delete(callback);
    };
  }, [event, callback]);
}

export function emitEvent(event, data) {
  if (events.has(event)) {
    events.get(event).forEach(callback => callback(data));
  }
}

// 使用
function ComponentA() {
  const handleClick = () => {
    emitEvent('user-login', { user: 'Alice' });
  };
  
  return <button onClick={handleClick}>登录</button>;
}

function ComponentB() {
  useEventBus('user-login', (data) => {
    console.log('用户登录:', data.user);
  });
  
  return <div>监听登录事件</div>;
}

6. 最佳实践与选择建议

6.1 选择指南

场景	推荐方案
简单父子通信	Props + Callback
主题、语言等全局配置	Context API
复杂应用状态管理	Zustand 或 Redux Toolkit
表单状态管理	React Hook Form
缓存数据管理	React Query 或 SWR

6.2 性能优化建议

1. 避免不必要的重新渲染

// 使用React.memo优化
const ExpensiveComponent = React.memo(({ data }) => {
  // 只有data变化时才重新渲染
  return <div>{data}</div>;
});

2. 合理使用useCallback和useMemo

function Parent() {
  const [count, setCount] = useState(0);
  
  // 使用useCallback避免每次渲染都创建新函数
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  
  return <Child onIncrement={handleIncrement} />;
}

结语

React组件通信方式多样，选择合适的方案对应用的可维护性和性能至关重要。建议从简单的props开始，随着应用复杂度的增加逐步引入Context或状态管理库。记住，最简单的解决方案往往是最好的解决方案。

在阿里巴巴的前端实践中，我们推荐：

• 中小型项目：Props + Context + Zustand
• 大型复杂应用：Redux Toolkit + React Query
• 高性能要求：结合React.memo、useCallback等优化手段

通过合理选择和组合这些通信方式，可以构建出高效、可维护的React应用架构。