面试题：JavaScript服务端渲染框架应用

1. 使用 Context API

原理：在 React（Next.js 基于 React）中，Context 提供了一种在组件树中共享数据的方式，无需在每个层级手动传递 props。
示例：

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

// 创建 Context
const MyContext = createContext();

const MyApp = () => {
  const [sharedData, setSharedData] = useState('初始数据');

  return (
    <MyContext.Provider value={{ sharedData, setSharedData }}>
      {/* 应用的其他部分 */}
    </MyContext.Provider>
  );
};

// 在其他组件中使用
const ChildComponent = () => {
  const { sharedData, setSharedData } = React.useContext(MyContext);

  return (
    <div>
      <p>{sharedData}</p>
      <button onClick={() => setSharedData('新数据')}>更新数据</button>
    </div>
  );
};

2. Redux

原理：Redux 是一个可预测的状态容器，用于 JavaScript 应用。它将应用的状态存储在一个单一的 store 中，通过 actions 来描述状态的变化，reducers 来处理这些变化。
示例：

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

// reducers.js
const initialState = {
  sharedData: '初始数据'
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_DATA:
      return {...state, sharedData: action.payload };
    default:
      return state;
  }
};

// store.js
import { createStore } from'redux';
import { rootReducer } from './reducers';

const store = createStore(rootReducer);

// 组件中使用
import React from'react';
import { useSelector, useDispatch } from'react-redux';
import { updateData } from './actions';

const MyComponent = () => {
  const sharedData = useSelector(state => state.sharedData);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{sharedData}</p>
      <button onClick={() => dispatch(updateData('新数据'))}>更新数据</button>
    </div>
  );
};

3. Vuex（适用于 Nuxt.js，基于 Vue）

原理：Vuex 是 Vue.js 应用的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
示例：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  sharedData: '初始数据'
};

const mutations = {
  UPDATE_DATA(state, newData) {
    state.sharedData = newData;
  }
};

const actions = {
  updateData({ commit }, newData) {
    commit('UPDATE_DATA', newData);
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

<template>
  <div>
    <p>{{ sharedData }}</p>
    <button @click="updateData('新数据')">更新数据</button>
  </div>
</template>

<script>
export default {
  computed: {
    sharedData() {
      return this.$store.state.sharedData;
    }
  },
  methods: {
    updateData(newData) {
      this.$store.dispatch('updateData', newData);
    }
  }
};
</script>

4. 使用自定义全局变量（不推荐用于复杂场景）

原理：直接定义一个全局变量，在不同页面或组件中访问和修改。
示例：

// 在某个模块中定义全局变量
let globalSharedData = '初始数据';

// 在其他模块中使用
function updateGlobalData(newData) {
  globalSharedData = newData;
  return globalSharedData;
}

function getGlobalData() {
  return globalSharedData;
}

这种方式简单直接，但在大型应用中难以维护和调试，可能会导致命名冲突等问题。

星途面试题库

面试题：JavaScript服务端渲染框架应用

知识考点

面试题答案

1. 使用 Context API

2. Redux

3. Vuex（适用于 Nuxt.js，基于 Vue）

4. 使用自定义全局变量（不推荐用于复杂场景）