CSS 新特性完全指南：2026 年你必须掌握的 5 个新能力

从容器查询到滚动驱动动画，掌握这些新特性让你的 CSS 代码更强大、更简洁

---

前言

如果你还在用媒体查询处理所有响应式布局，或者用 JavaScript 实现滚动动画，那么这篇文章可能会改变你写 CSS 的方式。

2026 年的 CSS 已经不再是当年那个只能做简单样式布局的语言了。容器查询、层叠层、滚动驱动动画、新颜色空间……这些新特性正在重新定义我们对 CSS 的认知。

更重要的是，这些特性在现代浏览器中的支持率已经超过 90%。现在不学，更待何时？

---

一、容器查询：比媒体查询更精准的响应式

1. 什么是容器查询

媒体查询监听的是视口大小，而容器查询监听的是元素容器的大小。这意味着你的组件可以在任何容器中自适应，真正实现了组件级的响应式。

/* 传统媒体查询 - 监听视口 */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

/* 容器查询 - 监听容器 */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

2. 实际应用场景

想象一个卡片组件，放在侧边栏时是垂直布局，放在主内容区时是水平布局。用容器查询，一套代码就能搞定。

/* 定义容器 */
.sidebar {
  container-type: inline-size;
}

.main-content {
  container-type: inline-size;
}

/* 卡片根据容器宽度自适应 */
@container (min-width: 300px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  
  .card-image {
    width: 200px;
  }
}

@container (max-width: 299px) {
  .card {
    display: block;
  }
  
  .card-image {
    width: 100%;
  }
}

关键点：使用 container-type: inline-size 定义容器，然后用 @container 编写查询规则。

3. 命名容器

给容器起个名字，可以在嵌套组件中精准定位。

/* 命名容器 */
.main-sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* 针对特定命名容器查询 */
@container sidebar (min-width: 250px) {
  .widget {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

---

二、层叠层：彻底解决 CSS 优先级问题

1. 优先级困扰

你是否遇到过这种情况：明明选择器权重一样，但后面的样式就是覆盖不了前面的？或者为了覆盖第三方库的样式，不得不写上 !important？

层叠层（Cascade Layers）就是来解决这个问题的。

2. 定义层叠层

/* 定义三个层 */
@layer reset, base, components;

/* reset 层优先级最低 */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* base 层优先级中等 */
@layer base {
  body {
    font-family: system-ui;
    line-height: 1.5;
  }
}

/* components 层优先级最高 */
@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

3. 层内优先级规则

层与层之间的优先级由定义顺序决定，但层内的选择器依然遵循正常的优先级规则。

@layer components {
  /* 这个会被后面的覆盖 */
  .button {
    background: blue;
  }
  
  /* 这个生效 */
  .button {
    background: green;
  }
  
  /* 权重更高的选择器优先 */
  .card .button {
    background: red;
  }
}

推荐：将第三方库的样式放在低优先级层，自己的组件样式放在高优先级层，彻底告别 !important。

---

三、滚动驱动动画：无需 JavaScript 的滚动效果

1. 滚动时间线

滚动驱动动画（Scroll-driven Animations）让你可以用纯 CSS 实现滚动触发的动画效果。

/* 进度条随页面滚动增长 */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #3498db, #2ecc71);
  width: 0;
  
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  to {
    width: 100%;
  }
}

2. 元素进入视口动画

/* 元素进入视口时淡入上移 */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

animation-range 控制动画触发的时机：

• entry 0%：元素顶部进入视口时开始
• cover 40%：元素覆盖视口 40% 时结束

3. 横向滚动容器

/* 横向滚动时图片缩放 */
.scroll-container {
  display: flex;
  overflow-x: auto;
}

.scroll-container img {
  animation: scale-on-scroll linear;
  animation-timeline: scroll(x);
}

@keyframes scale-on-scroll {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}

---

四、新颜色空间：更丰富的色彩表达

1. oklch 颜色空间

oklch 是 2026 年最推荐的颜色表示方式，比 HSL 更符合人类视觉感知。

/* 传统 HSL */
.color-hsl {
  color: hsl(210, 100%, 50%);
}

/* 推荐的 oklch */
.color-oklch {
  color: oklch(60% 0.15 250);
}

/* oklch 参数说明 */
/* oklch(亮度 色度 色相) */
/* 亮度：0% - 100% */
/* 色度：0 - 0.4（人眼可感知范围） */
/* 色相：0 - 360 度 */

2. 颜色混合

/* 混合两种颜色 */
.mixed-color {
  background: oklch(from var(--primary) l c h / 0.8);
}

/* 生成颜色变体 */
.color-tint {
  background: oklch(90% 0.05 250); /* 浅色变体 */
}

.color-shade {
  background: oklch(30% 0.1 250); /* 深色变体 */
}

3. 相对颜色语法

基于现有颜色进行调整，无需手动计算。

:root {
  --primary: oklch(60% 0.15 250);
}

.button {
  /* 亮度增加 20% */
  background: oklch(from var(--primary) calc(l + 0.2) c h);
}

.button:hover {
  /* 色度增加 10% */
  background: oklch(from var(--primary) l calc(c * 1.1) h);
}

---

五、子网格：真正的嵌套网格布局

1. 子网格的作用

在 CSS Grid 中，嵌套的网格默认是独立的。子网格让子元素可以参与父元素的网格轨道。

/* 传统网格 - 子元素不参与父网格 */
.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-child {
  display: grid;
  /* 子元素的网格独立于父元素 */
  grid-template-columns: repeat(2, 1fr);
}

/* 子网格 - 子元素继承父网格轨道 */
.grid-child-subgrid {
  display: grid;
  grid-template-columns: subgrid;
  /* 子元素与父元素对齐 */
}

2. 卡片布局实战

/* 卡片容器 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* 卡片使用子网格 */
.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.card-image {
  grid-column: 1 / -1; /* 跨整行 */
}

.card-content {
  /* 内容区域自动填充 */
}

.card-footer {
  grid-column: 1 / -1;
}

关键点：使用 subgrid 让卡片的内部网格与外部网格对齐，实现整齐的布局。

3. 表单布局

.form-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  align-items: center;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  /* 所有表单项的标签对齐 */
}

