这个问题的核心，不是“依赖数组怎么写”，而是：React 是如何判断副作用是否需要重新执行的。

依赖数组的存在，本质是为了让 React 在两次 render 之间进行一次“浅层比较（shallow compare）”，从而决定是否跳过本次 effect 的执行。

一、从 useEffect 的执行时机说起

useEffect(() => {
  // effect
}, [a, b]);

React 在每次 render 结束后，会把 effect 收集到 Fiber 节点的 effect 链表中。

当进入 commit 阶段时，React 会：

1. 取出当前 Fiber 上一次保存的依赖数组
2. 与本次 render 生成的新依赖数组进行比较
3. 决定是否标记该 effect 需要执行

如果依赖变化，则：

• 先执行上一次的 cleanup
• 再执行新的 effect

如果依赖未变化，则跳过。

二、底层判断逻辑

React 内部判断依赖是否变化，核心逻辑类似：

function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) return false;

  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(nextDeps[i], prevDeps[i])) {
      return false;
    }
  }
  return true;
}

关键点有两个：

1. 使用的是 Object.is

不是 ===，而是 Object.is，因此：

• NaN 与 NaN 被认为相等
• +0 与 -0 被认为不相等

这是为了和 React 内部状态更新逻辑保持一致。

2. 只做浅比较

依赖数组中的每一项，只做引用层级的比较。

这意味着：

useEffect(() => {}, [{}]);

每次 render 都会重新执行，因为对象引用变化。

三、为什么依赖数组必须写全

React 不会分析 effect 内部使用了哪些变量。

依赖数组完全由开发者声明。

如果 effect 内部使用了某个变量，但没有放入依赖数组，那么：

• 变量变化时 effect 不会重新执行
• effect 内部捕获的是旧闭包中的值
• 出现“闭包陷阱”（stale closure）

例如：

useEffect(() => {
  console.log(count);
}, []);

这里只会打印初始 count，因为 effect 永远不会重新执行。

这不是 React 的 bug，而是依赖声明不完整。

ESLint 的 react-hooks/exhaustive-deps 插件，本质是在做静态分析，提醒依赖缺失。

四、空数组与不写依赖的区别

useEffect(() => {}, []);

表示：只在首次挂载时执行一次（以及卸载时 cleanup）。

而：

useEffect(() => {});

表示：每次 render 后都执行。

这两种语义差异非常大。

五、依赖数组与性能的关系

依赖数组不是用来“优化性能”的工具，而是用来声明副作用与状态之间的关系。

如果依赖声明准确：

• effect 执行次数最少
• 逻辑正确

如果为了“减少执行”而故意删除依赖：

• 会产生逻辑错误
• 引入难以排查的状态不一致问题

真正的优化方式应该是：

• 使用 useMemo / useCallback 保持引用稳定
• 或者重构 effect 逻辑

六、从 Fiber 角度理解

每个 Hook 在 Fiber 上都会形成一个链表节点：

• memoizedState：存储上一次依赖
• next：指向下一个 Hook

在下一次 render 时：

• React 按调用顺序读取对应 Hook 节点
• 拿到上一次的依赖
• 进行对比

这也是为什么 Hook 调用顺序必须稳定。

依赖数组只是挂在这个 Hook 节点上的一段元数据。

七、一个常见误区

很多人认为依赖数组是“监听变量变化”。

实际上 React 并不会监听变量。

变量变化只是触发 render，render 之后 React 才会在 commit 阶段做依赖比较。

也就是说：

依赖数组不参与“触发更新”，只参与“是否执行副作用”。

在探讨 React 虚拟 DOM（Virtual DOM）所解决的问题时，不能简单地将其归结为“性能更快”，这实际上是一个常见的误区。

从长期的工程实践和框架演进来看，虚拟 DOM 核心解决了以下几个维度的挑战：

1. 解决跨平台与抽象层的问题

虚拟 DOM 最本质的贡献在于建立了一层声明式的抽象。在传统的 Web 开发中，代码直接耦合在真实的 DOM 环境中。而虚拟 DOM 将复杂的 UI 转换成了一种轻量级的 JavaScript 对象结构（即 VNode）。

这种抽象层使得 React 脱离了浏览器的物理限制。因为 VNode 只是普通的 JS 对象，它不仅可以被渲染为浏览器的 DOM，也可以被渲染为移动端的原生控件（React Native）、服务端字符串（SSR）甚至是 Canvas 绘制指令。它解决了 UI 描述与底层渲染引擎之间的强耦合问题，实现了“一次学习，随处编写”的愿景。

2. 解决复杂 UI 状态下的开发效率

在原生 DOM 时代，开发者需要手动管理状态与 UI 的同步。当页面状态变得错综复杂时，命令式的 DOM 操作（如 appendChild 或 removeChild）会导致代码难以维护且极易出错。

虚拟 DOM 配合 Diff 算法，将“手动更新”转变为“自动收集并批量更新”。开发者只需要关注状态（State）的变化，React 会自动计算出新旧视图的差异并进行补丁式更新。这极大地降低了心智负担，解决了在大规模应用中如何保持代码整洁与状态一致性的难题。

3. 解决性能的下限与补丁式优化

虽然手动编写极致优化的原生 DOM 操作在性能上理论上永远优于框架，但在生产环境下，大部分开发者很难在每一处逻辑中都做到最优。虚拟 DOM 实际上是提供了一个性能下限的保障。

它通过 Diff 算法避免了频繁且大面积的真实 DOM 重排（Reflow）与重绘（Repaint）。当状态发生多次变化时，虚拟 DOM 会在内存中完成所有的计算和比对，最后只对真实 DOM 进行一次最小化的、批量的修改。它解决的是在不进行精细化手动优化的前提下，依然能让复杂的 Web 应用保持流畅运行的问题。

在 Next.js 中，App Router 和 Page Router 代表了两种不同的路由体系，它们不仅仅是目录结构上的差异，更深层次上体现了 Next.js 从传统页面路由向以 React Server Components 为核心的现代应用架构的转变。

Page Router 是 Next.js 自早期版本就存在的路由机制，遵循的是 pages 目录驱动的约定式路由。它的设计理念非常接近传统的 SPA 框架：

• 所有页面组件都是客户端组件，页面切换通过内置的 Link 组件完成。
• 数据获取方式依赖 getServerSideProps、getStaticProps 和 getInitialProps，这种模式有一定约束性，开发者需要明确区分静态渲染和服务端渲染的场景。
• 在代码组织上，业务逻辑和页面视图容易耦合到同一组件中，长远来看会影响代码的模块化和可维护性。

App Router 则是自 Next.js 13 引入的新一代路由方案，它以 app 目录为核心，充分利用了 React 18 的新特性，尤其是 Server Components：

• 默认支持 React Server Components，意味着页面和组件可以天然地运行在服务端，减少了前端 bundle 体积，提升性能。
• 提供了全新的 数据获取模式，通过 fetch 的服务端调用和 async 组件来实现，开发者无需再显式区分 SSR/SSG，而是以“组件即数据边界”的思路来组织逻辑。
• 更加灵活的 布局系统，支持嵌套 Layout、模板以及 Server Actions，使得应用在结构化、模块化和复用性上有显著提升。
• 渲染模型也更先进，例如 Streaming 和 Suspense 的原生支持，使得用户能更快看到页面的首屏内容。

如果从项目实际落地来看，Page Router 更适合传统的中小型项目或老项目迁移时的平滑过渡，而 App Router 则面向中大型、需要可扩展性和性能优化的新项目。它代表了 Next.js 的未来方向，后续生态和新特性都会优先支持 App Router。

在 React 中，useEffect 是 函数组件处理副作用的核心 Hook，它可以替代类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法。

1. 作用

useEffect 的主要作用是：

1. 执行副作用操作：包括数据请求、订阅事件、DOM 操作、定时器、日志记录等。
2. 在组件挂载、更新或卸载时执行：根据依赖数组的不同，可以控制副作用执行的时机。

注意：副作用指的不是纯计算，而是对组件外部世界产生影响的操作。

2. 参数

useEffect 接收两个参数：

useEffect(effect: () => (void | (() => void)), deps?: any[])

1. effect

   • 一个函数，包含副作用逻辑。
   • 可以返回一个清理函数，用于在组件卸载或副作用重新执行前进行清理。

2. deps（依赖数组，可选）

   • 指定副作用依赖的变量数组。
   • React 会在依赖变化时重新执行 effect。
   • 如果不传依赖数组 → 每次渲染都执行
   • 空数组 [] → 仅在组件挂载和卸载时执行
   • 含有依赖 [a, b] → 只有当 a 或 b 改变时执行

3. 使用示例

（1）组件挂载时执行一次副作用

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('组件挂载');

    return () => {
      console.log('组件卸载');
    };
  }, []); // 空依赖数组
}

（2）依赖某些状态更新时执行

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('count 更新为:', count);
  }, [count]); // 依赖 count
}

（3）副作用中设置定时器，并在卸载时清理

useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时器触发');
  }, 1000);

  return () => clearInterval(timer); // 清理
}, []); // 挂载时设置，卸载时清理

4. 注意事项

1. 避免依赖遗漏

   • 所有在副作用中使用的外部变量（状态、props、函数）都应该在依赖数组中列出，否则可能出现闭包陷阱。

2. 清理副作用

   • 在副作用中注册事件或定时器时，要返回清理函数，避免内存泄漏。

3. 多个 useEffect 可以共存

   • 每个副作用可以单独声明，提高逻辑可读性。

在 React 中，如果想实现一个可以 监听任意 DOM 或全局事件的 Hook，核心思路是：

1. 利用 useEffect 做生命周期管理，确保事件绑定和解绑正确；
2. 使用 useRef 保存回调函数，避免每次渲染都重新绑定；
3. 支持可配置的事件源（window、document、任意 DOM 元素）。

一、核心 Hook 实现

import { useEffect, useRef } from 'react';

/**
 * useEventListener - 通用事件监听 Hook
 * @param {string} eventName - 事件名
 * @param {function} handler - 事件回调
 * @param {EventTarget} element - 监听目标，默认 window
 */
function useEventListener(eventName, handler, element = window) {
  // 保存 handler 的最新引用，避免每次 render 重新绑定
  const savedHandler = useRef();

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    // 确保 element 可用
    const targetElement = element && 'addEventListener' in element ? element : window;
    if (!targetElement) return;

    // 定义事件回调，保证调用最新 handler
    const eventListener = (event) => savedHandler.current(event);

    targetElement.addEventListener(eventName, eventListener);

    // 清理函数
    return () => {
      targetElement.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}

export default useEventListener;

二、使用示例

1. 监听窗口大小变化

import useEventListener from './useEventListener';
import { useState } from 'react';

function WindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEventListener('resize', () => {
    setSize({ width: window.innerWidth, height: window.innerHeight });
  });

  return <div>窗口大小: {size.width} x {size.height}</div>;
}

2. 监听键盘事件

function KeyLogger() {
  useEventListener('keydown', (e) => {
    console.log('按下的键:', e.key);
  });

  return <div>按下任意键查看控制台日志</div>;
}

