面试题：Next.js嵌套路由下自定义状态管理方案设计

状态存储方式

Context API：Next.js 基于 React，可利用 React 的 Context API 进行状态存储。创建一个顶层的 Context，在其中存储应用的全局状态。例如：

import React from 'react';

const GlobalContext = React.createContext();

export default GlobalContext;

在顶层组件（如 _app.js）中包裹应用并提供状态：

import React from'react';
import GlobalContext from '../context/GlobalContext';

function MyApp({ Component, pageProps }) {
  const [globalState, setGlobalState] = React.useState({
    user: null,
    theme: 'light'
  });

  return (
    <GlobalContext.Provider value={{ globalState, setGlobalState }}>
      <Component {...pageProps} />
    </GlobalContext.Provider>
  );
}

export default MyApp;

Local Storage 辅助：对于一些需要持久化的状态，如用户登录信息，可以结合 localStorage。在状态更新时同步更新 localStorage，在应用启动时从 localStorage 读取初始状态。

状态更新机制

通过 Context 传递更新函数：在 Context 的 Provider 中传递状态更新函数（如上述 setGlobalState）。子组件通过 GlobalContext.Consumer 或 useContext Hook 获取更新函数并调用。例如：

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

function SomeComponent() {
  const { globalState, setGlobalState } = useContext(GlobalContext);

  const handleThemeChange = () => {
    setGlobalState(prevState => ({
     ...prevState,
      theme: prevState.theme === 'light'? 'dark' : 'light'
    }));
  };

  return (
    <div>
      <button onClick={handleThemeChange}>Toggle Theme</button>
    </div>
  );
}

export default SomeComponent;

事件机制：可以建立一个简单的事件发布 - 订阅系统。当状态更新时，发布事件，感兴趣的组件订阅该事件并执行相应操作。例如：

const eventEmitter = {
  events: {},
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }
};

// 在状态更新函数中发布事件
const setGlobalState = (newState) => {
  // 更新状态逻辑
  eventEmitter.emit('stateUpdate', newState);
};

不同嵌套层次组件间共享状态

Context 穿透：利用 Context API 的特性，无论组件嵌套多深，只要在 GlobalContext.Provider 的包裹范围内，都可以通过 useContext 获取到全局状态。例如在深层嵌套组件中：

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

function DeepNestedComponent() {
  const { globalState } = useContext(GlobalContext);
  return <div>{globalState.theme}</div>;
}

export default DeepNestedComponent;

通过 props 传递：对于一些非全局但在特定组件树内共享的状态，可以通过 props 从父组件向子组件传递。

优势

轻量级：无需引入大型状态管理库，减少了项目的依赖体积，尤其适合对性能敏感的中大型项目。
灵活性：可以根据项目的具体需求定制状态管理逻辑，更好地贴合业务场景。例如，可以灵活选择使用 Context 还是事件机制，或者结合两者使用。
易于理解：基于 React 原生的 Context API 和基础的事件机制，团队成员无需额外学习复杂的状态管理库语法，降低学习成本。

不足

缺乏标准化：相比成熟的状态管理库（如 Redux），没有统一的最佳实践和规范。不同开发者可能实现方式差异较大，导致代码风格不一致，维护成本增加。
调试困难：没有像 Redux DevTools 这样强大的调试工具，在状态复杂时，追踪状态变化和调试问题会更加困难。
状态管理复杂度提升：随着项目规模进一步扩大，手动管理状态更新和共享逻辑可能变得复杂，容易出现数据不一致等问题，而成熟的状态管理库已经对这些问题有较好的解决方案。

星途面试题库

面试题：Next.js嵌套路由下自定义状态管理方案设计

知识考点

面试题答案

状态存储方式

状态更新机制

不同嵌套层次组件间共享状态

优势

不足