面试题：Next.js嵌套路由中如何通过Context进行状态管理

Question

在Next.js的嵌套路由场景下，阐述如何利用React的Context API来进行状态管理。请详细说明创建Context、传递数据以及在嵌套组件中消费数据的步骤，并给出简单代码示例。

Answer 1

创建Context

1. 首先在Next.js项目中，引入createContext 来自 react 库。

import React from 'react';
const MyContext = React.createContext();
export default MyContext;

这里创建了一个名为 MyContext 的上下文对象，它有两个属性 Provider 和 Consumer。

传递数据

1. 在顶层组件（通常是 pages/_app.js 或者某个包裹了嵌套路由组件的父组件）中使用 Provider 来传递数据。

import React from 'react';
import MyContext from '../path/to/MyContext';

function MyApp({ Component, pageProps }) {
    const myValue = {
        data: 'Some data to be shared',
        functionToShare: () => console.log('Shared function')
    };
    return (
        <MyContext.Provider value={myValue}>
            <Component {...pageProps} />
        </MyContext.Provider>
    );
}

export default MyApp;

value 属性是要传递给子孙组件的数据，可以是对象、函数等任何数据类型。

在嵌套组件中消费数据

1. 使用 Consumer（旧方法）：

import React from'react';
import MyContext from '../path/to/MyContext';

function NestedComponent() {
    return (
        <MyContext.Consumer>
            {contextValue => (
                <div>
                    <p>{contextValue.data}</p>
                    <button onClick={contextValue.functionToShare}>Click me</button>
                </div>
            )}
        </MyContext.Consumer>
    );
}

export default NestedComponent;

2. 使用 useContext Hook（新方法，更简洁）：

import React, { useContext } from'react';
import MyContext from '../path/to/MyContext';

function NestedComponent() {
    const contextValue = useContext(MyContext);
    return (
        <div>
            <p>{contextValue.data}</p>
            <button onClick={contextValue.functionToShare}>Click me</button>
        </div>
    );
}

export default NestedComponent;

在Next.js的嵌套路由场景下，通过以上步骤就可以利用React的Context API来进行状态管理，无论组件嵌套有多深，都能方便地共享数据。