三、设计要点

1. 避免重复绑定：

   • useRef 保存 handler，useEffect 只在事件类型或目标改变时绑定/解绑；

2. 清理事件：

   • useEffect 返回清理函数，保证组件卸载时不会造成内存泄漏；

3. 支持灵活事件源：

   • 默认绑定到 window，也可以传入任意 EventTarget 或 DOM 元素。

4. 可复用性高：

   • 这个 Hook 可用于监听任意事件，如鼠标、滚动、键盘、拖拽、自定义事件等。

在 React 项目中，错误处理一般分为 组件级错误 和 全局错误，主要采用 错误边界（Error Boundaries）、try...catch、全局监听 以及 日志上报 等方式。

1. 错误边界（Error Boundaries）（处理渲染、生命周期方法中的错误）

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error('Error:', error, info);
  }

  render() {
    if (this.state.hasError) return <h1>出错了！</h1>;
    return this.props.children;
  }
}

// 使用：
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

2. try...catch 处理事件错误

React 事件处理程序不会被 ErrorBoundary 捕获，需要手动用 try...catch 处理：

const handleClick = () => {
  try {
    // 可能出错的代码
  } catch (error) {
    console.error('事件错误:', error);
  }
};
<button onClick={handleClick}>点击</button>

3. 全局监听（window.onerror、unhandledrejection）

对于 未捕获的 JavaScript 错误，可以用 window.onerror 或 unhandledrejection 进行兜底：

window.onerror = (message, source, lineno, colno, error) => {
  console.error('全局错误:', { message, source, lineno, colno, error });
};

window.addEventListener('unhandledrejection', (event) => {
  console.error('Promise 未捕获错误:', event.reason);
});

4. 日志上报

可以结合 Sentry 或其他监控系统，将错误上报：

import * as Sentry from '@sentry/react';
Sentry.init({ dsn: 'your-dsn-url' });

<Sentry.ErrorBoundary fallback={<h1>出错了</h1>}>
  <MyComponent />
</Sentry.ErrorBoundary>;

在 React 中，代码分割主要依赖于 React.lazy + Suspense 和 React Loadable（第三方库），此外 Webpack 的 import() 也能实现代码分割。

常见方式如下：

1. React.lazy + Suspense（官方推荐）
   

   const LazyComponent = React.lazy(() => import('./LazyComponent'));
   function App() {
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <LazyComponent />
       </Suspense>
     );
   }
   

2. import() 动态导入（适用于路由懒加载）
   

   import { lazy } from 'react';
   const LazyPage = lazy(() => import('./pages/LazyPage'));
   

3. React Loadable（第三方库，适用于更复杂的场景）
   

   import Loadable from 'react-loadable';
   const LoadableComponent = Loadable({
     loader: () => import('./MyComponent'),
     loading: () => <div>Loading...</div>,
   });
   

4. Webpack import() + optimization.splitChunks（适用于手动分割多个模块）
   

   module.exports = {
     optimization: {
       splitChunks: {
         chunks: 'all',
       },
     },
   };
   

使用 React.memo 优化条件渲染，主要是通过减少不必要的渲染来提高组件的性能。

React.memo 是一个高阶组件，在组件的 props 没有变化时跳过渲染，从而避免不必要的 DOM 更新。

1. React.memo 的基本原理

React.memo 是对函数组件的优化。当组件的 props 没有变化时，它会跳过该组件的渲染。通常情况下，React 会重新渲染组件，即使 props 没有改变，但通过 React.memo，我们可以控制这种行为。

2. 条件渲染的优化

在 React 中，条件渲染通常是根据某些条件来判断是否显示某个组件，比如通过 && 或 if 来控制组件的显示与隐藏：

function MyComponent({ shouldRender }) {
  return (
    <div>
      {shouldRender && <ExpensiveComponent />}
    </div>
  );
}

3. 使用 React.memo 优化条件渲染

假设 ExpensiveComponent 是一个渲染非常消耗性能的组件，在条件渲染的场景下，我们可以通过 React.memo 来避免 ExpensiveComponent 的重复渲染，尤其是当 shouldRender 没有变化时。

步骤 1：优化条件渲染

我们可以对 ExpensiveComponent 使用 React.memo 来缓存它的渲染结果，只有当它的 props 发生变化时才重新渲染：

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  console.log('ExpensiveComponent rendered');
  return <div>{data}</div>;
});

步骤 2：父组件的条件渲染

然后，在父组件中做条件渲染时，ExpensiveComponent 会根据 props 是否变化来决定是否重新渲染：

function ParentComponent({ shouldRender, data }) {
  return (
    <div>
      {shouldRender && <ExpensiveComponent data={data} />}
    </div>
  );
}

4. 自定义比较函数（可选）

如果默认的浅比较不满足要求（即某些复杂的对象或深层嵌套的对象），我们可以传递一个自定义比较函数来决定是否更新组件：

const ExpensiveComponent = React.memo(
  function ExpensiveComponent({ data }) {
    console.log('ExpensiveComponent rendered');
    return <div>{data}</div>;
  },
  (prevProps, nextProps) => {
    // 自定义比较函数：只有当 data 发生变化时才重新渲染
    return prevProps.data === nextProps.data;
  }
);

5. 优化场景

• 避免不必要的重新渲染：当父组件重新渲染，但子组件的 props 没有变化时，可以使用 React.memo 防止子组件的重新渲染。
• 条件渲染的场景：当有复杂的组件或组件树需要根据某个条件渲染时，使用 React.memo 可以避免不必要的渲染。

redux-thunk 是一个 Redux 中间件，用于处理异步操作和复杂的逻辑。它与 Redux 关系密切，但有不同的功能和作用。下面是它们之间的关系和作用：

1. Redux 的基本概念

• Redux：一个状态管理库，用于管理 JavaScript 应用的状态。Redux 采用单一的全局状态树，状态通过 Reducers 进行管理和更新，状态的变更通过 Action 和 Dispatch 来触发。

2. Redux 的局限性

• 同步操作：Redux 本身仅支持同步操作。这意味着，当你在 Redux 中发起 Action 时，Redux 期望这些 Action 是纯粹的同步操作，没有涉及到异步的请求或复杂的逻辑。

3. redux-thunk 的作用

• 异步操作：redux-thunk 是一个中间件，用于处理异步操作。它允许 Action Creators 返回函数而不是普通的 Action 对象。这个函数可以执行异步操作（如 API 请求），然后在操作完成后 dispatch 其他 Actions 来更新状态。

• 中间件：redux-thunk 是 Redux 的中间件之一。中间件是 Redux 的一种扩展机制，用于在 dispatch Action 之前或之后插入额外的逻辑。redux-thunk 使得 Action Creators 能够返回函数而不是普通的 Action 对象。

4. 使用示例

• 没有 redux-thunk：

  // Action Creator
  function fetchData() {
    return {
      type: 'FETCH_DATA',
      payload: data
    };
  }
  

• 使用 redux-thunk：

  // Action Creator with redux-thunk
  function fetchData() {
    return function(dispatch) {
      // 异步操作
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          dispatch({
            type: 'FETCH_DATA_SUCCESS',
            payload: data
          });
        })
        .catch(error => {
          dispatch({
            type: 'FETCH_DATA_FAILURE',
            payload: error
          });
        });
    };
  }
  

5. 集成

• 配置 Store：

  • 在 Redux Store 中使用 redux-thunk 中间件，需要通过 applyMiddleware 将其应用到 Redux Store 的创建过程中。

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  
  const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
  );
  

React Router 是一个用于处理 React 应用中的路由的库，其中 HashRouter 和 BrowserRouter 是两种主要的路由器组件。它们的主要区别在于路由的实现方式和 URL 的处理方式。下面是它们的区别和原理：

1. HashRouter

原理

• 哈希路由：HashRouter 使用 URL 的哈希（#）部分来保持和同步路由信息。哈希路由器将路由信息附加在 URL 的 # 之后，浏览器不会将其发送到服务器，这样所有的路由信息都在客户端处理。

  例如：

  • 当前 URL：http://example.com/#/home
  • HashRouter 解析 URL 中的 #/home 部分来决定显示哪个组件。

• 工作机制：

  • 浏览器的哈希变化不会导致页面重新加载，只会更新 window.location.hash。
  • 当 URL 中的哈希部分变化时，HashRouter 会监听这些变化并更新路由。

优点

• 服务器配置简化：由于路由信息不发送到服务器，服务器不需要对这些路由信息进行处理。适用于不需要配置服务器的场景。

缺点

• URL 体验较差：哈希值对用户不太友好，不支持传统的 URL 链接和书签功能。

2. BrowserRouter

原理

• HTML5 History API：BrowserRouter 使用 HTML5 的 History API 来管理路由。它通过 pushState 和 replaceState 操作历史记录，来改变浏览器的 URL 地址而不重新加载页面。

  例如：

  • 当前 URL：http://example.com/home
  • BrowserRouter 直接解析 /home 来决定显示哪个组件。

• 工作机制：

  • 通过 History API 更新浏览器的 URL，并监听这些变化来更新路由。
  • 需要服务器配置来处理路由，因为所有的路由信息都会发送到服务器，服务器需要进行相应的处理和配置。

优点

• 更干净的 URL：没有 # 符号，URL 更符合传统的路由标准。
• 更好的用户体验：支持完整的 URL 链接和书签功能。

缺点

• 服务器配置要求：需要服务器进行配置以支持前端路由，通常需要配置服务器将所有的请求重定向到应用的入口点（如 index.html）。

useRef、ref 和 forwardRef 都涉及到引用（refs）的使用，但它们的用途和行为有所不同。下面是它们的主要区别：

1. useRef

• 用途：在函数组件中创建和管理引用。useRef 返回一个可变的 ref 对象，该对象的 .current 属性可以用来访问 DOM 节点或保存任意值。

• 使用方式：

  import { useRef, useEffect } from 'react';
  
  function MyComponent() {
    const inputRef = useRef(null);
  
    useEffect(() => {
      inputRef.current.focus(); // 访问和操作 DOM 元素
    }, []);
  
    return <input ref={inputRef} />;
  }
  

• 特点：

  • useRef 创建的引用对象在组件的整个生命周期内保持不变。
  • 可以用来保存任意数据，除了 DOM 节点。

2. ref

• 用途：在类组件中使用，或者通过 React.forwardRef 在函数组件中使用，来访问 DOM 节点或组件实例。

• 使用方式：

  class MyClassComponent extends React.Component {
    constructor(props) {
      super(props);
      this.inputRef = React.createRef();
    }
  
    componentDidMount() {
      this.inputRef.current.focus(); // 访问和操作 DOM 元素
    }
  
    render() {
      return <input ref={this.inputRef} />;
    }
  }
  

  function MyFunctionComponent(props, ref) {
    return <input ref={ref} />;
  }
  const ForwardedComponent = React.forwardRef(MyFunctionComponent);
  