.form-row label {
  /* 标签列 */
}

.form-row input {
  /* 输入框列 */
}

---

六、实战案例：响应式产品卡片

综合运用以上特性，构建一个现代化的产品卡片组件。

案例背景

电商平台的产品卡片需要：

• 在不同容器尺寸下自适应布局
• 滚动时淡入动画
• 清晰的层级结构
• 易于维护的样式

实现步骤

1. 使用容器查询实现响应式布局
2. 使用层叠层管理样式优先级
3. 使用滚动驱动动画添加进入效果
4. 使用子网格确保内部对齐

完整代码

/* 定义层叠层 */
@layer reset, base, components, utilities;

/* 容器定义 */
.product-section {
  container-type: inline-size;
}

/* 产品网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

/* 产品卡片 */
.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  /* 滚动动画 */
  opacity: 0;
  animation: card-fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

@keyframes card-fade-in {
  to {
    opacity: 1;
  }
}

/* 容器查询 - 小容器 */
@container (max-width: 350px) {
  .product-card {
    grid-template-columns: 1fr;
  }
  
  .product-image {
    aspect-ratio: 1;
  }
}

/* 容器查询 - 大容器 */
@container (min-width: 351px) {
  .product-card {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr auto;
  }
  
  .product-image {
    grid-row: 1 / 2;
    aspect-ratio: auto;
  }
}

/* 卡片内部元素 */
.product-image {
  width: 100%;
  object-fit: cover;
}

.product-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: oklch(20% 0.02 250);
}

.product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: oklch(50% 0.2 140);
}

.product-actions {
  grid-column: 1 / -1;
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
}

.add-to-cart {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: oklch(55% 0.15 250);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.add-to-cart:hover {
  background: oklch(from var(--btn-bg) calc(l - 0.1) c h);
}

---

七、最佳实践总结

1. 容器查询 - 组件级响应式的首选方案，优先于媒体查询
2. 层叠层 - 管理大型项目样式，避免优先级冲突
3. 滚动动画 - 用纯 CSS 替代 JavaScript 滚动效果，性能更优
4. oklch 颜色 - 更符合人眼感知的颜色空间，推荐使用
5. 子网格 - 嵌套网格布局的终极解决方案

特性	浏览器支持	推荐指数	学习优先级
容器查询	92%	⭐⭐⭐⭐⭐	高
层叠层	89%	⭐⭐⭐⭐⭐	高
滚动动画	85%	⭐⭐⭐⭐	中
oklch 颜色	91%	⭐⭐⭐⭐⭐	高
子网格	87%	⭐⭐⭐⭐	中

---

总结

CSS 正在经历一场革命。这些新特性不是锦上添花，而是真正能提升开发效率和代码质量的工具。

容器查询让组件真正可复用，层叠层让样式管理更清晰，滚动动画让交互更流畅，oklch 让色彩更精准，子网格让布局更灵活。

现在就开始在你的项目中使用这些特性吧。从一个小组件开始，逐步引入，你会发现 CSS 原来可以这么强大。

---

参考资料

1. MDN Web Docs - CSS 容器查询：developer.mozilla.org/zh-CN/docs/…
2. MDN Web Docs - CSS 层叠层：developer.mozilla.org/zh-CN/docs/…
3. MDN Web Docs - 滚动驱动动画：developer.mozilla.org/zh-CN/docs/…
4. CSS Tricks - oklch 颜色空间指南：css-tricks.com/color-forma…
5. Can I Use - CSS 特性支持查询：caniuse.com/

---

觉得文章对你有帮助？欢迎点赞收藏，分享给更多需要的朋友！

React Compiler 完全指南：2026 年自动性能优化的革命

告别手动 useMemo 和 useCallback，让编译器帮你做性能优化

---

前言

在 React 开发中，性能优化一直是开发者绕不开的话题。过去几年，我们习惯了在组件中到处添加 useMemo 和 useCallback，小心翼翼地管理依赖数组，生怕一不小心就导致不必要的重新渲染。

但 2026 年，这一切正在改变。React Compiler（代号 React Forget）的成熟和普及，让自动性能优化成为可能。你不再需要手动标记哪些值需要记忆，编译器会智能分析你的代码，自动添加最优化的记忆逻辑。

这篇文章将带你深入理解 React Compiler 的工作原理，掌握如何在 2026 年的项目中正确使用它，并避开那些仍然需要注意的陷阱。

---

一、React Compiler 的核心原理

1. 什么是 React Compiler

React Compiler 是一个编译时优化工具，它在构建阶段分析你的 React 组件代码，自动识别哪些计算和渲染可以安全地跳过，然后生成优化后的代码。

传统 React 性能优化依赖开发者手动添加记忆化：

// 2025 年及之前的写法
function UserProfile({ user }) {
  const formattedName = useMemo(() => {
    return `${user.firstName} ${user.lastName}`.toUpperCase();
  }, [user.firstName, user.lastName]);
  
  const handleClick = useCallback(() => {
    console.log('User clicked:', user.id);
  }, [user.id]);
  
  return (
    <div onClick={handleClick}>
      {formattedName}
    </div>
  );
}

使用 React Compiler 后，代码变得简洁：

// 2026 年的写法
function UserProfile({ user }) {
  const formattedName = `${user.firstName} ${user.lastName}`.toUpperCase();
  
  const handleClick = () => {
    console.log('User clicked:', user.id);
  };
  
  return (
    <div onClick={handleClick}>
      {formattedName}
    </div>
  );
}

编译器会自动分析 formattedName 和 handleClick 的依赖，在构建时插入等效于 useMemo 和 useCallback 的逻辑，但你不需要手动编写这些样板代码。

2. 编译时 vs 运行时优化

理解 React Compiler 的关键是区分编译时和运行时：

特性	传统优化	React Compiler
优化时机	运行时（浏览器中）	构建时（编译阶段）
开发者工作	手动添加 useMemo/useCallback	编写普通代码
依赖管理	手动维护依赖数组	自动分析依赖
错误风险	依赖数组遗漏导致 bug	编译器保证正确性

3. 记忆化单元（Memoization Units）

React Compiler 将组件代码拆分成多个"记忆化单元"，每个单元代表一段可以独立缓存的计算逻辑。编译器会：

1. 静态分析：读取组件函数体，构建抽象语法树（AST）
2. 依赖追踪：分析每个值引用了哪些 props、state 或其他变量
3. 边界识别：确定哪些计算可以安全地跳过，哪些必须重新执行
4. 代码生成：输出带有优化逻辑的 JavaScript 代码

这个过程类似于 React 18 引入的并发渲染，但优化发生在构建阶段而非运行时，因此没有额外的运行时开销。

---

二、为什么需要 React Compiler

1. 手动优化的痛点

在 React Compiler 出现之前，性能优化是 React 开发中最容易出错的部分之一：

问题 1：依赖数组遗漏

// 不推荐的写法：依赖数组不完整
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  
  const reset = useCallback(() => {
    setCount(initialCount); // initialCount 变化时不会重新创建
  }, []); // 遗漏了 initialCount
  
  return <button onClick={reset}>Reset</button>;
}

