面试题：复杂场景下React Context性能优化策略

1. 数据结构设计优化

思路：精简Context传递的数据。只传递真正需要跨层级共享且频繁变化的数据，对于其他相对稳定的数据，可以通过其他方式（如props）传递。这样能减少不必要的重新渲染。
代码示例：

// 假设原Context数据结构
const BigContext = React.createContext({
  user: { name: 'John', age: 30 }, // 稳定数据
  theme: 'light', // 频繁变化数据
  settings: { fontSize: 16 } // 稳定数据
});

// 优化后，将稳定数据和频繁变化数据分开
const ThemeContext = React.createContext('light');
const StableContext = React.createContext({
  user: { name: 'John', age: 30 },
  settings: { fontSize: 16 }
});

2. 更新机制调整

思路：
- shouldComponentUpdate：在使用Context的组件中，通过shouldComponentUpdate生命周期方法（对于类组件）或React.memo（对于函数组件）来控制组件是否需要更新。只在Context中真正影响该组件的数据变化时才更新。
- 使用Reducer：对于Context数据的更新，使用Reducer而不是直接修改数据。Reducer可以更好地管理状态变化，并且方便进行数据变化追踪和性能优化。
代码示例：
- 函数组件使用React.memo

const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

- **类组件使用shouldComponentUpdate**

class MyClassComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value!== this.props.value;
  }
  render() {
    return <div>{this.props.value}</div>;
  }
}

- **使用Reducer更新Context数据**

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

// Reducer函数
const myReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

const MyProvider = ({ children }) {
  const [state, dispatch] = React.useReducer(myReducer, { value: initialValue });
  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

3. 缓存策略

思路：
- Memoize Context值：使用useMemo来缓存Context的值，避免不必要的重新计算。
- 缓存Context数据请求：如果Context数据来自异步请求，可以缓存请求结果，避免重复请求。
代码示例：
- 使用useMemo缓存Context值

const MyContext = React.createContext();

const MyProvider = ({ children }) {
  const expensiveValue = React.useMemo(() => {
    // 复杂计算
    return calculateExpensiveValue();
  }, []);

  return (
    <MyContext.Provider value={expensiveValue}>
      {children}
    </MyContext.Provider>
  );
};

- **缓存Context数据请求**

const cache = {};
const fetchData = async () => {
  if (cache['myData']) {
    return cache['myData'];
  }
  const response = await fetch('/api/data');
  const data = await response.json();
  cache['myData'] = data;
  return data;
};

4. 拆分Context

思路：将大的Context拆分成多个小的Context，每个Context专注于特定的功能或数据领域。这样，当某个Context数据更新时，只会影响依赖该Context的组件，而不会导致整个应用重新渲染。
代码示例：

// 原大Context
const BigContext = React.createContext({
  userInfo: { name: 'Alice' },
  appSettings: { theme: 'dark' },
  messages: ['Hello']
});

// 拆分后的Context
const UserContext = React.createContext({ name: 'Alice' });
const SettingsContext = React.createContext({ theme: 'dark' });
const MessagesContext = React.createContext(['Hello']);

面试题：复杂场景下React Context性能优化策略

知识考点

面试题答案

1. 数据结构设计优化

2. 更新机制调整

3. 缓存策略

4. 拆分Context