• 特点：

  • ref 用于访问类组件的实例或函数组件的 DOM 元素。
  • 在函数组件中使用 ref 需要配合 React.forwardRef 使用。

3. forwardRef

• 用途：允许函数组件接收 ref 并将其转发到子组件的 DOM 元素或其他组件。

• 使用方式：

  import React, { forwardRef } from 'react';
  
  const MyComponent = forwardRef((props, ref) => (
    <input ref={ref} {...props} />
  ));
  
  function App() {
    const inputRef = useRef(null);
  
    useEffect(() => {
      inputRef.current.focus(); // 访问和操作 DOM 元素
    }, []);
  
    return <MyComponent ref={inputRef} />;
  }
  

• 特点：

  • forwardRef 高阶组件允许函数组件接收 ref，并将 ref 转发到子组件的 DOM 元素或其他组件上。
  • 适用于需要将 ref 传递给深层组件的情况。

useEffect 的第二个参数（依赖数组 dependency array）本质上是 React 用来做 变更检测（change detection） 的机制，用于决定：

当前 render 完成后，这个 effect 是否需要重新执行。

核心问题是：React 如何判断依赖“发生变化”？

一、结论先行

React 对依赖数组执行的是：

逐项浅比较（shallow comparison）

并且比较算法使用：

Object.is(prevDep, nextDep)

而不是 ===，也不是深比较。

二、源码层面的判断逻辑（简化版）

React 在 commit 阶段会保存上一次的依赖：

// pseudo code
function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) return false;

  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(prevDeps[i], nextDeps[i])) {
      return false;
    }
  }
  return true;
}

判断规则：

三、为什么使用 Object.is 而不是 ===

Object.is 与 === 基本一致，但修复了两个 JS 边界问题：

因此 React 能更精确判断数值变化。

四、重要：这是“引用比较”，不是值比较

这是很多问题的根源。

React 不会深度比较对象内容。

示例 1：对象依赖（常见坑）

useEffect(() => {
  console.log("run");
}, [{ a: 1 }]);

每次 render：

{ a: 1 } !== { a: 1 } // 新引用

结果：

effect 每次都会执行

原因：

• 新对象 = 新内存地址
• Object.is 返回 false

示例 2：数组同理

useEffect(() => {}, [[1,2,3]]);

永远触发。

示例 3：函数依赖

useEffect(() => {}, [() => {}]);

函数每次 render 都重新创建：

新函数引用 → effect 重跑

这就是为什么需要：

useCallback()

五、React 的依赖判断流程（完整链路）

一次组件更新时：

render阶段
   ↓
计算新的 deps 数组
   ↓
与上一次 deps 做 Object.is 逐项比较
   ↓
是否标记 effect 为 Dirty
   ↓
commit 阶段执行 effect

注意：

比较发生在 render 之后、effect 执行之前。

六、三种依赖写法的行为差异

1️⃣ 不写依赖

useEffect(fn);

等价于：

每次 render 后执行

2️⃣ 空数组

useEffect(fn, []);

行为：

只在 mount 执行一次

原因：

• 没有依赖永远不会变化

3️⃣ 指定依赖

useEffect(fn, [count]);

只有：

Object.is(prevCount, nextCount) === false

才执行。

七、高级理解：为什么 React 不做深比较？

如果 deep compare：

性能灾难

useEffect(() => {}, [bigObject]);

深比较复杂度：

O(n) ~ O(n²)

在 Fiber 高频 render 下不可接受。

React 的设计原则是：

依赖稳定性由开发者保证，而不是框架自动推断。

八、工程级最佳实践

1️⃣ 稳定引用

const options = useMemo(() => ({ page: 1 }), []);

2️⃣ 稳定函数

const handler = useCallback(() => {}, []);

3️⃣ 拆分依赖（非常重要）

不要：

useEffect(()=>{}, [user]);

而是：

useEffect(()=>{}, [user.id]);

降低无意义触发。

useState 是 React 的一个 Hook，用于在函数组件中管理状态。它使函数组件能够拥有类似于类组件中的 this.state 和 this.setState 的功能。useState 的实现涉及到 React 的内部机制，包括状态管理、更新队列和组件的重新渲染。

下面是 useState 的实现原理：

1. 状态的初始化

当你调用 useState 时，可以传递一个初始状态值或一个函数用于计算初始状态。React 会将这个初始状态值存储在一个内部的状态容器中。

const [state, setState] = useState(initialState);

2. 内部数据结构

React 使用一个叫做“Hooks List”的数据结构来管理各个组件的 Hook 状态。在每次组件渲染时，React 会使用这个数据结构来跟踪组件的 Hook 调用顺序和状态。

• Fiber 树：每个组件在 React 的 Fiber 树中都有一个与之对应的 Fiber 节点。Fiber 节点中包含了该组件的状态信息和相关的 Hook 信息。
• Hooks 链表：useState 和其他 Hooks 会在 Fiber 节点中按照调用顺序形成一个链表。每个 Hook 记录了其当前的状态值和更新函数。

3. 状态的更新

当调用 setState 时，React 会将状态更新请求加入到更新队列中。更新队列是 React 用于管理所有状态变更的机制。每当 setState 被调用时，React 会将新的状态值和当前状态值进行比较，决定是否需要触发重新渲染。

function setState(newState) {
  // 更新队列中加入新的状态值
  updateQueue.push(newState);

  // 标记 Fiber 节点需要重新渲染
  scheduleUpdate();
}

4. 触发重新渲染

在调用 setState 后，React 会安排重新渲染过程。这包括以下几个步骤：

1. 调度更新：将更新请求加入调度队列，React 会在适当的时候处理这些更新。
2. 重新渲染组件：React 会调用组件函数，执行 useState 和其他 Hook。
3. 比较新旧状态：React 会比较新旧状态，计算出哪些组件需要更新。
4. 提交更新：将计算好的更新提交到 DOM 中。

5. 状态的持久化

在每次组件渲染时，React 会通过 Hooks 链表来保持状态的一致性。即使组件重新渲染，useState 会从 Fiber 节点中获取之前保存的状态值，确保状态在多次渲染中保持不变。

6. 实现细节

useState 的实现细节包括但不限于以下方面：

• 状态保存：在 Fiber 节点上保存状态值和更新函数。
• 更新机制：通过调度更新机制来处理状态变化。
• 依赖管理：确保 Hooks 的调用顺序和依赖关系正确，避免错误的状态管理。

forwardRef 是 React 的一个高阶组件（HOC），用于将父组件的 ref 转发到子组件的 DOM 节点或组件实例中。它使得父组件能够直接访问子组件的 DOM 元素或方法。这在一些情况下非常有用，比如需要在父组件中操作子组件的 DOM 元素或调用子组件的方法时。

使用场景

1. 访问子组件的 DOM 节点： 当需要对子组件的 DOM 元素进行操作（例如，获取焦点、调整大小等），而这个子组件是由其他组件包裹的情况下。

2. 组合高阶组件和 ref： 在使用高阶组件（HOC）时，ref 不会自动转发到被包裹的组件中。使用 forwardRef 可以将 ref 转发到正确的组件或 DOM 元素。

基本用法

import React, { forwardRef, useRef, useImperativeHandle } from 'react';

// 子组件
const Input = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// 父组件
function ParentComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus(); // 调用子组件的 focus 方法
    }
  };

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

export default ParentComponent;

关键点

• forwardRef：是一个 React 函数，用于包装组件并转发 ref。
• useImperativeHandle：用来自定义暴露给父组件的 ref 实例。可以将特定的函数或属性暴露给父组件。

在 React 中，函数组件没有实例，因此传统的 ref 机制（用于访问类组件实例的方法）不适用。不过，可以通过以下几种方式在函数组件中使用 ref 来访问 DOM 元素或函数组件的内部逻辑：

1. 访问 DOM 元素

对于函数组件中引用 DOM 元素，可以使用 useRef 来创建一个 ref，并将其绑定到 DOM 元素上：

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 访问 DOM 元素
    if (inputRef.current) {
      inputRef.current.focus(); // 例如，设置焦点
    }
  }, []);

  return <input ref={inputRef} />;
};

2. 使用 forwardRef 转发 Ref

要在函数组件中访问子组件的 DOM 元素或通过 ref 传递组件实例，可以使用 React.forwardRef 来转发 ref：

import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';

// 子组件使用 forwardRef 来接收父组件的 ref
const ChildComponent = forwardRef((props, ref) => {
  const localRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      if (localRef.current) {
        localRef.current.focus();
      }
    }
  }));

  return <input ref={localRef} />;
});

// 父组件使用 ref 来访问子组件的方法
const ParentComponent = () => {
  const childRef = useRef();

  useEffect(() => {
    // 调用子组件的 focus 方法
    if (childRef.current) {
      childRef.current.focus();
    }
  }, []);

  return <ChildComponent ref={childRef} />;
};

3. useImperativeHandle 的作用

useImperativeHandle 钩子允许你定制通过 ref 访问的实例值。例如，可以将特定的方法暴露给父组件，通过 ref 调用这些方法：

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const localRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      localRef.current.focus();
    }
  }));

  return <input ref={localRef} {...props} />;
});

