面试题：Next.js 自定义 App 组件中 Redux 与 MobX 用于全局状态管理的比较与实践

Redux 与 MobX 在 Next.js 自定义 App 组件处理复杂全局状态的优缺点

Redux
- 优点：
  - 可预测性：Redux 遵循严格的单向数据流，状态的改变只能通过派发 action 来实现，这使得应用的状态变化非常可预测，易于调试。例如，在大型团队开发中，新成员可以快速理解状态变化的逻辑。
  - 工具生态丰富：有众多与之配套的工具，如 Redux DevTools ，能方便地查看状态变化历史，回溯到任意状态节点，大大提升调试效率。
- 缺点：
  - 样板代码多：实现一个简单的状态管理，需要编写大量的 action、reducer 和 store 相关代码。例如，只是增加一个简单的计数器功能，就需要定义 action type、action creator、reducer 函数等。
  - 性能开销：每次状态变化都需要重新计算整个 state 树，即使只有一小部分数据发生改变，在大型应用中可能导致性能问题。
MobX
- 优点：
  - 简洁高效：通过响应式编程，MobX 能自动跟踪状态变化和相关联的视图更新，大大减少了样板代码。例如，定义一个可观察状态和与之关联的计算属性非常简洁。
  - 高性能：它采用细粒度的状态跟踪，只有依赖发生变化的部分才会重新计算和更新，在处理复杂状态时性能表现较好。
- 缺点：
  - 调试难度：由于其响应式机制，状态变化相对不那么直观，调试起来比 Redux 更困难，尤其是在大型复杂应用中，追踪状态变化源头可能较为复杂。
  - 学习曲线：对于习惯传统命令式编程的开发者，MobX 的响应式编程模式可能需要一定时间适应。

选择 MobX 实现用户详细信息全局状态管理及原因

原因：在项目中有多个页面依赖用户详细信息作为全局状态，MobX 的简洁高效和细粒度状态跟踪更适合这种场景。可以减少样板代码，提高开发效率，同时保证在状态频繁更新时的高性能。而且 Next.js 本身支持基于页面的路由和状态管理，MobX 与之结合能更灵活地处理每个页面的状态依赖。
实现示例：
- 首先安装 MobX 和 MobX - React：

npm install mobx mobx - react

- 创建 `store/userStore.js` 文件：

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

class UserStore {
    constructor() {
        this.name = '';
        this.age = 0;
        this.address = '';

        makeObservable(this, {
            name: observable,
            age: observable,
            address: observable,
            setUserInfo: action
        });
    }

    setUserInfo = (name, age, address) => {
        this.name = name;
        this.age = age;
        this.address = address;
    };
}

const userStore = new UserStore();
export default userStore;

- 在 Next.js 的自定义 App 组件（`pages/_app.js`）中使用：

import React from'react';
import { Provider } from'mobx - react';
import userStore from '../store/userStore';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Provider userStore={userStore}>
            <Component {...pageProps} />
        </Provider>
    );
}

export default MyApp;

- 在具体页面（如 `pages/HomePage.js`）中使用状态：

import React from'react';
import { useObserver } from'mobx - react';
import userStore from '../store/userStore';

const HomePage = () => {
    return useObserver(() => (
        <div>
            <p>Name: {userStore.name}</p>
            <p>Age: {userStore.age}</p>
            <p>Address: {userStore.address}</p>
        </div>
    ));
};

export default HomePage;

星途面试题库

面试题：Next.js 自定义 App 组件中 Redux 与 MobX 用于全局状态管理的比较与实践

知识考点

面试题答案

Redux 与 MobX 在 Next.js 自定义 App 组件处理复杂全局状态的优缺点

选择 MobX 实现用户详细信息全局状态管理及原因