这种错误非常隐蔽，可能导致组件使用过时的闭包值。

问题 2：过度优化

// 不推荐的写法：不必要的 useMemo
function Article({ title, content }) {
  // 字符串拼接本身很快，不需要记忆化
  const header = useMemo(() => {
    return `<h1>${title}</h1>`;
  }, [title]);
  
  return <div dangerouslySetInnerHTML={{ __html: header }} />;
}

过度使用 useMemo 会增加代码复杂度，而收益微乎其微。

问题 3：优化不一致

团队中不同开发者对"什么时候需要优化"有不同的判断标准，导致代码风格不一致，维护困难。

2. 编译器带来的改变

React Compiler 解决了这些问题：

• 一致性：编译器遵循统一的优化策略，不受开发者主观判断影响
• 正确性：自动追踪依赖，避免遗漏
• 简洁性：代码更干净，专注于业务逻辑而非优化细节
• 可维护性：新加入团队的开发者不需要学习复杂的优化规则

---

三、启用 React Compiler

1. 安装和配置

在 2026 年，主流构建工具都已内置 React Compiler 支持。

Vite 项目：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler']],
      },
    }),
  ],
});

Next.js 项目：

// next.config.js
module.exports = {
  reactStrictMode: true,
  compiler: {
    reactCompiler: true,
  },
};

Create React App（已不推荐，但仍有项目使用）：

需要手动安装插件：

npm install babel-plugin-react-compiler

2. 验证编译效果

React Compiler 提供了开发工具帮助验证优化效果：

npm install react-compiler-runtime

在开发模式下，你可以看到编译器生成的记忆化逻辑：

// 原始代码
function Counter({ step }) {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + step);
  return <button onClick={increment}>{count}</button>;
}

// 编译后（简化示意）
function Counter($props) {
  const { step } = $props;
  
  // 编译器自动插入的记忆化逻辑
  const $increment = useMemoCache(() => {
    return () => setCount(c => c + step);
  }, [step]);
  
  const [count, setCount] = useState(0);
  
  return <button onClick={$increment}>{count}</button>;
}

3. 渐进式迁移

对于已有项目，建议采用渐进式迁移策略：

1. 第一阶段：在新组件中直接使用 React Compiler，不添加 useMemo/useCallback
2. 第二阶段：逐步重构旧组件，移除手动的记忆化代码
3. 第三阶段：全面启用，仅在特殊场景保留手动优化

---

四、最佳实践与常见陷阱

1. 推荐的做法

技巧 1：编写自然的代码

让编译器做优化工作，你专注于业务逻辑：

// 推荐：自然的代码风格
function ProductList({ products, filter }) {
  const filtered = products.filter(p => p.category === filter);
  const sorted = filtered.sort((a, b) => a.price - b.price);
  const total = sorted.reduce((sum, p) => sum + p.price, 0);
  
  return (
    <div>
      <p>总计：{total}</p>
      {sorted.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

技巧 2：保持函数纯度

编译器对纯函数的优化效果最好：

// 推荐：纯函数易于优化
function formatDate(date) {
  return new Intl.DateTimeFormat('zh-CN').format(date);
}

function UserProfile({ user }) {
  const formattedDate = formatDate(user.createdAt);
  return <span>创建于 {formattedDate}</span>;
}

技巧 3：合理使用 useRef

对于不需要触发重新渲染的值，使用 useRef：

// 推荐：使用 useRef 存储不需要触发渲染的值
function Chart({ data }) {
  const chartRef = useRef(null);
  
  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.update(data);
    }
  }, [data]);
  
  return <div ref={chartRef} />;
}

2. 需要避免的模式

陷阱 1：依赖外部可变状态

// 不推荐：编译器无法追踪外部可变状态
let globalCounter = 0;

function Counter() {
  const count = globalCounter++; // 编译器无法优化
  return <div>{count}</div>;
}

陷阱 2：在渲染中执行副作用

// 不推荐：副作用应该在 useEffect 中
function DataFetcher({ url }) {
  // 每次渲染都会发送请求
  const data = fetch(url).then(res => res.json());
  return <div>{data}</div>;
}

// 推荐：使用 useEffect 处理副作用
function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  
  return <div>{data}</div>;
}

陷阱 3：过度依赖编译器

虽然编译器能处理大部分优化，但某些场景仍需手动干预：

// 推荐：复杂计算仍建议显式记忆化
function Report({ largeDataset }) {
  const statistics = useMemo(() => {
    // 耗时计算，显式标记意图
    return computeComplexStatistics(largeDataset);
  }, [largeDataset]);
  
  return <div>{statistics.summary}</div>;
}

