面试题：React Context订阅模式在复杂状态管理中的应用与优化

1. 设计Context结构以实现高效的数据共享与更新

确定核心状态：在多用户交互、实时数据更新场景下，核心状态可能包括用户信息、实时数据（如聊天消息、实时统计数据等）。
分层设计Context：避免将所有状态都放在一个Context中。例如，可将用户相关状态放在 UserContext，实时业务数据放在 RealtimeDataContext。这样不同模块可按需订阅，减少不必要的重新渲染。
使用Provider传递状态：在组件树顶层或合适位置，通过 Provider 将状态传递给子组件。

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

// 创建UserContext
const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

2. 处理不同模块间因Context状态变化引发的副作用

使用useEffect：在需要处理副作用的组件中，通过 useEffect 监听Context状态变化。
防抖与节流：对于频繁触发的状态变化（如实时数据更新），可使用防抖或节流函数优化。

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

const UserInfoComponent = () => {
  const { user } = useContext(UserContext);

  useEffect(() => {
    if (user) {
      // 处理副作用，比如发送用户信息到日志服务
      console.log('User updated:', user);
    }
  }, [user]);

  return (
    <div>
      {user && <p>Welcome, {user.name}</p>}
    </div>
  );
};

export default UserInfoComponent;

3. 利用前沿技术提升健壮性和性能

Suspense：

异步数据加载：在使用Context共享数据时，若数据需要异步获取，可使用 Suspense 处理加载状态。
代码示例：假设 RealtimeDataContext 的数据需要异步获取。

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

const RealtimeDataContext = createContext();

const RealtimeDataProvider = ({ children }) => {
  const [data, setData] = useState(null);

  // 模拟异步数据获取
  useEffect(() => {
    setTimeout(() => {
      setData({ message: 'Real - time data' });
    }, 2000);
  }, []);

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

const RealtimeDataComponent = () => {
  const data = useContext(RealtimeDataContext);
  if (!data) {
    throw new Error('Data not loaded yet');
  }
  return <div>{data.message}</div>;
};

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RealtimeDataProvider>
        <RealtimeDataComponent />
      </RealtimeDataProvider>
    </Suspense>
  );
};

export default App;

Error Boundary：

捕获错误：用于捕获Context相关的渲染错误、生命周期错误等。
代码示例：

class ContextErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    // 记录错误信息
    console.log('Context error:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div>An error occurred in Context - related components.</div>;
    }
    return this.props.children;
  }
}

const AppWithErrorBoundary = () => {
  return (
    <ContextErrorBoundary>
      <UserProvider>
        <RealtimeDataProvider>
          {/* 其他组件 */}
        </RealtimeDataProvider>
      </UserProvider>
    </ContextErrorBoundary>
  );
};

面试题：React Context订阅模式在复杂状态管理中的应用与优化

知识考点

面试题答案

1. 设计Context结构以实现高效的数据共享与更新

2. 处理不同模块间因Context状态变化引发的副作用

3. 利用前沿技术提升健壮性和性能