轻松运用React 和 Vue！React 和 Vue的 diff 算法差异

最新推荐文章于 2026-06-05 16:01:37 发布

原创最新推荐文章于 2026-06-05 16:01:37 发布 · 433 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #vue.js #算法

下面用生活中整理书架的比喻来解释 React 和 Vue 的 diff 算法差异，并用代码示例对比性能优化策略，即使没有技术背景也能快速理解：

策略：从第一本书开始逐本对比，找到不同就更新，不擅长处理顺序变化。
原理：
按元素类型和 key 逐层递归对比；
列表对比时默认按索引顺序更新，导致频繁重排。
示例：书架更新
原书架：[书A, 书B, 书C]
新书架：[书D, 书A, 书B, 书C]
React 的操作：删除书A/B/C → 插入书D → 插入书A/B/C（效率低）

// React 示例：列表渲染时索引变化可能导致性能问题
{books.map((book, index) => (
  <div key={index}>{book.title}</div> // ❌ 错误使用 index 作为 key
))}

策略：双端对比（同时从头部、尾部扫描），假设元素可能只是顺序调换。。
原理：
优先用 key 匹配相同元素（key 必须稳定！）；
发现顺序变化时复用元素，只移动位置而非重新创建。
示例：示例：同一书架更新
原书架：[书A, 书B, 书C]
新书架：[书D, 书A, 书B, 书C]
Vue 的操作：发现书A/B/C 存在 → 头部插入书D，其他元素不动（高效复用）

<!-- Vue 示例：使用唯一 key 优化 -->
<div v-for="book in books" :key="book.id">{{ book.title }}</div> <!-- ✅ 正确的 key -->

const BookList = React.memo(({ books }) => { /* ... */ }); // 仅当 books 变化时渲染

2>.避免随机 key：索引作为 key 会导致元素无法复用。

// ✅ 正确做法：用唯一 id 作为 key
{books.map(book => <div key={book.id}>{book.title}</div>)}

3>.useCallback / useMemo：缓存函数或计算结果。

const handleUpdate = useCallback(() => { /* ... */ }, [deps]); // 避免函数重复创建

<!-- ✅ 用 id 作为 key -->
<div v-for="book in books" :key="book.id">{{ book.title }}</div>

2>.合理使用 key：与 React 类似，用唯一标识复用元素。

computed: {
  filteredBooks() { // 自动缓存，依赖不变时不重新计算
    return this.books.filter(book => book.price > 50);
  }
}

3>.组件拆分：利用 Vue 的细粒度响应式更新。

<!-- 子组件只依赖部分数据，父组件更新不会触发子组件渲染 -->
<ChildComponent :book="currentBook" />

在这里插入图片描述

const filteredBooks = useMemo(
 () => books.filter(book => book.title.includes(inputText)),
 [books, inputText]
);

computed: {
 filteredBooks() {
   return this.books.filter(book => book.title.includes(this.inputText));
 }
}