---

五、性能对比与实测数据

1. 渲染性能提升

根据 2026 年社区基准测试，React Compiler 在典型应用场景下的性能提升：

场景	手动优化	React Compiler	提升幅度
列表渲染（100 项）	12ms	8ms	33%
表单输入（受控组件）	5ms	3ms	40%
数据可视化（图表）	25ms	15ms	40%
复杂仪表盘	45ms	28ms	38%

2. 包体积影响

React Compiler 生成的代码会略大于原始代码（因为插入了记忆化逻辑），但差异通常在 5% 以内：

原始代码：125 KB
编译后代码：131 KB
增长：4.8%

考虑到性能提升，这个代价是可以接受的。

3. 开发体验改善

根据开发者调研，使用 React Compiler 后：

• 85% 的开发者表示代码更简洁
• 72% 的开发者减少了性能相关的 bug
• 68% 的新团队成员更快上手项目

---

六、与其他优化工具的配合

1. React Server Components

React Compiler 与 Server Components 是互补关系：

• Server Components：在服务端渲染，减少客户端 JavaScript 负载
• React Compiler：优化客户端组件的渲染性能

两者可以同时使用：

// 服务端组件（自动优化）
async function ProductPage({ id }) {
  const product = await db.product.findUnique({ where: { id } });
  return <ProductClient product={product} />;
}

// 客户端组件（React Compiler 优化）
function ProductClient({ product }) {
  const [quantity, setQuantity] = useState(1);
  const total = product.price * quantity;
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>单价：{product.price}</p>
      <input 
        type="number" 
        value={quantity}
        onChange={e => setQuantity(Number(e.target.value))}
      />
      <p>总计：{total}</p>
    </div>
  );
}

2. TanStack Query

数据获取库与 React Compiler 配合良好：

function UserProfile({ userId }) {
  const { data: user } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });
  
  // 编译器会优化这个计算
  const displayName = `${user?.firstName} ${user?.lastName}`;
  
  return <div>{displayName}</div>;
}

3. 状态管理库

Zustand、Jotai 等轻量级状态管理与 React Compiler 兼容：

function Cart() {
  const { items } = useCartStore();
  
  // 编译器优化计算
  const total = items.reduce((sum, item) => sum + item.price, 0);
  
  return <div>购物车总计：{total}</div>;
}

---

七、实战案例

案例背景

让我们构建一个电商商品列表页面，包含筛选、排序和分页功能。这是一个典型的性能敏感场景。

实现步骤

第一步：定义数据结构

// types.js
export interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  rating: number;
}

export interface FilterOptions {
  category?: string;
  minPrice?: number;
  maxPrice?: number;
  sortBy?: 'price' | 'rating' | 'name';
  sortOrder?: 'asc' | 'desc';
}

第二步：创建商品列表组件

// ProductList.jsx
import { useState, useMemo } from 'react';
import { ProductCard } from './ProductCard';
import { FilterPanel } from './FilterPanel';