const ParentComponent = () => {
  const inputRef = useRef();

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

React Reconciler 采用 Fiber 架构主要是为了提升性能和用户体验。Fiber 是 React 16 引入的一种新的协调算法，它相对于旧版的 Reconciler 具备以下优势：

1. 增量渲染

• 旧版 Reconciler：一次性计算并更新整个 UI 树，可能会导致性能瓶颈，尤其是在大型应用中。
• Fiber 架构：支持增量渲染，将渲染任务拆分为小的单元，分批执行。这样可以在长时间运行的任务中插入中断点，使得 UI 更响应式。

2. 中断和优先级

• 旧版 Reconciler：一旦开始更新，渲染过程无法中断，可能会阻塞用户交互。
• Fiber 架构：允许中断和恢复工作，可以根据任务的优先级来调整渲染顺序。低优先级的任务可以在高优先级任务完成后再继续执行，提高了用户交互的流畅性。

3. 任务调度

• 旧版 Reconciler：没有任务调度机制，所有更新都按顺序执行。
• Fiber 架构：使用任务调度机制（Scheduler）来管理和调度不同优先级的更新任务，确保重要任务（如用户输入、动画）优先处理。

4. 异常处理

• 旧版 Reconciler：异常处理能力有限，无法优雅地处理渲染过程中的错误。
• Fiber 架构：允许局部错误处理，确保在渲染过程中即使发生异常，也能保证 UI 的部分更新和恢复。

5. 渲染中断与恢复

• 旧版 Reconciler：无法中断和恢复渲染。
• Fiber 架构：支持在渲染过程中中断并恢复，能够平滑处理长时间运行的任务。

6. 事务管理

• 旧版 Reconciler：处理复杂的事务和操作较为困难。
• Fiber 架构：将渲染任务分解为独立的事务，每个事务可以独立地管理和控制，简化了复杂操作的管理。

React 中的 Fiber 架构是一种新的协调算法，旨在提高 React 的性能和用户体验。它通过引入新的数据结构和机制，使得 React 能够更高效地处理 UI 更新。以下是 Fiber 架构的工作原理：

1. Fiber 数据结构

• Fiber 节点：Fiber 是一个表示组件的内部数据结构，每个 Fiber 节点对应一个 React 组件。它包含了组件的状态、更新信息和子组件的引用等。
• Fiber 树：Fiber 节点形成了一棵 Fiber 树，类似于旧版的虚拟 DOM 树。每个 Fiber 节点指向其父节点、子节点和兄弟节点。

2. 工作单元和增量渲染

• 工作单元：渲染过程被分解为多个工作单元，每个单元代表一个小的渲染任务。这样可以将渲染过程拆分成可中断的任务，以避免长时间的阻塞。
• 增量渲染：Fiber 允许将渲染任务拆分为增量的操作，逐步完成整个渲染过程。每次渲染会处理 Fiber 树的一部分，允许在任务之间插入中断点，从而提高了渲染的响应性。

3. 调度优先级

• 优先级调度：Fiber 引入了任务调度机制，允许根据任务的优先级来决定渲染的顺序。高优先级的任务（如用户输入、动画）会优先处理，而低优先级的任务（如数据加载）会在空闲时间处理。
• 任务中断和恢复：Fiber 支持在渲染过程中中断并恢复任务。当重要任务需要处理时，当前的渲染任务可以被中断，待重要任务完成后再恢复继续。

4. 更新和协调

• 更新队列：每个 Fiber 节点都有一个更新队列，用于存储与组件相关的更新信息。更新队列可以包含多个更新，React 会根据更新的优先级和顺序进行协调。
• 协调过程：Fiber 通过对比新旧 Fiber 树来决定哪些部分需要更新。这一过程称为协调（Reconciliation），它会检查节点的变更，生成更新的补丁。

5. 渲染阶段和提交阶段

• 渲染阶段：在渲染阶段，Fiber 架构会计算出需要更新的部分，但不会立即更新 DOM。这一阶段主要用于计算新的 Fiber 树，并生成更新任务。
• 提交阶段：在提交阶段，Fiber 会将渲染阶段计算出的更新应用到实际的 DOM 上。这个阶段是同步的，确保所有的更改都被正确地应用。

6. 错误处理

• 错误边界：Fiber 提供了更好的错误处理机制，可以局部地处理渲染中的错误。即使在渲染过程中发生错误，也能保证 UI 的部分更新和恢复。

在 React 的 Fiber 架构中，“Fiber” 是一种表示组件及其状态的内部数据结构。它是对 React 组件的详细描述，旨在提高组件的渲染性能和用户体验。以下是 Fiber 的含义和数据结构的详细解释：

1. Fiber 的含义

• Fiber 是一种内部数据结构：它用于表示每个 React 组件的状态和属性。每个 Fiber 对象包含有关组件的信息，如更新状态、子组件、位置信息等。
• Fiber 的目标：通过 Fiber 数据结构，React 可以更高效地处理 UI 更新，支持增量渲染、任务中断和优先级调度。

2. Fiber 数据结构

Fiber 数据结构由多个字段组成，每个字段用于存储与组件相关的不同信息。主要字段包括：

• tag：指示 Fiber 节点的类型，如函数组件、类组件或 DOM 元素。
• key：唯一标识 Fiber 节点的键，用于优化子节点的匹配。
• elementType：组件的类型，表示组件的类型（函数组件、类组件等）。
• type：组件的具体类型或组件实例。例如，对于 DOM 元素，它可能是 'div' 或 'span'；对于类组件，它是类构造函数。
• return：指向 Fiber 节点的父节点。形成 Fiber 树的父子关系。
• child：指向 Fiber 节点的第一个子节点。用于构建 Fiber 树的结构。
• sibling：指向 Fiber 节点的下一个兄弟节点。用于在同一层级遍历子节点。
• stateNode：保存与组件关联的实际 DOM 节点或组件实例。例如，对于类组件，它是组件的实例；对于 DOM 元素，它是实际的 DOM 节点。
• alternate：指向 Fiber 节点的旧版本（即上一次渲染时的 Fiber 节点）。用于比较新旧 Fiber 树，进行更新和协调。
• updateQueue：保存组件的更新队列，包含需要应用的更新信息。每个更新记录可能包含一个新的状态或属性。
• effectTag：用于标记 Fiber 节点的更新效果（如插入、更新或删除）。在提交阶段，React 会根据这些标记进行实际的 DOM 更新。
• pendingProps 和 memoizedProps：分别表示待处理的属性和已记忆的属性。pendingProps 是新传入的属性，而 memoizedProps 是上一次渲染时的属性。

3. Fiber 树

• Fiber 树结构：Fiber 树类似于虚拟 DOM 树，表示组件的层级结构。每个 Fiber 节点代表一个组件或 DOM 元素。Fiber 树通过 return、child 和 sibling 字段构建成树形结构。
• 更新和协调：在 Fiber 架构中，React 使用 Fiber 数据结构来处理组件更新和协调（Reconciliation）。通过比较新旧 Fiber 树，React 可以计算出需要更新的部分并生成补丁。

4. Fiber 的优势

• 增量渲染：Fiber 支持将渲染任务拆分为多个增量的工作单元，允许中断和恢复渲染，避免长时间的阻塞。
• 优先级调度：Fiber 引入了任务优先级调度，允许高优先级的任务（如用户输入）优先处理，提高响应性。
• 错误边界：Fiber 提供了更好的错误处理机制，可以局部地处理渲染中的错误，保证应用的稳定性。

React 的 render 阶段本质上是 一次可中断、可恢复的虚拟树计算过程，目标不是直接更新 DOM，而是计算出下一次 UI 应该长什么样，并生成变更描述。真正的 DOM 操作发生在后续的 commit 阶段。

理解 render 阶段，需要从 Fiber 架构、调度机制以及 diff 过程三个层面来看。

一、整体定位：render 阶段在 React 更新流程中的位置

一次 React 更新大致分为两个阶段：

Trigger Update
   ↓
Render Phase（可中断，纯计算）
   ↓
Commit Phase（不可中断，真实 DOM 更新）

render 阶段的职责只有一个：

根据新的 state / props，计算新的 Fiber 树，并找出需要变更的节点。

它不会：

• 操作 DOM
• 执行 layout
• 触发副作用（effect 在 commit 执行）

二、更新触发后的入口

当发生以下行为时：

• setState
• dispatch
• 父组件重新 render
• context 更新

React 会：

1. 创建一个 Update 对象
2. 放入对应 Fiber 的 updateQueue
3. 调度调和流程（scheduleUpdateOnFiber）

随后进入 render 工作循环。

三、Fiber：render 阶段的核心数据结构

React 不再直接递归组件树，而是构建 Fiber Tree。

每个 Fiber 可以理解为：

组件的一次渲染任务单元

包含：

• 组件类型
• props / state
• hooks 状态
• 子节点、兄弟节点、父节点
• effect 标记（Placement / Update / Deletion）

React 同时维护两棵树：

current tree（当前页面）
workInProgress tree（正在计算的新树）

render 阶段就是构建 workInProgress。

四、render 阶段的执行循环（核心）

render 阶段由一个循环驱动：

workLoop → performUnitOfWork

React 会逐个处理 Fiber 节点，而不是一次递归到底。

每个 Fiber 的执行流程：

beginWork → reconcile children → completeWork

1. beginWork（向下阶段）

职责：

• 执行函数组件
• 读取 hooks
• 计算 JSX
• 生成子 Fiber

例如函数组件：

function App() {
  const [count] = useState(0);
  return <Child count={count} />;
}

在 beginWork 中：

• 调用组件函数
• 执行 hooks
• 得到 React Element
• 与旧 children 做 diff

2. Diff / Reconciliation（子节点协调）

React 会比较：

旧 Fiber children
VS
新 React elements

并决定：

• 复用节点（Update）
• 新增节点（Placement）
• 删除节点（Deletion）

这里采用：

同层比较 + key 优化

避免跨层复杂度爆炸。

3. completeWork（向上阶段）

当子节点处理完成后，进入回溯阶段：

• 创建 DOM（但不挂载）
• 收集 effect 标记
• 构建 effect list

此阶段逐层向父节点返回。

五、为什么 render 阶段可以被中断

Fiber 的核心优势在于：

每个 Fiber 是一个可暂停的工作单元

React Scheduler 会：

• 判断当前是否需要让出主线程
• 如果时间片耗尽 → 暂停 render
• 浏览器空闲后继续

这就是 Concurrent Rendering 的基础。

因此 render 阶段具有：

• 可中断
• 可恢复
• 可丢弃（高优先级更新可打断低优先级）

六、render 阶段不会执行的事情

这是面试高频误区：

render 阶段 不会执行副作用：

• useEffect
• DOM 操作
• ref 回调
• layout 读取

原因是 render 可能被重复执行或丢弃。

React 必须保证 render 是：

Pure + Side-effect free

七、render 阶段的产物

render 完成后得到：

1. 一棵新的 workInProgress Fiber Tree
2. effect list（需要执行的变更）

随后进入 commit 阶段：

before mutation
mutation（DOM 更新）
layout effects
passive effects

八、一次完整 render 的时间线（总结视角）

setState
  ↓
创建 update
  ↓
调度 scheduler
  ↓
构建 workInProgress Fiber
  ↓
beginWork（执行组件）
  ↓
diff children
  ↓
completeWork（收集 effect）
  ↓
生成 effect list
  ↓
进入 commit 阶段

React 的渲染流程，本质上可以分成两个大阶段：

Render 阶段
Commit 阶段

其中：

• Render 阶段负责“计算”
• Commit 阶段负责“真正修改页面”

很多人会把 React 的更新理解成：

setState -> 页面更新

但实际上：

setState
-> Fiber Reconcile
-> Render
-> Commit
-> DOM 更新

真正操作 DOM 的，其实是在 commit 阶段。

一、Render 阶段和 Commit 阶段的区别

React Fiber 架构里：

Render 阶段

主要做：

• Diff
• 计算变更
• 构建新的 Fiber Tree
• 标记副作用（flags）

这个阶段：

可以中断
可以恢复
可以被高优先级任务抢占

因为它本质是“纯计算”。

例如 Concurrent Mode 下：

渲染到一半
用户输入
React 可以暂停当前渲染

但 Commit 阶段不同。

Commit 阶段：

不可中断
必须同步执行

因为：

• 要修改真实 DOM
• 要执行生命周期
• 要触发副作用

如果中断，会导致 UI 状态不一致。

所以 React 会保证：

一旦进入 commit，就会一次性执行完成。

二、Commit 阶段整体流程

commit 阶段在源码里主要入口是：

commitRoot()

整个过程通常会分成三个子阶段：

before mutation
mutation
layout

React 18 后还加入了：

passive effects

也就是 useEffect 的异步调度。

所以完整理解可以是：

1. beforeMutation
2. mutation
3. layout
4. passive

三、beforeMutation 阶段

这个阶段：

DOM 还没有真正修改。

React 会在这里做一些“DOM 变更前”的准备工作。

例如：

• 记录当前焦点
• 获取 DOM 旧状态
• 调用 getSnapshotBeforeUpdate

类组件里：

getSnapshotBeforeUpdate(prevProps, prevState)

就是在这里执行的。

典型场景：

读取滚动位置
读取 DOM 高度

因为：

再晚一点 DOM 就变了

所以必须在 mutation 前读取。

四、mutation 阶段

这是 commit 最核心的阶段。

React 会真正执行：

DOM 操作

例如：

• 插入节点
• 删除节点
• 更新属性
• 更新文本
• ref detach

本质上：

Fiber flags -> 转换成真实 DOM 操作

例如：

Placement
Update
Deletion

这些 flags 都是在 render 阶段提前打好的。

commit 阶段只是执行。

这里有个非常关键的点：

React 并不是边 render 边改 DOM

而是：

Render 阶段算好所有变更
Commit 阶段一次性提交

这也是 Fiber 能支持可中断渲染的重要原因。

在 mutation 阶段还会执行：

ref = null

因为旧 DOM 即将被替换。

五、layout 阶段

mutation 完成后：

DOM 已经更新完成

此时 React 会执行：

• componentDidMount
• componentDidUpdate
• useLayoutEffect
• ref 赋值

这个阶段特点是：

可以同步读取最新 DOM。

例如：

useLayoutEffect(() => {
  console.log(divRef.current.offsetHeight)
})

这里读取到的是：

最新 DOM

因为 mutation 已经结束。

这里也是很多性能问题的来源。

因为：

useLayoutEffect 是同步阻塞的

如果这里执行：

• 大量计算
• 强制回流
• 同步测量

会阻塞浏览器绘制。

因此：

能用 useEffect
尽量不要用 useLayoutEffect

六、passive effects 阶段

也就是：

useEffect

它和 layout effect 最大区别是：

异步执行
不阻塞浏览器绘制

React 在 commit 后：

• 先让浏览器 paint
• 再异步调度 effect

因此：

useEffect 不适合读取同步布局

因为页面可能已经绘制完成。

React 18 中：

flushPassiveEffects()

通常会通过 Scheduler 调度。

因此：

useEffect 并不一定立即执行

这也是很多面试喜欢问的点。

七、commit 阶段为什么不能中断

因为 commit 阶段已经开始：

修改真实 UI

如果中断：

可能会出现：

DOM 更新了一半
Fiber 状态没同步

会导致：

• UI 撕裂
• 状态不一致
• ref 错乱

因此 React 保证：

commit 是原子性的

一次 commit 必须完整执行。

八、React 18 中的一些变化

React 18 后：

Concurrent Rendering

可以中断的是：

Render

不是：

Commit

很多人容易误解。

另外：

自动批处理（Auto Batching）

会让多个 state 更新：

合并进入一次 commit

减少 DOM 提交次数。

还有：

Transition

本质上也是：

降低 render 优先级

不会影响 commit 原子性。

九、一个完整流程

一次 setState 后大致流程：

setState
-> 创建 Update
-> Fiber 调度
-> Render 阶段 Diff
-> 标记 flags
-> commitRoot
   -> beforeMutation
   -> mutation
   -> layout
-> 浏览器 paint
-> passive effects(useEffect)

这是 React 更新的完整主链路。

Fiber 的时间切片（Time Slicing）是一种优化 React 渲染性能的技术，它允许将长时间运行的任务分解成多个小任务，以便在主线程上交替执行其他任务，从而提高用户界面的响应性。以下是时间切片在 Fiber 架构中实现的主要原理和步骤：

1. 任务拆分和优先级

• 任务拆分：Fiber 架构允许将长时间运行的任务（如组件更新）拆分成多个小的 Fiber 节点处理单元。这些小任务可以在浏览器的空闲时间中逐步完成，而不是一次性处理所有任务。
• 优先级调度：React 为不同的更新任务分配不同的优先级。例如，用户输入相关的更新（如点击和输入事件）通常会被赋予较高的优先级，而低优先级的更新（如数据预取）则可能在用户操作之后执行。优先级调度可以确保重要的任务优先处理。

2. 任务调度

• 调度器（Scheduler）：React 使用调度器来控制任务的执行。调度器决定何时执行 Fiber 节点的更新工作，以及在主线程上分配的时间片。调度器会根据任务的优先级和浏览器的空闲时间来安排任务执行。
• 时间片切换：时间切片的核心思想是将长时间运行的任务分割成多个时间片（时间段），并在每个时间片内处理一部分任务。在每个时间片结束时，React 会检查是否有更高优先级的任务需要处理，或者是否需要将当前任务暂停，等待下一次时间片继续处理。

3. Fiber 节点的处理

• 工作单元：每个 Fiber 节点代表一个工作单元，处理 Fiber 节点的任务被称为“工作单元”。在时间切片过程中，React 会逐步处理这些工作单元，以便将渲染任务拆分成较小的部分。
• 中断与恢复：如果在处理 Fiber 节点的过程中，浏览器遇到用户交互（如点击或滚动），React 可以中断当前任务，并优先处理这些用户交互相关的高优先级任务。一旦用户交互处理完成，React 会恢复中断的任务，继续处理剩余的 Fiber 节点。

4. 流程实现

1. 任务开始：当 React 开始执行更新任务时，它会将任务拆分成多个 Fiber 节点的处理单元，并根据优先级安排这些任务。
2. 调度执行：调度器会分配时间片来处理这些 Fiber 节点。每个时间片内，React 会处理一定数量的 Fiber 节点，更新虚拟 DOM 和实际 DOM。
3. 检查任务状态：在每个时间片结束时，React 会检查是否有高优先级任务需要处理，或者是否需要暂停当前任务。调度器决定是否继续执行当前任务或切换到其他任务。
4. 恢复执行：如果任务被中断，React 会在下一次时间片中恢复执行，继续处理未完成的 Fiber 节点。

5. 用户交互

• 响应用户操作：时间切片技术确保用户操作（如输入、点击）能够及时响应。React 在处理高优先级任务时，能够快速响应用户交互，提高页面的交互性能。
• 优化渲染：通过将长时间运行的任务分解成多个时间片，React 能够避免阻塞主线程，提高页面的整体性能和响应性。

总结

Fiber 的时间切片实现使得 React 能够高效地处理长时间运行的渲染任务，通过将任务拆分成多个小任务，并在主线程上分配时间片来逐步完成这些任务。这种方法可以显著提高用户界面的响应性和性能，确保高优先级任务能够及时处理，并优化页面渲染体验。

ReactDOM.createPortal 是 React 的一个 API，用于将子节点渲染到 DOM 的不同部分，而不是当前组件的父级节点中。这对于需要在 DOM 的不同层级中插入内容（如模态框、工具提示、下拉菜单等）非常有用，因为它允许我们将子元素渲染到指定的 DOM 节点中，保持其逻辑上的位置和结构。

createPortal 的用法

ReactDOM.createPortal(child, container)

• child：要渲染的子元素或 React 元素。
• container：要将 child 渲染到的 DOM 节点。

特点和使用场景

1. DOM 层级结构：

   • 通过 createPortal，你可以将子元素插入到 DOM 的任意位置，这对于需要在页面不同层级中展示内容的情况很有帮助。例如，模态框通常需要渲染在页面的顶层。

2. 维持 React 组件的生命周期和状态：

   • 使用 createPortal 渲染的元素仍然保持在 React 组件树中，因此它们会遵循 React 的生命周期方法，状态和上下文不会受到影响。

3. 避免 CSS 影响：

   • 在某些情况下，使用 createPortal 可以避免子组件的 CSS 被父组件的样式干扰，因为渲染到的 DOM 节点通常是在 body 或其他顶层容器中。

示例

import React from 'react';
import ReactDOM from 'react-dom';

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      <div className="modal">
        <h1>I'm a modal!</h1>
        <button onClick={this.props.onClose}>Close</button>
      </div>,
      document.body  // Modal 将被渲染到 body 元素中
    );
  }
}

