面试题：React 条件渲染与 React Fiber 的关系及应用场景

React 条件渲染在 React Fiber 架构下的工作原理

Fiber 架构基础：React Fiber 将渲染任务拆分成一个个小的工作单元（Fiber），每个 Fiber 代表一个 React 元素。这使得 React 可以暂停、恢复和调整渲染优先级。
条件渲染过程：当进行条件渲染时，例如 {condition && <Component />}，React Fiber 会根据条件动态地创建、更新或删除 Fiber 节点。如果条件为真，React Fiber 会按照正常流程创建该组件对应的 Fiber 节点并将其纳入渲染树；若条件为假，则会移除或跳过相关 Fiber 节点的处理。在这个过程中，Fiber 架构通过调度器（Scheduler）来管理这些任务，确保高优先级的任务优先执行，例如用户交互相关的任务。

React Fiber 对条件渲染性能和应用场景的影响

性能影响
- 提高流畅度：在复杂条件渲染场景下，Fiber 架构的任务切片机制避免了长时间占用主线程，使得浏览器有机会处理其他任务（如动画、用户输入等），提升了应用的流畅度。例如，在一个包含大量条件渲染的列表中，Fiber 可以逐步渲染，而不是一次性阻塞主线程进行所有渲染。
- 优化更新性能：当条件变化导致组件重新渲染时，Fiber 架构可以更精确地计算出需要更新的部分，只对变化的 Fiber 节点进行操作，减少不必要的渲染，提高更新效率。
应用场景
- 复杂交互界面：如大型表单，其中的某些字段根据用户的选择动态显示或隐藏，Fiber 架构能够更好地处理这些频繁的条件渲染和交互，保证用户操作的响应性。
- 实时数据展示：例如股票交易界面，根据实时数据的变化动态显示不同的图表或信息，Fiber 可以在不阻塞主线程的情况下快速更新条件渲染的内容。

复杂条件渲染下 React Fiber 架构的优势及优化交互体验示例

优势：在涉及多层嵌套条件、动态数据驱动的复杂条件渲染场景中，Fiber 架构的优先级调度和增量渲染特性能够确保关键部分优先渲染并及时响应用户操作。比如在一个电商产品详情页，根据用户登录状态、会员等级、产品库存等多个条件动态展示不同的价格、促销信息、购买按钮等。
优化交互体验示例：以一个具有搜索功能的商品列表为例，列表中的商品根据搜索关键词、价格范围、库存状态等条件进行动态显示和隐藏。利用 React Fiber 的特性，可以这样优化：
- 优先级调度：当用户输入搜索关键词时，将搜索结果渲染任务设置为高优先级，优先于其他可能的低优先级更新（如广告位的更新）。可以通过 React.unstable_runWithPriority 来设置任务优先级。
- 增量渲染：在商品列表滚动时，使用 useCallback 和 useMemo 配合 Fiber 的增量渲染机制，只更新可见区域内商品的条件渲染部分，而不是整个列表。例如，只有当商品进入视口时，才根据库存状态决定是否显示“售罄”标识，避免不必要的渲染。

import React, { useCallback, useMemo } from'react';

const ProductList = ({ products, searchTerm, minPrice, maxPrice }) => {
  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.name.includes(searchTerm) &&
      product.price >= minPrice &&
      product.price <= maxPrice
    );
  }, [products, searchTerm, minPrice, maxPrice]);

  const renderProduct = useCallback((product, index) => {
    const isInStock = product.inStock > 0;
    return (
      <div key={index}>
        <h3>{product.name}</h3>
        <p>Price: {product.price}</p>
        {isInStock && <p>Available</p>}
        {!isInStock && <p>Out of stock</p>}
      </div>
    );
  }, []);

  return (
    <div>
      {filteredProducts.map(renderProduct)}
    </div>
  );
};

export default ProductList;

通过这种方式，在复杂条件渲染场景下，利用 React Fiber 的特性有效优化了交互体验，提高了应用性能。

星途面试题库

面试题：React 条件渲染与 React Fiber 的关系及应用场景

知识考点

面试题答案

React 条件渲染在 React Fiber 架构下的工作原理

React Fiber 对条件渲染性能和应用场景的影响

复杂条件渲染下 React Fiber 架构的优势及优化交互体验示例