面试题：React useRef钩子在复杂组件通信与状态管理中的高级应用

整体架构设计思路

Context 创建与使用：

创建一个 React Context，用于在组件树中共享数据。在父组件 A 中，通过 createContext 创建上下文对象，并使用 Context.Provider 包裹需要共享数据的组件树部分。
例如：

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

const MyContext = createContext();

const ParentComponentA = () => {
  const [sharedData, setSharedData] = useState('初始数据');
  return (
    <MyContext.Provider value={{ sharedData, setSharedData }}>
      {/* 中间层组件 B 和子组件 C 等 */}
    </MyContext.Provider>
  );
};

中间层组件 B 传递数据：中间层组件 B 无需额外处理，只要在父组件 A 的 Context.Provider 包裹范围内，其下的子组件 C 就能访问到 Context 数据。

子组件 C 访问与通信：子组件 C 通过 MyContext.Consumer 或者 useContext 钩子来访问 Context 中的数据和函数。

使用 useContext 钩子示例：

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

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

useRef 结合使用：在子组件 C 中，可以使用 useRef 来保存一些中间状态或者标记。例如，如果子组件 C 需要在某个特定操作后通知父组件 A，但又不想频繁更新 Context 中的数据（避免不必要的重新渲染），可以用 useRef 来标记。

示例：

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

const ChildComponentC = () => {
  const { setSharedData } = useContext(MyContext);
  const flagRef = useRef(false);

  const handleClick = () => {
    flagRef.current = true;
    // 当满足某些条件时，通过 Context 通知父组件更新数据
    if (flagRef.current) {
      setSharedData('基于标记更新的数据');
    }
  };

  return (
    <div>
      <button onClick={handleClick}>触发操作</button>
    </div>
  );
};

useRef 的关键作用

保存中间状态：useRef 可以保存一个可变值，且不会触发组件重新渲染。在子组件 C 中，它可以用来记录一些中间状态，如某个操作是否已经执行，避免因频繁更新 Context 数据导致的不必要渲染。
标记与触发通信：通过修改 useRef 的值，子组件 C 可以在合适的时机利用 Context 中的函数与父组件 A 进行通信，而不是在每次小变化时都通过 Context 更新数据。

与传统 Redux 方案相比的优势

轻量级：对于这种相对简单的多层组件通信场景，使用 Context 和 useRef 无需引入像 Redux 这样庞大的状态管理库，减少了代码复杂度和打包体积。
易于理解和调试：React 本身的 Context 机制是组件树内共享数据的一种原生方式，结合 useRef 后，开发者更容易理解数据流向和组件间的通信逻辑，相比 Redux 的复杂概念（如 action、reducer、store 等）更易上手调试。

与传统 Redux 方案相比的劣势

状态管理能力有限：如果应用规模扩大，需要管理大量复杂状态和进行状态的持久化、服务器端渲染等操作，Context 和 useRef 的组合方式不如 Redux 强大。Redux 有成熟的中间件机制（如 redux - thunk、redux - saga 等）来处理异步操作和复杂的状态更新逻辑。
缺乏统一规范：Redux 遵循严格的单向数据流模式，有明确的状态更新规则和最佳实践。而使用 Context 和 useRef 实现组件通信，开发者可能会因个人习惯产生不同的代码结构，缺乏统一规范，不利于大型团队协作开发。

面试题：React useRef钩子在复杂组件通信与状态管理中的高级应用

知识考点

面试题答案

整体架构设计思路

useRef 的关键作用

与传统 Redux 方案相比的优势

与传统 Redux 方案相比的劣势