export default Modal;

原理

• createPortal 创建的组件会挂载到指定的 DOM 节点 container 中，但它仍然在 React 的组件树中。这意味着 React 可以处理它的生命周期和更新，而不是直接操作 DOM。

在 React 中，createContext 和 useContext 是处理上下文的两个相关 API，但它们的功能和用途有所不同：

1. createContext

• 作用：用于创建一个新的上下文对象。
• 用法：调用 createContext 会返回一个上下文对象，这个对象包含 Provider 和 Consumer 组件。Provider 用于提供上下文的值，而 Consumer 用于消费上下文的值。
• 示例：

  // 创建上下文对象
  const MyContext = createContext(defaultValue);
  
  // 提供上下文的值
  <MyContext.Provider value={someValue}>
    {/* 子组件 */}
  </MyContext.Provider>
  
  // 消费上下文的值
  <MyContext.Consumer>
    {value => /* 使用上下文的值 */}
  </MyContext.Consumer>
  

2. useContext

• 作用：用于在函数组件中访问上下文的值。
• 用法：useContext 是一个 Hook，用于在函数组件中消费上下文的值，而不需要使用 Consumer 组件。
• 示例：

  import { useContext } from 'react';
  
  // 在函数组件中访问上下文
  const value = useContext(MyContext);
  

在 react-router 中实现页面跳转并传递参数，可以通过以下几种方式来完成：

1. 通过 URL 参数传递

定义路由时：

在定义路由时，可以使用 URL 参数。例如：

<Route path="/user/:id" component={User} />

跳转时：

使用 useHistory 或 useNavigate（在 React Router v6 中）进行跳转时，可以将参数添加到 URL 中：

import { useHistory } from 'react-router-dom'; // React Router v5

function RedirectToUser() {
  const history = useHistory();

  const handleClick = () => {
    history.push(`/user/123`); // 跳转到 /user/123
  };

  return <button onClick={handleClick}>Go to User 123</button>;
}

import { useNavigate } from 'react-router-dom'; // React Router v6

function RedirectToUser() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(`/user/123`); // 跳转到 /user/123
  };

  return <button onClick={handleClick}>Go to User 123</button>;
}

接收参数：

在目标组件中，可以使用 useParams 钩子（在 React Router v6 中也是 useParams）来接收 URL 参数：

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

2. 通过查询字符串传递

跳转时：

可以将参数作为查询字符串添加到 URL 中：

import { useHistory } from 'react-router-dom'; // React Router v5

function RedirectToUser() {
  const history = useHistory();

  const handleClick = () => {
    history.push(`/user?id=123`); // 跳转到 /user?id=123
  };

  return <button onClick={handleClick}>Go to User</button>;
}

import { useNavigate } from 'react-router-dom'; // React Router v6

function RedirectToUser() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(`/user?id=123`); // 跳转到 /user?id=123
  };

  return <button onClick={handleClick}>Go to User</button>;
}

接收查询参数：

可以使用 URLSearchParams 来获取查询参数：

import { useLocation } from 'react-router-dom';