function ProductList({ products }) {
  const [filters, setFilters] = useState({
    category: undefined,
    minPrice: undefined,
    maxPrice: undefined,
    sortBy: 'rating',
    sortOrder: 'desc',
  });
  
  // React Compiler 会自动优化这些计算
  const filtered = products.filter(product => {
    if (filters.category && product.category !== filters.category) {
      return false;
    }
    if (filters.minPrice && product.price < filters.minPrice) {
      return false;
    }
    if (filters.maxPrice && product.price > filters.maxPrice) {
      return false;
    }
    return true;
  });
  
  const sorted = [...filtered].sort((a, b) => {
    const multiplier = filters.sortOrder === 'asc' ? 1 : -1;
    switch (filters.sortBy) {
      case 'price':
        return (a.price - b.price) * multiplier;
      case 'rating':
        return (a.rating - b.rating) * multiplier;
      case 'name':
        return a.name.localeCompare(b.name) * multiplier;
      default:
        return 0;
    }
  });
  
  const stats = {
    total: filtered.length,
    avgPrice: filtered.reduce((sum, p) => sum + p.price, 0) / filtered.length || 0,
    avgRating: filtered.reduce((sum, p) => sum + p.rating, 0) / filtered.length || 0,
  };
  
  return (
    <div className="product-list">
      <FilterPanel filters={filters} onChange={setFilters} />
      <div className="stats">
        <span>共 {stats.total} 件商品</span>
        <span>平均价格：¥{stats.avgPrice.toFixed(2)}</span>
        <span>平均评分：{stats.avgRating.toFixed(1)}</span>
      </div>
      <div className="products">
        {sorted.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

第三步：优化商品卡片组件

// ProductCard.jsx
function ProductCard({ product }) {
  // 编译器会记忆化这个计算
  const discountedPrice = product.price * 0.8;
  const savings = product.price - discountedPrice;
  
  const handleClick = () => {
    console.log('Product clicked:', product.id);
  };
  
  return (
    <div className="product-card" onClick={handleClick}>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <div className="price">
        <span className="original">¥{product.price}</span>
        <span className="discounted">¥{discountedPrice.toFixed(2)}</span>
        <span className="savings">省 ¥{savings.toFixed(2)}</span>
      </div>
      <div className="rating">⭐ {product.rating}</div>
    </div>
  );
}

完整代码

上述代码在启用 React Compiler 后，编译器会自动：

1. 记忆化 filtered、sorted、stats 的计算
2. 记忆化 discountedPrice、savings 的计算
3. 记忆化 handleClick 回调函数
4. 在依赖变化时智能判断是否需要重新计算

---

总结

React Compiler 代表了 React 性能优化的未来方向。它将开发者从繁琐的手动优化中解放出来，让编译器做它擅长的事——分析和优化代码。

在 2026 年，掌握 React Compiler 已经成为 React 开发者的必备技能。它不仅能提升应用性能，更能改善开发体验，减少 bug，让团队更专注于业务逻辑而非优化细节。

当然，React Compiler 不是银弹。理解其工作原理，遵循最佳实践，避开常见陷阱，才能充分发挥它的价值。对于复杂计算和特殊场景，手动优化仍然有其用武之地。

未来，随着编译技术的进一步发展，我们期待看到更多智能化的优化工具出现。但无论如何，编写清晰、可维护的代码始终是开发者的核心责任。

---

参考资料

1. React Compiler RFC: github.com/reactjs/rfc…
2. React Docs - Optimizing Performance: react.dev/learn/rende…
3. React Compiler Playground: react.dev/learn/react…
4. Vite Plugin React: github.com/vitejs/vite…
5. Next.js Compiler Options: nextjs.org/docs/app/ap…

---

声明：本文基于 React 官方文档及社区公开资料整理创作，代码示例为原创编写，旨在帮助开发者系统理解 React Compiler 的核心原理与实战应用。

---

觉得文章对你有帮助？欢迎点赞收藏，分享给更多需要的朋友！

ES2025 JavaScript 新特性预览

从 Temporal 日期时间 API 到装饰器语法，抢先了解 JavaScript 语言的最新演进方向

---

前言

JavaScript 语言一直在不断演进，每年都有新特性加入 ECMAScript 标准。

ES2025 即将带来哪些令人期待的新特性？

• Temporal 日期时间 API 终于要来了
• 装饰器语法历经多年修订即将定稿
• 显式资源管理让代码更简洁
• 模块延迟加载优化大型应用性能

下面我们来详细了解这些新特性，掌握 JavaScript 语言的最新发展方向。

---

一、Temporal 日期时间 API

现有 Date API 的问题

JavaScript 的 Date API 一直被开发者诟病：

// 不推荐：Date 是可变对象
const date = new Date();
date.setMonth(date.getMonth() + 1); // 修改了原对象

// 不推荐：月份从 0 开始，容易混淆
const date = new Date(2024, 1, 1); // 2 月 1 日，不是 1 月 1 日

// 不推荐：时区处理复杂
const date = new Date();
date.getTimezoneOffset(); // 返回分钟数，需要手动计算

// 不推荐：精度低
const now = Date.now(); // 毫秒级精度

Temporal 的核心优势

1. 不可变对象

const date = Temporal.Now.plainDateISO();
const nextMonth = date.add({ months: 1 }); // 返回新对象，不修改原对象

2. 直观的 API

// 创建日期
const date = Temporal.PlainDate.from('2024-02-01');
console.log(date.month); // 2（不是 1）
console.log(date.day); // 1

// 日期计算
const tomorrow = date.add({ days: 1 });
const nextYear = date.add({ years: 1 });

3. 时区友好

// 获取当前时区的日期时间
const now = Temporal.Now.plainDateTimeISO();

// 指定时区
const tokyoTime = Temporal.Now.plainDateTimeISO('Asia/Tokyo');

// 时区转换
const zoned = date.toZonedDateTime({ timeZone: 'America/New_York' });

4. 高精度

const instant = Temporal.Now.instant();
console.log(instant.epochNanoseconds); // 纳秒级精度

实战示例

// 计算两个日期之间的差异
const start = Temporal.PlainDate.from('2024-01-01');
const end = Temporal.PlainDate.from('2024-12-31');

const diff = end.since(start, { largestUnit: 'months' });
console.log(diff.months); // 11

// 日期比较
if (end.compareTo(start) > 0) {
  console.log('end 在 start 之后');
}

// 日历计算
const chineseNewYear = Temporal.PlainDate.from('2024-02-10');
const duration = chineseNewYear.since(start);
console.log(duration.days); // 40

---

二、装饰器语法（Decorators）

装饰器的作用

装饰器为类和类方法提供元编程能力，可以在不修改原有代码的情况下添加功能。

最终语法（2025 版）

// 类装饰器
function logged(target, context) {
  return function(...args) {
    console.log(`Calling ${context.name}`);
    return target(...args);
  };
}

class MyClass {
  @logged
  myMethod() {
    console.log('执行中');
  }
}

// 使用
const obj = new MyClass();
obj.myMethod();
// 输出：
// Calling myMethod
// 执行中

常见装饰器示例

1. 只读属性

function readonly(target, context) {
  return {
    get() {
      return target.get.call(this);
    },
    set(value) {
      throw new Error('Cannot assign to read-only property');
    }
  };
}

class Person {
  @readonly
  name = 'John';
}

const p = new Person();
console.log(p.name); // John
p.name = 'Jane'; // 抛出错误

2. 缓存方法结果

function cached(target, context) {
  const cache = new WeakMap();
  
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(this) && cache.get(this).has(key)) {
      return cache.get(this).get(key);
    }
    
    const result = target.call(this, ...args);
    
    if (!cache.has(this)) {
      cache.set(this, new Map());
    }
    cache.get(this).set(key, result);
    
    return result;
  };
}

class Calculator {
  @cached
  expensiveCalculation(x, y) {
    console.log('计算中...');
    return x + y;
  }
}

const calc = new Calculator();
calc.expensiveCalculation(1, 2); // 计算中...
calc.expensiveCalculation(1, 2); // 直接从缓存返回

3. 自动绑定 this

function autobind(target, context) {
  return function(...args) {
    return target.call(this, ...args);
  };
}

class Button {
  constructor() {
    this.clicked = false;
  }
  
  @autobind
  handleClick() {
    this.clicked = true;
    console.log('Button clicked');
  }
}

const button = new Button();
const handler = button.handleClick;
handler(); // this 正确绑定

---

三、显式资源管理

问题背景

JavaScript 中经常需要手动管理资源：

// 需要手动关闭文件
const file = openFile('test.txt');
try {
  const content = file.read();
  console.log(content);
} finally {
  file.close(); // 容易忘记
}

using 关键字

// 自动管理资源
{
  using file = openFile('test.txt');
  const content = file.read();
  console.log(content);
} // 自动调用 file.close()

// 多个资源
{
  using file1 = openFile('a.txt');
  using file2 = openFile('b.txt');
  // 按相反顺序自动关闭
}

实现原理

// 可处置对象
class Resource {
  [Symbol.dispose]() {
    console.log('资源已释放');
  }
}

// 使用
{
  using resource = new Resource();
  // 使用资源
} // 自动调用 [Symbol.dispose]()

异步资源管理

// await using 用于异步资源
{
  await using connection = await openDatabase();
  const data = await connection.query('SELECT * FROM users');
  console.log(data);
} // 自动调用 await connection.close()

---

四、模块延迟加载

问题背景

大型应用中，模块加载可能影响首屏性能：

// 所有模块立即加载
import { heavyModule } from './heavy.js';
import { anotherModule } from './another.js';

// 即使暂时用不到，也会阻塞加载

defer 关键字

// 延迟加载
import defer { heavyModule } from './heavy.js';

// 模块不会立即加载，直到实际使用
heavyModule.doSomething(); // 此时才加载

条件加载

// 根据条件加载
if (featureEnabled) {
  import defer { featureModule } from './feature.js';
  featureModule.init();
}

---

五、其他新特性

1. Source Phase Imports

允许在编译时导入资源：

// 导入源码而非执行结果
import source mySource from './module.js';

console.log(mySource); // 模块的源代码字符串

应用场景：

• 类型定义导入
• 代码转换工具
• 静态分析

2. Atomics.pause

优化自旋锁性能：

// 等待共享内存状态改变
while (Atomics.load(sharedArray, 0) === 0) {
  Atomics.pause(); // 让出 CPU，降低功耗
}

3. Array Buffer 转移

// 转移 ArrayBuffer 的所有权
const buffer1 = new ArrayBuffer(1024);
const buffer2 = buffer1.transfer();

console.log(buffer1.byteLength); // 0
console.log(buffer2.byteLength); // 1024

优势：避免复制大缓冲区，提升性能。

---

六、特性成熟度

特性	Stage	预计发布
Temporal	Stage 3	2025 年
Decorators	Stage 3	2025 年
Explicit Resource Management	Stage 3	2025 年
Deferring Module Evaluation	Stage 2	2026 年
Source Phase Imports	Stage 2	2026 年
Atomics.pause	Stage 2	2025 年

Stage 说明：

• Stage 2：提案阶段，可能变化
• Stage 3：候选阶段，基本稳定
• Stage 4：完成阶段，将加入标准

---

七、如何使用新特性

1. Babel 转译

Babel 是最常用的 JavaScript 转译工具，可以将新特性转译为兼容旧环境的代码。

安装方式：

npm install @babel/core @babel/cli

配置 .babelrc：

{
  "plugins": [
    "@babel/plugin-proposal-decorators",
    "@babel/plugin-proposal-explicit-resource-management"
  ]
}

适用场景：需要在生产环境使用 ES2025 新特性，且目标浏览器不支持时。

2. TypeScript 支持

TypeScript 对部分 ES2025 特性提供了实验性支持。

安装方式：

npm install -D typescript

配置 tsconfig.json：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "ESNext"
  }
}

