面试题：Next.js中如何在嵌套路由间实现简单的状态同步

基本步骤：
- 步骤一：共享状态：
  - 可以通过Context（上下文）来共享状态。在Next.js中，利用React的createContext创建一个上下文对象，将count状态放在上下文里。这样父路由组件及其子路由组件都可以访问这个状态。
  - 另一种方式是使用状态管理库，如Redux或MobX。以Redux为例，将count状态存储在Redux的store中，这样不同层级的组件都能获取该状态。
- 步骤二：传递更新函数：
  - 如果使用Context，在父路由组件中，将更新count的函数（例如setCount，假设使用useState创建count状态）一同通过上下文传递给子路由组件。子路由组件调用这个函数来更新count。
  - 若使用Redux，子路由组件通过dispatch动作（action）来更新Redux store中的count状态。例如，定义一个incrementCount action，子路由组件dispatch这个action来更新count。
可能用到的技术：
- React Context：
  - createContext：用于创建上下文对象。
  - Context.Provider：在父路由组件中包裹需要共享状态的子组件，将状态和更新函数作为value属性传递。
  - Context.Consumer（或useContext Hook）：在子路由组件中使用，获取共享的状态和更新函数。例如：

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

const CountContext = createContext();

const ParentComponent = () => {
    const [count, setCount] = useState(0);
    return (
        <CountContext.Provider value={{ count, setCount }}>
            {/* 子路由组件 */}
        </CountContext.Provider>
    );
};

const ChildComponent = () => {
    const { count, setCount } = useContext(CountContext);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

Redux：
- 安装依赖：redux和react - redux。
- 创建store：配置Redux store，定义reducer来处理状态更新。例如：

import { createStore } from'redux';

const initialState = {
    count: 0
};

const countReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT_COUNT':
            return {
               ...state,
                count: state.count + 1
            };
        default:
            return state;
    }
};

const store = createStore(countReducer);

 - **连接组件**：在Next.js应用中，通过`Provider`将store提供给整个应用。子路由组件使用`connect`（高阶组件）或`useSelector`和`useDispatch` Hook来获取状态和分发action。例如：

import React from'react';
import { Provider } from'react - redux';
import { useSelector, useDispatch } from'react - redux';

const App = () => {
    return (
        <Provider store={store}>
            {/* 应用内容，包括子路由组件 */}
        </Provider>
    );
};

const ChildComponent = () => {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch({ type: 'INCREMENT_COUNT' })}>Increment</button>
        </div>
    );
};

MobX：
- 安装依赖：mobx和mobx - react。
- 创建store：定义一个MobX store类，包含状态和修改状态的方法。例如：

import { makeObservable, observable, action } from'mobx';

class CountStore {
    count = 0;
    constructor() {
        makeObservable(this, {
            count: observable,
            incrementCount: action
        });
    }
    incrementCount() {
        this.count++;
    }
}

const countStore = new CountStore();

 - **连接组件**：在Next.js应用中，通过`Provider`将store提供给整个应用。子路由组件使用`observer`高阶组件包裹，自动响应状态变化。例如：

import React from'react';
import { Provider } from'mobx - react';
import { observer } from'mobx - react';

const App = () => {
    return (
        <Provider countStore={countStore}>
            {/* 应用内容，包括子路由组件 */}
        </Provider>
    );
};

const ChildComponent = observer(() => {
    const { countStore } = React.useContext(Context);
    return (
        <div>
            <p>Count: {countStore.count}</p>
            <button onClick={() => countStore.incrementCount()}>Increment</button>
        </div>
    );
});

面试题：Next.js中如何在嵌套路由间实现简单的状态同步

知识考点

面试题答案