function User() {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const id = params.get('id');
  return <div>User ID: {id}</div>;
}

3. 通过状态传递

跳转时：

可以将参数作为状态传递：

import { useHistory } from 'react-router-dom'; // React Router v5

function RedirectToUser() {
  const history = useHistory();

  const handleClick = () => {
    history.push({
      pathname: '/user',
      state: { id: 123 }
    });
  };

  return <button onClick={handleClick}>Go to User</button>;
}

import { useNavigate } from 'react-router-dom'; // React Router v6

function RedirectToUser() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/user', { state: { id: 123 } });
  };

  return <button onClick={handleClick}>Go to User</button>;
}

接收状态：

在目标组件中，可以通过 useLocation 钩子获取传递的状态：

import { useLocation } from 'react-router-dom';

function User() {
  const location = useLocation();
  const id = location.state?.id;
  return <div>User ID: {id}</div>;
}

在 React 中，直接使用 push、pop、splice 等方法修改数组不会触发页面重新渲染。React 的状态更新机制依赖于状态的不可变性（immutability），即通过创建新的状态对象来更新状态。直接修改原始状态对象（如数组）不会创建新的对象引用，因此 React 不会检测到状态的变化，也不会触发重新渲染。

为什么直接修改数组不触发渲染

React 使用 Object.is（或其变体）来检查状态是否发生了变化。直接对数组进行 push、pop、splice 等操作，修改了原始数组的内容，但数组的引用（内存地址）没有改变。React 仅通过引用变化来判断状态是否更新，因此直接修改原始数组不会触发更新。

正确的做法

为了触发渲染，应该遵循不可变数据模式，即通过创建新数组来更新状态。以下是使用 useState 管理数组状态的推荐方法：

示例：使用 concat、slice、map 等方法

import React, { useState } from 'react';

function MyComponent() {
    const [items, setItems] = useState([1, 2, 3]);

    // 添加新项
    const addItem = (item) => {
        setItems(prevItems => [...prevItems, item]);
    };

    // 移除最后一项
    const removeLastItem = () => {
        setItems(prevItems => prevItems.slice(0, -1));
    };

    // 更新特定项
    const updateItem = (index, newItem) => {
        setItems(prevItems => prevItems.map((item, i) => i === index ? newItem : item));
    };

    return (
        <div>
            <button onClick={() => addItem(4)}>Add Item</button>
            <button onClick={removeLastItem}>Remove Last Item</button>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

export default MyComponent;

解释

1. 添加新项：

   • 使用展开运算符 [...prevItems, item] 创建一个新数组，并将新项添加到末尾。

2. 移除最后一项：

   • 使用 slice(0, -1) 创建一个新数组，去除最后一项。

3. 更新特定项：

   • 使用 map 方法创建一个新数组，并根据条件更新特定项。

在 React 中，useContext 是一个用于在组件树中共享状态或数据的钩子。它允许我们在没有通过属性逐层传递的情况下，将数据从祖先组件传递到后代组件。useContext 主要用于避免 prop drilling 问题，即当需要将数据从顶层组件传递到深层嵌套的组件时，可能会涉及多层组件传递属性，代码会变得冗长和难以维护。

使用 useContext 的场景

1. 全局状态管理：

   • 当你需要在多个组件之间共享全局状态时，useContext 是一个简单而有效的工具。例如，用户认证状态、主题设置或语言选择等全局数据可以通过 useContext 在整个应用中访问。

   const UserContext = React.createContext();
   
   function App() {
       const [user, setUser] = useState(null);
   
       return (
           <UserContext.Provider value={user}>
               <UserProfile />
           </UserContext.Provider>
       );
   }
   
   function UserProfile() {
       const user = useContext(UserContext);
       return <div>{user ? `Welcome, ${user.name}` : 'Not logged in'}</div>;
   }
   

2. 避免 prop drilling：

   • 当数据需要从顶层组件传递到深层嵌套的子组件时，使用 useContext 可以避免将数据逐层通过 props 传递。这样可以减少中间组件不必要的属性传递，保持代码的简洁和清晰。

   const ThemeContext = React.createContext();
   
   function App() {
       const theme = 'dark';
   
       return (
           <ThemeContext.Provider value={theme}>
               <Toolbar />
           </ThemeContext.Provider>
       );
   }
   
   function Toolbar() {
       return (
           <div>
               <ThemedButton />
           </div>
       );
   }
   
   function ThemedButton() {
       const theme = useContext(ThemeContext);
       return <button className={theme}>Themed Button</button>;
   }
   

3. 跨组件通信：

   • 在组件树的不同部分之间进行通信时，useContext 提供了一种简单的方式来共享信息，而不需要通过复杂的回调或全局事件总线。

4. 复杂应用中的配置和设置：

   • 在需要全局配置（如路由、表单验证、国际化等）的复杂应用中，useContext 使得这些配置可以被所有需要的组件访问，而不需要反复传递。

5. 在与 useReducer 结合使用时：

   • useReducer 可以用来管理复杂的本地状态。将 useReducer 与 useContext 结合使用时，可以将状态和分发函数提供给需要的组件，而无需逐层传递。

   const CountContext = React.createContext();
   
   function reducer(state, action) {
       switch (action.type) {
           case 'increment':
               return { count: state.count + 1 };
           case 'decrement':
               return { count: state.count - 1 };
           default:
               throw new Error();
       }
   }
   
   function Counter() {
       const [state, dispatch] = useReducer(reducer, { count: 0 });
   
       return (
           <CountContext.Provider value={{ state, dispatch }}>
               <ChildComponent />
           </CountContext.Provider>
       );
   }
   
   function ChildComponent() {
       const { state, dispatch } = useContext(CountContext);
       return (
           <div>
               Count: {state.count}
               <button onClick={() => dispatch({ type: 'increment' })}>+</button>
               <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
           </div>
       );
   }
   

适用性与注意事项

• 适用性：

  • useContext 适用于需要跨多个组件共享状态的场景，避免不必要的属性传递，特别是在状态涉及到多个组件层级时。

• 注意事项：

  • 不要滥用 useContext。如果数据仅在少量组件之间共享，或局部状态足够处理问题，可能并不需要使用 useContext。
  • useContext 提供的数据是引用类型的，如果上下文中的数据变化会导致使用该上下文的所有组件重新渲染。因此，确保合理组织和管理上下文的数据以避免性能问题。

在 React 中，Hooks 和 MemorizedState 都与组件的状态管理和性能优化有关，但它们的作用和实现方式不同。

Hooks

Hooks 是 React 16.8 引入的一组 API，使函数组件能够拥有状态和副作用管理的能力，之前这些特性只有在类组件中才可以使用。常用的 Hooks 包括：

• useState：用于在函数组件中添加状态。
• useEffect：用于处理副作用，如数据获取和订阅。
• useContext：用于在组件树中共享状态。
• useReducer：用于处理更复杂的状态逻辑。
• useMemo 和 useCallback：用于性能优化，避免不必要的重新渲染。

MemorizedState

MemorizedState 是 React 内部的一种实现机制，用于优化组件的性能。它是 React 在内部管理组件状态时使用的一种状态存储方式，尤其是与 Hooks 的实现密切相关。

• 在 React 中，useState 和 useReducer 的实现依赖于 MemorizedState：当你调用 useState 或 useReducer 时，React 会为每个组件实例创建一个 MemorizedState 对象来存储状态。这些状态在组件重新渲染时会被保留，确保组件的状态在生命周期中保持一致。
• MemorizedState 的作用是优化性能：它帮助 React 追踪状态的变化，并在组件重新渲染时有效地管理和更新状态。

Hooks 与 MemorizedState 的关系

1. 状态管理：Hooks（如 useState 和 useReducer）允许你在函数组件中管理状态。它们背后使用了 MemorizedState 来存储和管理这些状态。

2. 性能优化：

   • useMemo 和 useCallback：这些 Hooks 依赖于 MemorizedState 来缓存计算结果和函数，从而避免不必要的重新计算和重新渲染。
   • MemorizedState 的缓存机制：React 使用 MemorizedState 来缓存组件的状态和计算结果，这与 useMemo 和 useCallback 的功能类似，但在更底层的实现中起作用。

3. 内部实现：

   • useState 和 useReducer：当调用这些 Hooks 时，React 内部会创建一个 MemorizedState 对象来存储状态值。
   • 性能优化 Hooks：useMemo 和 useCallback 使用 MemorizedState 来存储缓存的计算结果或函数引用，从而避免每次渲染时重新计算。

在 React 中，children 是一个特殊的 prop，用于传递子组件或元素。虽然直接给 children 添加属性是不可能的，但可以使用一些方法来为子组件传递额外的属性。

方法一：使用 React.cloneElement

React.cloneElement 是 React 提供的一个 API，用于克隆一个元素并添加额外的属性。这种方法适用于在渲染过程中动态地为 children 添加属性。

示例：

import React from 'react';

function ParentComponent({ children }) {
  // 为每个子元素添加额外的属性
  const childrenWithProps = React.Children.map(children, child =>
    React.cloneElement(child, { extraProp: 'value' })
  );

  return <div>{childrenWithProps}</div>;
}

function ChildComponent(props) {
  return <div>{props.extraProp}</div>;
}

// 使用示例
export default function App() {
  return (
    <ParentComponent>
      <ChildComponent />
      <ChildComponent />
    </ParentComponent>
  );
}

说明：

• React.Children.map 遍历 children 并应用 React.cloneElement。
• React.cloneElement 克隆每个子元素，并添加 extraProp 属性。

方法二：使用 Context API

另一种方法是使用 React 的 Context API 传递额外的属性。这种方法适用于全局传递数据或配置，尤其是当有多个嵌套组件时。

示例：

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

// 创建一个 Context
const ExtraPropsContext = createContext({ extraProp: 'default' });

function ParentComponent({ children }) {
  const extraProps = { extraProp: 'value' };

  return (
    <ExtraPropsContext.Provider value={extraProps}>
      {children}
    </ExtraPropsContext.Provider>
  );
}

function ChildComponent() {
  const { extraProp } = useContext(ExtraPropsContext);

  return <div>{extraProp}</div>;
}

// 使用示例
export default function App() {
  return (
    <ParentComponent>
      <ChildComponent />
      <ChildComponent />
    </ParentComponent>
  );
}

说明：

• 使用 createContext 和 Provider 传递额外的属性。
• 使用 useContext 在子组件中获取这些属性。

方法三：通过 Props 传递

直接将额外的属性作为普通的 prop 传递给子组件，这种方法适用于显式传递和少量的属性。

示例：

import React from 'react';

function ParentComponent({ children }) {
  const extraProp = 'value';

  return (
    <div>
      {React.Children.map(children, child =>
        React.isValidElement(child) ? React.cloneElement(child, { extraProp }) : child
      )}
    </div>
  );
}

function ChildComponent(props) {
  return <div>{props.extraProp}</div>;
}

// 使用示例
export default function App() {
  return (
    <ParentComponent>
      <ChildComponent />
      <ChildComponent />
    </ParentComponent>
  );
}

说明：

• 在父组件中为子组件添加额外的 prop。

在 React 中，构建组件的方式主要有以下几种：

1. 函数组件 (Function Components)

函数组件是最常用的组件形式，使用 JavaScript 函数来定义。自 React Hooks 引入以来，函数组件得到了广泛使用。

import React from 'react';

const MyComponent = () => {
  return <div>Hello, Function Component!</div>;
};

export default MyComponent;

2. 类组件 (Class Components)

类组件是通过 ES6 的类语法定义的，适合需要使用生命周期方法的场景。虽然现在推荐使用函数组件和 Hooks，但类组件依然在一些老旧代码中存在。

import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <div>Hello, Class Component!</div>;
  }
}