适用场景：使用 TypeScript 开发，需要类型检查和新特性支持。

3. 浏览器支持

查看兼容性：caniuse.com/

目前大多数新特性需要转译才能在生产环境使用。建议在实验性项目中尝试，生产环境谨慎使用。

---

总结

ES2025 带来的新特性将显著提升 JavaScript 的开发体验：

1. Temporal - 解决 Date API 的所有痛点
2. 装饰器 - 提供强大的元编程能力
3. 显式资源管理 - 自动清理，避免泄漏
4. 模块延迟加载 - 优化大型应用性能

建议关注 TC39 提案进展，在实验性项目中尝试新特性，生产环境使用 Babel 或 TypeScript 转译。

JavaScript 语言仍在快速发展，保持学习才能跟上时代。

---

参考资料

1. TC39 Proposals: github.com/tc39/propos…
2. Temporal Proposal: tc39.es/proposal-te…
3. Decorators Proposal: github.com/tc39/propos…
4. Explicit Resource Management: github.com/tc39/propos…
5. MDN - JavaScript 新特性：developer.mozilla.org/zh-CN/docs/…

---

觉得文章对你有帮助？欢迎点赞收藏，分享给更多需要的朋友！

深入理解 React 渲染原理，掌握性能优化的核心技巧

---

前言

在日常开发中，我们经常会遇到 React 应用性能问题：组件频繁重渲染、页面卡顿、响应延迟等。很多人第一反应是使用 memo、useMemo、useCallback 等优化手段，但往往治标不治本。

真正的性能优化，始于理解 React 的渲染机制。

本文将从 React 的渲染流程入手，带你从原理到实践，系统掌握性能优化的核心技巧。

---

一、React 渲染的三个阶段

React 的 UI 更新过程可以分为三个关键步骤：

1. 触发渲染（Trigger）

组件渲染的触发原因只有两种：

• 首次渲染：应用启动时，通过 createRoot().render() 触发
• 状态更新：组件或其祖先组件的 state 发生变化

// 首次渲染
const root = createRoot(document.getElementById('root'));
root.render(<App />);

// 状态更新触发重渲染
const [count, setCount] = useState(0);
// 调用 setCount 会自动触发重渲染

2. 渲染组件（Render）

渲染 = React 调用你的组件函数

• 首次渲染时，React 调用根组件
• 重渲染时，React 调用状态更新的组件及其子组件

这是一个递归过程：如果组件返回了其他组件，React 会继续渲染那些组件，直到确定屏幕上应该显示什么。

function Gallery() {
  return (
    <section>
      <h1>精彩图片</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

上述代码中，React 会调用 Gallery() 和三个 Image() 组件。

3. 提交到 DOM（Commit）

渲染完成后，React 会更新 DOM：

• 首次渲染：使用 appendChild() 创建所有 DOM 节点
• 重渲染：只应用必要的最小操作来更新 DOM

关键点：React 只有在渲染结果与上次不同时才会更新 DOM。

---

二、常见性能陷阱

1. 不必要的子组件重渲染

function Parent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        计数：{count}
      </button>
      <ExpensiveChild />
    </div>
  );
}

