面试题：Next.js Link组件与自定义状态管理库的深度集成及扩展

设计思路

状态管理库集成：将自定义的轻量级状态管理库引入Next.js项目，确保其订阅 - 发布机制能正常工作。
Link组件集成：利用Next.js的Link组件的特性，在跳转后捕获路由参数，并触发状态更新。
动态状态更新：根据不同的路由参数，更新状态管理库中的复杂嵌套状态结构。
状态持久化：将部分状态保存到本地存储，在项目加载时恢复状态。

实现架构

状态管理层：负责管理和更新应用的状态，包括订阅 - 发布机制的实现。
路由层：处理Link组件的跳转，获取路由参数，并通知状态管理层进行状态更新。
持久化层：负责将部分状态保存到本地存储和从本地存储恢复状态。

关键代码逻辑

引入状态管理库：

// 在项目入口文件（如 pages/_app.js）引入状态管理库
import stateManager from '../lib/stateManager';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Link组件处理：

import Link from 'next/link';
import { useRouter } from 'next/router';
import stateManager from '../lib/stateManager';

function MyPage() {
  const router = useRouter();

  const handleRouteChange = (url) => {
    const { query } = router;
    // 根据路由参数更新状态
    stateManager.updateStateBasedOnRoute(query);
  };

  useEffect(() => {
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);

  return (
    <div>
      <Link href="/page?param=value">
        <a>Go to Page</a>
      </Link>
    </div>
  );
}

export default MyPage;

状态管理库更新逻辑：

// stateManager.js
const state = {
  nested: {
    key: 'default value'
  }
};

const subscribers = [];

export const subscribe = (callback) => {
  subscribers.push(callback);
  return () => {
    const index = subscribers.indexOf(callback);
    if (index!== -1) {
      subscribers.splice(index, 1);
    }
  };
};

export const updateStateBasedOnRoute = (query) => {
  // 根据路由参数更新嵌套状态
  if (query.someParam) {
    state.nested.key = query.someParam;
  }
  subscribers.forEach(callback => callback(state));
  // 持久化部分状态
  localStorage.setItem('nestedState', JSON.stringify(state.nested));
};

export const getState = () => state;

状态持久化与恢复：

// 在项目入口文件（如 pages/_app.js）恢复状态
import stateManager from '../lib/stateManager';

function MyApp({ Component, pageProps }) {
  const persistedState = localStorage.getItem('nestedState');
  if (persistedState) {
    stateManager.setState(JSON.parse(persistedState));
  }

  return <Component {...pageProps} />;
}

export default MyApp;

星途面试题库

面试题：Next.js Link组件与自定义状态管理库的深度集成及扩展

知识考点

面试题答案

设计思路

实现架构

关键代码逻辑