面试题：Next.js嵌套路由的数据传递与状态管理

1. 使用 React Context（上下文）

实现方式：
- 创建一个 React Context 对象，在父路由组件中通过 Provider 将数据传递下去，深层子路由组件通过 Consumer 或者 useContext Hook 来获取数据。
- 例如：

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

const MyContext = createContext();

const ParentComponent = () => {
  const [data, setData] = useState({});
  return (
    <MyContext.Provider value={{ data, setData }}>
      {/* 子组件树 */}
    </MyContext.Provider>
  );
};

const DeepChildComponent = () => {
  const { data } = React.useContext(MyContext);
  return <div>{JSON.stringify(data)}</div>;
};

优点：
- 不需要引入额外的库，React 内置支持，简单方便。
- 对于一些不需要复杂状态管理逻辑，只是在组件树中共享数据的场景很适用。
- 能够实时更新数据，因为当 Provider 的 value 变化时，使用 Consumer 或 useContext 的组件会重新渲染。
缺点：
- 数据变化会导致所有使用该 Context 的组件重新渲染，即使数据对于某些组件没有实际变化，可能引起不必要的性能开销。
- 当 Context 嵌套层次过深或在大型应用中使用，数据流向不够清晰，调试困难。
适用场景：
- 应用规模较小，数据共享层级相对较浅，且数据变化频率不高的场景。例如在一个简单的导航栏和页面内容组件之间共享一些用户设置数据。

2. 使用 Redux

实现方式：
- 安装 redux 和 react - redux 库。
- 创建 Redux store，定义 actions（用于描述数据变化）和 reducers（根据 actions 更新 state）。
- 在父组件中通过 dispatch 触发 actions 来更新 state，子组件通过 connect 方法（旧方式）或者 useSelector 和 useDispatch Hooks（新方式）来获取和更新数据。
- 例如：

// actions.js
const UPDATE_DATA = 'UPDATE_DATA';
export const updateData = (newData) => ({
  type: UPDATE_DATA,
  payload: newData
});

// reducers.js
const initialState = {};
const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_DATA:
      return action.payload;
    default:
      return state;
  }
};

// store.js
import { createStore } from'redux';
const store = createStore(dataReducer);

// 父组件
import React from'react';
import { updateData } from './actions';
import { useDispatch } from'react - redux';

const ParentComponent = () => {
  const dispatch = useDispatch();
  const handleDataUpdate = (newData) => {
    dispatch(updateData(newData));
  };
  return (
    // 子组件树
  );
};

// 子组件
import React from'react';
import { useSelector } from'react - redux';

const DeepChildComponent = () => {
  const data = useSelector((state) => state);
  return <div>{JSON.stringify(data)}</div>;
};

优点：
- 状态管理集中化，数据流向清晰，便于调试和维护。
- 基于 reducers 的纯函数更新机制，使得状态变化可预测。
- 提供了 middleware 机制，方便进行异步操作、日志记录等功能扩展。
- 可以精准控制组件的重新渲染，通过 shouldComponentUpdate 或者 React.memo 与 useSelector 结合，只有当组件依赖的 state 部分变化时才重新渲染。
缺点：
- 引入额外的库，增加了项目的学习成本和代码量。
- 对于简单应用，可能过度设计，配置和使用相对复杂。
适用场景：
- 大型应用，需要复杂的状态管理和多人协作开发的场景。例如电商应用中管理商品列表、购物车、用户信息等复杂状态。

3. 使用 MobX

实现方式：
- 安装 mobx 和 mobx - react 库。
- 创建 observable state（可观察状态），定义 actions（修改状态的方法）和 computed（基于现有状态派生的状态）。
- 使用 observer 函数包裹需要响应状态变化的组件，这些组件会自动订阅相关状态，状态变化时重新渲染。
- 例如：

// store.js
import { makeObservable, observable, action } from'mobx';

class DataStore {
  data = {};
  constructor() {
    makeObservable(this, {
      data: observable,
      updateData: action
    });
  }
  updateData(newData) {
    this.data = newData;
  }
}

const dataStore = new DataStore();

// 父组件
import React from'react';
import { useStore } from './store';

const ParentComponent = () => {
  const { updateData } = useStore();
  const handleDataUpdate = (newData) => {
    updateData(newData);
  };
  return (
    // 子组件树
  );
};

// 子组件
import React from'react';
import { observer } from'mobx - react';
import { useStore } from './store';

const DeepChildComponent = observer(() => {
  const { data } = useStore();
  return <div>{JSON.stringify(data)}</div>;
});

优点：
- 基于观察者模式，自动追踪状态变化，代码简洁，易于理解和编写。
- 细粒度的状态控制，只有依赖变化状态的组件会重新渲染，性能较好。
- 与 React 集成良好，学习成本相对 Redux 较低。
缺点：
- 数据流向不如 Redux 清晰，尤其是在大型项目中，调试相对困难。
- 引入额外的库，增加了项目的复杂度。
适用场景：
- 中大型应用，希望在保持一定状态管理复杂度的同时，提高开发效率，对性能有较高要求的场景。例如实时协作的文档编辑应用，需要实时更新文档内容状态。

4. 使用 Next.js 的 App Router（实验性功能，截至 2023 年 11 月）

实现方式：
- Next.js 的 App Router 提供了 useSearchParams 和 update 方法，可以在路由之间传递数据。
- 父路由组件可以通过修改 searchParams 来传递数据，子路由组件通过 useSearchParams 获取数据。
- 例如：

// 父路由组件
import { useRouter } from 'next/navigation';
import Link from 'next/link';

const ParentComponent = () => {
  const router = useRouter();
  const handleClick = () => {
    const newData = { key: 'value' };
    router.push({
      pathname: '/child - route',
      search: `data=${encodeURIComponent(JSON.stringify(newData))}`
    });
  };
  return (
    <button onClick={handleClick}>
      Go to Child Route with Data
    </button>
  );
};

// 子路由组件
import { useSearchParams } from 'next/navigation';

const DeepChildComponent = () => {
  const searchParams = useSearchParams();
  const data = searchParams.get('data');
  return <div>{data}</div>;
};

优点：
- 利用 Next.js 自身的路由功能，不需要引入额外的库。
- 适用于基于路由切换传递数据的场景，数据传递直观。
缺点：
- 数据格式受限，通常以字符串形式传递，需要进行序列化和反序列化。
- 不太适合实时更新频繁的数据，因为每次更新都需要进行路由跳转或修改 searchParams。
适用场景：
- 简单的页面间数据传递场景，例如从列表页传递选中项的 ID 到详情页。

星途面试题库

面试题：Next.js嵌套路由的数据传递与状态管理

知识考点

面试题答案

1. 使用 React Context（上下文）

2. 使用 Redux

3. 使用 MobX

4. 使用 Next.js 的 App Router（实验性功能，截至 2023 年 11 月）