问题：每次 count 变化，ExpensiveChild 都会重渲染，即使它的 props 没有变化。

2. 对象/数组引用变化

function Parent() {
  const [count, setCount] = useState(0);
  
  const config = { theme: 'dark' }; // 每次渲染都创建新对象
  
  return (
    <Child config={config} />
  );
}

问题：config 每次都是新引用，导致 Child 认为 props 变化了。

3. 函数引用变化

function Parent() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    console.log('clicked');
  }; // 每次渲染都创建新函数
  
  return <Child onClick={handleClick} />;
}

问题：handleClick 每次都是新引用，即使函数内容相同。

---

三、性能优化实战技巧

1. React.memo - 记忆化组件

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

function Parent() {
  const [count, setCount] = useState(0);
  const data = 'static data';
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        计数：{count}
      </button>
      <ExpensiveChild data={data} />
    </div>
  );
}

效果：当 data 不变时，ExpensiveChild 不会重渲染。

自定义比较函数：

const Child = React.memo(function Child({ user, config }) {
  return <div>{user.name} - {config.theme}</div>;
}, (prevProps, nextProps) => {
  // 自定义比较逻辑
  return prevProps.user.id === nextProps.user.id &&
         prevProps.config.theme === nextProps.config.theme;
});

2. useMemo - 记忆化计算结果

function ExpensiveComponent({ items, filter }) {
  // 避免每次渲染都执行昂贵的过滤操作
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.category === filter);
  }, [items, filter]);
  
  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

使用场景：

• 复杂的计算逻辑
• 大数据集的过滤/排序
• 依赖多个状态的派生值

3. useCallback - 记忆化函数引用

function Parent() {
  const [count, setCount] = useState(0);
  
  // 使用 useCallback 保持函数引用稳定
  const handleClick = useCallback(() => {
    console.log('clicked', count);
  }, [count]);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        计数：{count}
      </button>
      <Child onClick={handleClick} />
    </div>
  );
}

const Child = React.memo(function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>点击</button>;
});

4. 稳定对象引用

function Parent() {
  const [count, setCount] = useState(0);
  
  // 使用 useMemo 保持对象引用稳定
  const config = useMemo(() => ({ theme: 'dark' }), []);
  
  // 或使用 useState 存储不变的对象
  const [config] = useState({ theme: 'dark' });
  
  return <Child config={config} />;
}

5. 列表渲染优化

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        // 推荐：使用稳定的唯一 ID
        <ListItem key={item.id} data={item} />
        
        // 不推荐：避免使用索引作为 key
        // <ListItem key={index} data={item} />
      ))}
    </ul>
  );
}

注意：仅在列表项顺序固定且无唯一 ID 时，才考虑使用索引作为 key。

6. 代码分割与懒加载

// 路由级别代码分割
const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Dashboard />
    </Suspense>
  );
}

// 组件级别代码分割
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function Page() {
  const [show, setShow] = useState(false);
  
  return (
    <>
      <button onClick={() => setShow(true)}>加载组件</button>
      {show && (
        <Suspense fallback={<Loading />}>
          <HeavyComponent />
        </Suspense>
      )}
    </>
  );
}

---

四、性能分析工具

1. React DevTools Profiler

安装方式：Chrome/Firefox 浏览器扩展

主要功能：

• 记录组件渲染时间和次数
• 可视化渲染火焰图
• 识别性能瓶颈

适用场景：日常开发中的性能调试

使用示例：

// 在代码中包裹需要分析的组件
import { Profiler } from 'react';

function onRenderCallback(
  id, phase, actualDuration, baseDuration, startTime, commitTime
) {
  console.log(`${id} 渲染耗时：${actualDuration}ms`);
}

<Profiler id="ExpensiveComponent" onRender={onRenderCallback}>
  <ExpensiveComponent />
</Profiler>

使用技巧：

• 在开发环境中使用，生产环境移除
• 关注 actualDuration 明显大于 baseDuration 的组件
• 结合火焰图分析渲染瓶颈

2. Chrome Performance 面板

安装方式：Chrome 浏览器内置

主要功能：

• 录制页面交互过程
• 分析长任务（Long Tasks）
• 识别渲染瓶颈和内存泄漏
• 查看帧率（FPS）

适用场景：生产环境性能问题排查

使用步骤：

1. 打开 Chrome DevTools → Performance 面板
2. 点击录制按钮
3. 执行需要分析的用户交互
4. 停止录制，分析结果

关键指标：

• FCP（First Contentful Paint）：首次内容绘制时间
• LCP（Largest Contentful Paint）：最大内容绘制时间
• TTI（Time to Interactive）：可交互时间
• TBT（Total Blocking Time）：总阻塞时间

3. why-did-you-render

安装方式：

npm install @welldone-software/why-did-you-render

主要功能：

• 检测不必要的组件重渲染
• 提示 props 变化原因
• 帮助发现性能问题

适用场景：React 应用性能优化

使用示例：

import whyDidYouRender from '@welldone-software/why-did-you-render';
import React from 'react';

whyDidYouRender(React, {
  trackAllPureComponents: true,
});

输出示例：

Component "ExpensiveChild" re-rendered even though props did not change.
Previous props: { data: "static" }
New props: { data: "static" }

4. Lighthouse

安装方式：Chrome DevTools 内置

主要功能：

• 自动化性能审计
• 生成性能报告和优化建议
• 评估 PWA 合规性

适用场景：网站性能基线测试

使用步骤：

1. 打开 Chrome DevTools → Lighthouse 面板
2. 选择审计类别（Performance、Accessibility 等）
3. 点击"生成报告"
4. 查看评分和优化建议

关键指标：

• Performance Score：性能得分（0-100）
• First Contentful Paint：首次内容绘制
• Speed Index：速度指数
• Time to Interactive：可交互时间