export default MyClassComponent;

3. 高阶组件 (Higher-Order Components, HOCs)

高阶组件是接受一个组件作为参数并返回一个新的组件的函数。这种模式用于代码复用和逻辑封装。

import React from 'react';

const withExtraInfo = (WrappedComponent) => {
  return (props) => {
    return (
      <div>
        <WrappedComponent {...props} />
        <p>Additional Info</p>
      </div>
    );
  };
};

export default withExtraInfo;

4. 组合组件 (Composition Components)

通过组合多个小组件来构建复杂组件。使用组合的方式可以提高组件的复用性和可维护性。

const ParentComponent = () => (
  <div>
    <ChildComponentA />
    <ChildComponentB />
  </div>
);

5. Render Props

通过将一个函数作为 props 传递给组件，允许调用该函数来控制组件的渲染。这种模式用于实现复杂的逻辑和状态共享。

const DataProvider = ({ render }) => {
  const data = { /* some data */ };
  return render(data);
};

// 使用
<DataProvider render={(data) => <MyComponent data={data} />} />

6. 自定义 Hook

虽然不直接构建组件，但自定义 Hook 是一种封装逻辑和状态的方式，可以在函数组件中复用。

import { useState, useEffect } from 'react';

const useFetchData = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
};

React 渲染页面的过程主要包括以下几个步骤：

1. 创建虚拟 DOM

• 组件定义：当你定义一个组件并调用 render 方法时，React 会根据组件的 JSX 结构创建一个虚拟 DOM。这是一个轻量级的 JavaScript 对象，描述了 UI 的结构。

2. 渲染到真实 DOM

• 初始渲染：在组件首次渲染时，React 会将虚拟 DOM 转换为实际的 DOM 元素，并将其插入到页面中。通常是通过 ReactDOM.render() 方法完成的。

import ReactDOM from 'react-dom';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

3. 组件更新

• 状态或属性变化：当组件的状态（state）或属性（props）发生变化时，React 会重新调用组件的 render 方法，生成新的虚拟 DOM。

4. Diff 算法

• 比较新旧虚拟 DOM：React 使用高效的 Diff 算法对比新旧虚拟 DOM，以找到需要更新的部分。这个过程称为“调和”（reconciliation）。

5. 更新真实 DOM

• 最小化 DOM 操作：根据 Diff 算法的结果，React 会计算出最小的 DOM 更新操作，只对那些发生变化的部分进行实际更新，而不是重新渲染整个页面。

6. 生命周期方法

• 调用生命周期方法：在渲染过程中，React 会调用组件的生命周期方法，例如 componentDidMount、componentDidUpdate 等，以允许开发者在不同的渲染阶段执行特定的逻辑。

7. 批处理更新

• 批量更新：在事件处理时，React 会将多个状态更新合并为一次渲染，减少不必要的 DOM 操作，提高性能。

8. 异步渲染

• 并发渲染：从 React 16 开始，React 支持异步渲染，可以在不阻塞主线程的情况下进行 UI 更新，以提升用户体验。

在 React 中，虽然没有像 Vue-router 这样内置的路由守卫功能，但我们可以通过组合 React Router 和一些自定义逻辑来实现类似于 Vue-router 提供的路由守卫功能。

下面介绍几种实现方式。

方法一：使用 useEffect 钩子在组件层面实现

对于需要进行路由守卫的组件，可以在组件的 useEffect 中添加相应的导航逻辑。这种方式类似于 Vue 的 beforeRouteEnter 守卫。

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function ProtectedComponent() {
  const navigate = useNavigate();

  useEffect(() => {
    const isAuthenticated = checkAuthentication(); // 自定义的身份验证逻辑
    if (!isAuthenticated) {
      navigate('/login'); // 如果未登录，重定向到登录页面
    }
  }, [navigate]);

  return <div>Protected Content</div>;
}

方法二：使用高阶组件 (Higher-Order Component)

通过高阶组件（HOC），可以将路由守卫的逻辑封装在组件外部，从而实现类似全局路由守卫的功能。

import { useNavigate } from 'react-router-dom';
import React, { useEffect } from 'react';

const withAuthGuard = (WrappedComponent) => {
  return (props) => {
    const navigate = useNavigate();

    useEffect(() => {
      const isAuthenticated = checkAuthentication(); // 自定义的验证逻辑
      if (!isAuthenticated) {
        navigate('/login'); // 如果未通过验证，重定向
      }
    }, [navigate]);

    return <WrappedComponent {...props} />;
  };
};

const ProtectedComponent = () => {
  return <div>Protected Content</div>;
};

export default withAuthGuard(ProtectedComponent);

方法三：通过 React Router Outlet 和中间件模式

React Router 提供了 <Outlet /> 组件，它可以允许我们将路由守卫逻辑应用到某些路由集合上。可以通过中间件模式对路由进行守卫。

import { Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

// 使用：
<Route path="/protected" element={<ProtectedRoute isAuthenticated={authStatus} />}>
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="settings" element={<Settings />} />
</Route>

在上面的例子中，如果用户未通过身份验证，ProtectedRoute 将重定向到 /login，否则允许继续加载子路由。

方法四：在路由配置中实现路由守卫逻辑

可以通过在路由配置中直接实现身份验证或其他守卫逻辑。

import { Route, Routes, Navigate } from 'react-router-dom';

function PrivateRoute({ element: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? <Component /> : <Navigate to="/login" />}
    />
  );
}

function App() {
  const isAuthenticated = checkAuthentication(); // 自定义验证逻辑

  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <PrivateRoute path="/dashboard" element={<Dashboard />} isAuthenticated={isAuthenticated} />
    </Routes>
  );
}

方法五：使用 Redux 或 Context 实现全局守卫

结合 useContext 或 Redux，可以将身份验证状态存储在全局状态中，然后在每个需要守卫的组件或路由上进行判断。

1. 通过 Context 实现：

import { useContext, useEffect } from 'react';
import { AuthContext } from './AuthProvider';
import { useNavigate } from 'react-router-dom';

function ProtectedComponent() {
  const { isAuthenticated } = useContext(AuthContext);
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login'); // 重定向到登录页面
    }
  }, [isAuthenticated, navigate]);

  return <div>Protected Content</div>;
}

2. 通过 Redux 实现：

import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

function ProtectedComponent() {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
    }
  }, [isAuthenticated, navigate]);

  return <div>Protected Content</div>;
}

与 React 的早期设计和 JSX 语法的处理密切相关，具体来说，主要是以下原因：

1. JSX 需要 React

在 React 的早期版本中，JSX（JavaScript XML）是通过 JavaScript 语法扩展来实现的。JSX 代码本质上是一个类似 XML 的语法糖，它会被 Babel 转换为 React.createElement() 调用。

例如，下面的 JSX 代码：

const element = <h1>Hello, world!</h1>;

在 Babel 转译后，会变成类似如下的代码：

const element = React.createElement('h1', null, 'Hello, world!');

可以看到，JSX 最终会被转换为 React.createElement() 的调用。因此，在使用 JSX 时，必须导入 React，否则编译器会找不到 React.createElement 函数，导致错误。

2. React 需要作为一个全局对象

React.createElement() 是创建 React 元素的基础函数。为了能够正确生成虚拟 DOM 和管理组件，React 库提供了必要的 API。因此，导入 React 是为了能够调用这些方法。

3. Babel 的转换（之前的工作原理）

在 JSX 编译阶段，Babel 会将 JSX 转换为 React.createElement() 函数调用。因此，React 在 JSX 文件中成为了必需的导入项。如果没有导入 React，Babel 在转换过程中将无法找到 React.createElement，从而导致错误。

随着 React 17 的更新：

自 React 17 版本开始，JSX 转换的工作有所变化。React 17 引入了新的 JSX 转换方式，允许开发者不再显式地导入 React。这是通过新的 JSX 编译器来实现的，不再需要将 JSX 转换为 React.createElement 调用。

在 React 17 及以后的版本中，Babel 会自动处理 React 的引入，具体来说：

• 不再需要显式地导入 React：如果你使用了 React 17 或更高版本，并且配置了正确的 Babel 插件（如 @babel/preset-react），JSX 的编译器会自动将 React 导入到每个文件中，从而不再需要手动编写 import React from 'react';。

4. 向后兼容

虽然 React 17 之后不再强制要求显式导入 React，但由于许多项目仍然使用较旧的 React 版本，或者代码库中有其他工具、库的兼容性问题，开发者可能仍然看到许多项目中保留 import React from 'react';。此外，如果你使用 TypeScript，或者一些特殊的工具链配置，可能仍然需要手动导入。

在 React 项目中，可以不用 react-router，直接使用浏览器原生的 history API 来组织页面路由。实际上，react-router 本质上也是基于浏览器的 history API 实现的路由功能，它提供了一个封装好的、更易于使用的路由管理工具。

使用浏览器原生 history API 进行路由管理

React 提供了 history API 作为浏览器的原生路由系统，包含了 window.history 相关方法（如 pushState, replaceState, popState 等）。你可以通过这些 API 手动实现路由的控制，并结合 React 状态管理来更新页面视图。

以下是使用原生 history API 管理路由的基本步骤：

1. 创建路由管理逻辑

使用原生 history API，你需要自己处理 URL 的变化、浏览器历史栈的管理以及与 React 组件的匹配。

示例代码：

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

