React：高效渲染列表

React JS 由 Facebook 创建，是目前最流行的用于构建用户界面的 JavaScript 库。我们可以使用 React 构建简洁、快速的单页应用程序或网站。在本文中，我将探讨在 React 中高效渲染列表的关键，并展示正确渲染列表如何成为 React 保持超快性能的主要保障。

更新 DOM 通常是影响网页性能的主要瓶颈之一，尤其是在使用大量 CSS 特效和动画时。如果页面需要渲染大量数据，为了跟上所有渲染进度，性能会受到相当大的影响。通常情况下，当页面上的某个元素被编辑时，整个页面都会更新，甚至渲染那些实际上并未移动或更改的内容。React 的主要目标之一就是解决这个问题，而这一切都始于 React 虚拟 DOM：一个保存在内存中的 DOM。React 会将所有内容渲染到虚拟 DOM 中，然后将其与实际 DOM 进行比较，最后只渲染已更改的内容来更新实际 DOM。

将元素渲染到虚拟 DOM 非常简单。首先，调用 ReactDOM 对象的 render 方法，该方法接受两个参数。第一个参数是要渲染到页面上的元素，第二个参数是要将元素渲染到的位置。

const name = 'Ryan Moragas';

const nameElement = <h1>Hello, {name}</h1>;

ReactDOM.render(nameElement, document.getElementById('title');

上面展示了 React JS 的基本语法。你可以使用 JSX，它是一种 JavaScript/HTML 混合体，非常容易学习。你可以直接在 JavaScript 代码中创建 HTML 布局，任何需要在 JavaScript 中执行的内容都放在花括号内。很简单，对吧？在 React 中动态渲染列表也非常简单。

const SimpleList = () => (
  <ul>
    {[3, 2, 1].map(num => <li key={index}>{num}</li>;)}
  </ul>
);

在上面的代码片段中，我创建了一个数组，我们将用它来渲染列表。我们将列表包裹在无序列表标签中，然后在花括号中使用原生的 map 方法遍历列表，并为每个值创建一个 JSX 元素。在这个例子中，你可以看到我们给每个列表项都赋予了一个键，键值就是列表项本身，这在 React 中渲染列表时至关重要。框架会使用每个元素的键值来判断该项是否需要重新渲染。

假设我们编写了一些代码来渲染上面列出的列表，并添加了一个点击按钮，每次点击该按钮都会动态地增加一个数字。为了便于举例，假设代码中每个元素的键都设置为该元素的索引。

在上面的例子中，点击按钮会将元素添加到数组中，并且该值会动态渲染到页面上。问题在于，每次向数组添加元素时，其索引都会改变，而 React 会在每次添加新元素时都重新渲染整个页面。以上示例展示了在为待渲染元素分配键时应该避免的做法。你应该始终使用页面上其他元素都不拥有的唯一 ID 键。这有助于减少应用程序的渲染次数，并使 React 能够以尽可能高效的方式渲染列表项。

在上面重构后的代码中，我们将键值直接设置为数字本身，确保键值一旦创建就不会被更改。可以看到，这解决了渲染问题，现在应用中只会渲染新添加的项。总之，你应该将所有 JavaScript 代码都放在花括号中，使用原生 JavaScript 方法动态渲染项以节省时间，并且始终为要渲染的项使用唯一的键值。