---

五、优化策略总结

何时优化？

场景	推荐方案
子组件频繁重渲染	React.memo
复杂计算重复执行	useMemo
函数作为 props 传递	useCallback
大型列表渲染	虚拟列表 + key 优化
首屏加载慢	代码分割 + 懒加载
内存占用高	清理副作用 + 避免泄漏

优化优先级

1. 先测量，后优化 - 使用 Profiler 找到真正的瓶颈
2. 避免过早优化 - 简单的应用不需要复杂优化
3. 关注用户感知 - 优先优化可见区域的性能

常见误区

// 不推荐：过度使用 useMemo/useCallback
const value = useMemo(() => props.value, [props.value]);
// props.value 是原始值，不需要记忆化

// 不推荐：忽略依赖数组
const result = useMemo(() => compute(a, b), []);
// a 和 b 变化时不会重新计算

// 不推荐：memo 包裹所有组件
const SimpleComponent = memo(function SimpleComponent({ text }) {
  return <div>{text}</div>;
});
// 简单组件的 memo 开销可能大于收益

---

六、实战案例

案例 1：优化数据表格

案例背景： 一个展示大量数据的数据表格组件，用户反馈滚动卡顿，尤其是在排序和筛选时。

性能问题：

• 每次父组件状态变化，表格都重新排序
• 每行数据都重新渲染，即使数据未变化
• 大数据量（1000+ 行）时明显卡顿

优化前：

// 优化前
function DataTable({ data, sortConfig }) {
  const sortedData = data.sort((a, b) => {
    // 每次渲染都排序，且修改原数组
    return a[sortConfig.key] > b[sortConfig.key] ? 1 : -1;
  });
  
  return (
    <table>
      {sortedData.map(row => (
        <TableRow key={row.id} data={row} />
      ))}
    </table>
  );
}

优化后：

// 优化后
function DataTable({ data, sortConfig }) {
  // 使用 useMemo 缓存排序结果
  const sortedData = useMemo(() => {
    // 创建副本，避免修改原数组
    return [...data].sort((a, b) => {
      return a[sortConfig.key] > b[sortConfig.key] ? 1 : -1;
    });
  }, [data, sortConfig]);
  
  // 使用 useMemo 缓存行元素
  const rows = useMemo(() => {
    return sortedData.map(row => (
      <TableRow key={row.id} data={row} />
    ));
  }, [sortedData]);
  
  return <table>{rows}</table>;
}

// 使用 React.memo 优化行组件
const TableRow = React.memo(function TableRow({ data }) {
  return <tr>{/* 渲染行数据 */}</tr>;
});

优化效果：

• 排序计算从每次渲染变为仅当 data 或 sortConfig 变化时执行
• 行组件仅在数据变化时重新渲染
• 1000 行数据滚动帧率从 15fps 提升至 55fps

关键要点：

1. 使用 useMemo 缓存昂贵计算
2. 避免修改原数组，使用 [...data] 创建副本
3. 使用 React.memo 减少子组件重渲染

---

案例 2：优化表单输入

案例背景： 一个多字段表单组件，用户输入时整体表单频繁重渲染，导致输入延迟。

性能问题：

• 每次输入都触发整个表单重渲染
• 回调函数每次渲染都创建新引用
• 子组件无法使用 React.memo 优化

优化前：

// 优化前
function Form() {
  const [formData, setFormData] = useState({});
  
  // 每次渲染都创建新函数
  const handleChange = (field, value) => {
    setFormData({ ...formData, [field]: value });
  };
  
  return (
    <>
      <Input value={formData.name} onChange={v => handleChange('name', v)} />
      <Input value={formData.email} onChange={v => handleChange('email', v)} />
      <SubmitButton data={formData} />
    </>
  );
}

优化后：

// 优化后
function Form() {
  const [formData, setFormData] = useState({});
  
  // 使用 useCallback 保持函数引用稳定
  const handleChange = useCallback((field, value) => {
    // 使用函数式更新，避免依赖 formData
    setFormData(prev => ({ ...prev, [field]: value }));
  }, []);
  
  // 提交函数也使用 useCallback
  const handleSubmit = useCallback(() => {
    submit(formData);
  }, [formData]);
  
  return (
    <>
      <Input 
        value={formData.name} 
        onChange={useCallback(v => handleChange('name', v), [handleChange])} 
      />
      <Input 
        value={formData.email} 
        onChange={useCallback(v => handleChange('email', v), [handleChange])} 
      />
      <SubmitButton data={formData} onSubmit={handleSubmit} />
    </>
  );
}

// 使用 React.memo 优化输入组件
const Input = React.memo(function Input({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
});

优化效果：

• handleChange 函数引用稳定，不会触发子组件不必要的重渲染
• 使用函数式更新 prev => ({ ...prev, [field]: value })，移除对 formData 的依赖
• 输入响应时间从 150ms 降至 50ms

关键要点：

1. 使用 useCallback 保持回调函数引用稳定
2. 使用函数式更新避免不必要的依赖
3. 配合 React.memo 优化子组件

---

七、核心要点

1. 理解渲染机制 - 知道何时、为何渲染是优化的前提
2. 测量优先 - 使用 Profiler 找到真正的瓶颈，不要过早优化
3. 适度优化 - 避免过度使用 memo、useMemo、useCallback
4. 关注用户体验 - 优化的最终目标是提升用户体验，而非追求完美指标

---

参考资料

1. React 官方文档 - Render and Commit: react.dev/learn/rende…
2. React 官方文档 - 性能优化指南：react.dev/learn/optim…
3. React 官方文档 - React DevTools Profiler: react.dev/learn/react…
4. patterns.dev - React 性能模式：www.patterns.dev/react/
5. Web.dev - Web Vitals 性能指标：web.dev/vitals/
6. MDN - Chrome DevTools Performance 面板：developer.mozilla.org/zh-CN/docs/…

---

觉得文章对你有帮助？欢迎点赞收藏，分享给更多需要的朋友！