// 简单的路由管理器
function useHistory() {
  const [location, setLocation] = useState(window.location.pathname);

  useEffect(() => {
    // 监听浏览器的历史变化
    const handlePopState = () => {
      setLocation(window.location.pathname);
    };

    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  const push = (path) => {
    window.history.pushState(null, '', path);
    setLocation(path);  // 更新当前路径
  };

  const replace = (path) => {
    window.history.replaceState(null, '', path);
    setLocation(path);  // 更新当前路径
  };

  return { location, push, replace };
}

const Route = ({ path, component }) => {
  return window.location.pathname === path ? component : null;
};

// 主应用组件
function App() {
  const { location, push } = useHistory();

  return (
    <div>
      <nav>
        <button onClick={() => push('/')}>Home</button>
        <button onClick={() => push('/about')}>About</button>
      </nav>

      <div>
        <Route path="/" component={<div>Home Page</div>} />
        <Route path="/about" component={<div>About Page</div>} />
      </div>
    </div>
  );
}

export default App;

2. 解释代码

• useHistory 是自定义 Hook，用来管理路由的变化和浏览器的历史记录。
• window.history.pushState 用来修改浏览器的 URL，而不刷新页面。它会向历史记录栈中添加一个新的记录。
• window.history.replaceState 用来替换当前的 URL，而不新增历史记录。
• 通过监听 popstate 事件来处理浏览器后退、前进操作，确保页面和历史状态同步。
• Route 组件根据当前的 window.location.pathname 来判断是否匹配当前路由并渲染对应的内容。

3. 优缺点分析

优点：

• 控制性更强：使用原生的 history API，你完全控制路由的行为，可以根据需求自由设计路由逻辑。
• 依赖较少：不需要额外安装第三方路由库（如 react-router），减少了项目的依赖。
• 更细粒度的控制：可以在路由变更时执行自定义逻辑，比如路由过渡动画、权限控制等。

缺点：

• 代码复杂度较高：需要自己处理路由匹配、页面切换、浏览器历史栈管理等逻辑，容易出现重复代码和潜在的 bug。
• 缺少功能：像 react-router 提供的路由嵌套、动态路由、参数提取、重定向等功能需要你自己实现。
• 性能优化问题：手动管理路由时，需要自己优化性能，尤其是与 React 组件的渲染结合时，可能需要更多的工作来确保视图的高效更新。

4. 与 react-router 的比较

react-router 提供了大量现成的功能，如路由嵌套、重定向、动态路由匹配、路由守卫等，这些都是你使用原生 history API 时需要自己实现的。如果你的应用比较简单，不需要复杂的路由功能，使用原生 history API 是完全可行的。

但对于大型应用，react-router 提供了更加简洁、可扩展的路由管理方式，能大大减少开发成本，并且有广泛的社区支持。

5. 何时选择原生 history API

你可以选择使用原生 history API 的情况包括：

• 应用的路由需求简单，不需要复杂的路由嵌套、动态路由、权限控制等功能。
• 希望减少第三方库的依赖，或者希望自己对路由的行为进行更细粒度的控制。
• 学习或实践如何在前端实现路由。

react-router 和原生路由（基于浏览器的 history API）在本质上都用于管理前端页面的路由，但它们有不同的设计理念、功能和使用场景。

以下是它们的主要区别：

1. 抽象层级

• react-router：

  • react-router 是一个高层次的路由库，基于浏览器的 history API 构建，封装了很多复杂的路由逻辑，并提供了一些额外的功能（如嵌套路由、动态路由、路由守卫等）。
  • 它会自动处理浏览器 URL 和应用状态的同步，使用起来更为方便和简洁，适合 React 应用的开发。
  • 具有更多的抽象和功能，能简化开发中的很多路由操作。

• 原生路由（history API）：

  • 原生路由直接依赖浏览器的 window.history API，通过 pushState、replaceState 和 popstate 事件来实现路由管理。它没有像 react-router 那样的封装和高级功能。
  • 原生路由更基础，只是修改浏览器 URL 并响应页面状态变化，开发者需要手动处理路由的匹配、组件的渲染和视图更新等。

2. 功能对比

3. 实现方式

• react-router：

  • 内部封装了对 history API 的使用，提供了更方便的 API 让开发者使用。react-router 通过 Router 和 Route 等组件来提供页面跳转和路由匹配。
  • 它不仅处理 URL 的变化，还会根据路径变化重新渲染相应的 React 组件。

• 原生路由 (history API)：

  • 原生路由只是依赖浏览器的历史 API。你需要使用 window.history.pushState 和 window.history.replaceState 来管理 URL，而需要手动监听 popstate 事件来处理浏览器后退、前进。
  • 路由的管理、组件渲染以及视图更新逻辑都需要你手动实现。

4. 开发效率

• react-router：

  • 提供了很多开箱即用的功能，如路由嵌套、动态路由、路由守卫、重定向、参数传递等。
  • 可以通过更简洁的 API 来实现复杂的路由功能，减少了开发者的代码量。
  • 它通过 React 的 context 和 hooks（如 useNavigate、useLocation）来管理路由状态，符合 React 生态的设计模式。

• 原生路由 (history API)：

  • 需要开发者手动处理很多逻辑，例如组件的匹配、路由更新时的视图渲染、动态参数的提取、URL 的同步更新等。
  • 代码实现较为繁琐，开发效率较低，尤其是当需要处理嵌套路由、权限控制等复杂功能时。

5. 与 React 的集成

• react-router：

  • react-router 是为 React 设计的，内建了与 React 组件的紧密集成，能够自动与 React 的渲染周期配合。
  • 使用 Route 组件来声明路由，自动根据 URL 渲染对应的组件，支持动态加载和懒加载。

• 原生路由 (history API)：

  • 使用原生 history API 时，开发者需要手动管理 URL 和组件的关系，手动处理视图的更新。通常需要与 React 的 useEffect、useState 等 hooks 结合来实现组件的渲染和更新。

6. 复杂度与扩展性

• react-router：

  • 由于内建了很多高级功能，它的学习曲线稍高，但对于中大型应用，react-router 提供了极高的扩展性，适合复杂的路由需求。
  • 如果应用的路由需求较为复杂，如路由嵌套、动态路由、权限控制、懒加载等，react-router 无疑是更优的选择。

• 原生路由 (history API)：

  • 对于简单的应用，或者开发者想完全控制路由的行为时，使用原生的 history API 可能更合适，代码更简洁，也能避免引入第三方库。
  • 但如果需要实现复杂的路由功能，手动实现会变得繁琐且容易出错，缺乏灵活性和扩展性。

7. 使用场景

• react-router：

  • 适用于中大型 React 项目，尤其是当需要多个页面、动态路由、路由嵌套、懒加载等复杂功能时。
  • 当需要处理多个视图和更复杂的导航场景时，react-router 是更好的选择。

• 原生路由 (history API)：

  • 适用于小型项目，或者对于路由逻辑有特定需求的项目，可以避免引入额外的库，完全控制路由行为。
  • 如果只是单一页面应用且路由比较简单，原生 history API 完全足够。

主要是因为以下几个原因：

1. 对任务优先级的精确控制

React 需要根据不同类型的任务（例如更新视图、处理事件、执行动画等）来控制任务的优先级，而 requestIdleCallback 并不提供足够细粒度的优先级控制。

• React 的调度器（比如 React Fiber 调度器）允许它精确地控制任务的优先级，支持 高优先级任务（例如用户输入）和 低优先级任务（例如空闲时的渲染更新）。
• requestIdleCallback 只提供了一个简单的空闲时间回调，它并没有内建对任务优先级的控制能力。所有的任务都会在浏览器空闲时执行，这样可能会导致一些高优先级任务被低优先级任务阻塞，无法及时处理。

2. 任务的中断与抢占

React 需要在渲染过程中支持任务的中断和抢占，以保证用户交互的流畅性和响应性。React 调度器实现了 时间切片 和 任务中断，可以在渲染过程中暂停低优先级的任务，去执行高优先级的任务（比如响应用户输入）。

• requestIdleCallback 是在浏览器空闲时才执行的，无法灵活地中断正在进行的任务并优先处理高优先级任务。因此，React 需要更细粒度的调度来中断低优先级的渲染任务，确保用户交互的即时反馈。

3. 跨浏览器兼容性

requestIdleCallback 是一个相对较新的浏览器 API，并不是所有浏览器都支持它，特别是在旧版浏览器中。为了确保 React 在更多浏览器上都能正常工作，React 选择使用自定义的调度机制来处理任务，而不依赖于 requestIdleCallback。

• React 的调度器（例如 Fiber 调度器）能在所有浏览器中正常工作，而不依赖于特定的浏览器 API。

4. 能耗管理

React 自己实现的调度器可以对空闲时间和浏览器的任务执行进行优化，最大限度地减少电池消耗和资源浪费。通过精确控制何时以及如何执行任务，React 可以避免不必要的计算，尤其是在移动设备上。

• requestIdleCallback 调度任务的时机完全取决于浏览器空闲的状态，这可能导致在设备负载较高时浏览器频繁执行不必要的回调，消耗更多电量和计算资源。

5. 更强的可定制性

React 需要支持许多不同类型的任务，例如事件处理、动画、数据加载和视图更新。React 自己的调度器能够更灵活地处理这些任务的优先级和执行时机。而 requestIdleCallback 仅提供一个回调，无法处理那么多类型的任务。

在 React 中，forwardRef 是一个高阶组件（HOC），用于**转发引用（ref）**到子组件的 DOM 元素或子组件内部的某个实例上。通常，React 的 ref 是用来直接访问 DOM 元素或组件实例的，但是在函数组件中，ref 是无法直接使用的，因为函数组件没有实例。

forwardRef 允许我们在函数组件中传递 ref，将其绑定到组件内部的 DOM 元素或组件实例上，从而能够在父组件中访问这个子组件的 DOM 或实例方法。

1. forwardRef 的作用

forwardRef 使得我们能够将 ref 从父组件转发到子组件中，使得父组件能够访问子组件的内部 DOM 元素或方法。

2. forwardRef 的语法

forwardRef 接受一个函数组件，并返回一个新的组件，该组件会接收 ref 参数并将其转发到子组件。

import React, { forwardRef } from 'react';

// 使用 forwardRef 创建一个转发 ref 的组件
const MyButton = forwardRef((props, ref) => {
  return <button ref={ref}>{props.children}</button>;
});

export default MyButton;

在上面的例子中，MyButton 组件是一个函数组件，接受 props 和 ref 作为参数。forwardRef 将 ref 转发到 <button> 元素上。

3. 使用场景

场景 1：访问子组件的 DOM 元素

父组件想要直接访问子组件的 DOM 元素或执行某些操作（例如聚焦某个输入框）。

import React, { useRef } from 'react';
import { forwardRef } from 'react';

// 定义一个转发 ref 的函数组件
const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function ParentComponent() {
  const inputRef = useRef();

  const handleFocus = () => {
    inputRef.current.focus();  // 访问子组件的 DOM 元素，执行聚焦操作
  };

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

export default ParentComponent;

在这个例子中，Input 组件通过 forwardRef 转发 ref，让父组件能够直接访问并操作 <input> 元素，例如聚焦。

场景 2：将 ref 转发到第三方库的组件

在使用第三方库时，通常我们需要通过 ref 来获取其组件的 DOM 元素或实例方法。如果该库的组件是一个函数组件，而不是类组件，ref 默认是无法传递的。此时可以使用 forwardRef 来实现。

例如，第三方库中的一个组件：

// ThirdPartyComponent.js
import React from 'react';

function ThirdPartyComponent() {
  return <div>Some third party component</div>;
}

export default ThirdPartyComponent;

如果我们想要通过 ref 访问这个 div，就可以使用 forwardRef 进行封装：

// WrappedComponent.js
import React, { forwardRef } from 'react';
import ThirdPartyComponent from './ThirdPartyComponent';

const WrappedComponent = forwardRef((props, ref) => {
  return <ThirdPartyComponent ref={ref} {...props} />;
});

export default WrappedComponent;