Module 02 · Understanding Function Components with Array and DOM Manipulation函数组件、数组与 DOM 操作

Working with Arrays in React Components在 React 组件中操作数组

Coursera ↗

欢迎来到 React 组件中的数组操作 课程！观看完本视频后，你将能够：

定义数组及其在 React 组件中的重要性
描述如何在 React 中声明数组
描述如何遍历数组并在组件中操作
讲解如何在 React 中处理数组

什么是数组？

数组是 JavaScript 中的一种数据结构，用于在单一变量中存储多个值。数组通过将多个元素用逗号分隔并放在方括号 [] 中来定义。

数组的特点

数组可以包含任何数据类型的元素，包括数字、字符串、对象，甚至是其他数组。
在 React 中，数组通常用于管理数据列表，是构建动态和交互式用户界面的基础。

如何在 React 中声明数组？

在 React 中，声明数组有几种常见方式：

使用数组字面量 (Array Literal Notation)：

const seasons = ['autumn', 'spring', 'summer', 'winter'];

该数组包含四个季节名称。
2. 通过 useState 钩子声明数组：

const [items, setItems] = useState(['autumn', 'spring', 'summer', 'winter']);

动态生成数组：根据应用逻辑或接收到的数据构建数组。

如何遍历数组？

遍历数组是 React 组件中常见的任务，尤其是在渲染动态内容或管理数据列表时。以下是几种常用的遍历方法：

map 方法：用于迭代数组中的每个元素，并返回一个新的 React 元素数组。
示例：
```
items.map((item, index) => <li key={index}>{item}</li>);
```
forEach 方法：用于迭代数组中的每个元素，执行回调函数，但不返回新数组。
示例：
```
items.forEach(item => console.log(item));
```
for...of 循环：另一种遍历数组的方法。
示例：
```
for (let item of items) {
  console.log(item);
}
```
使用索引：通过索引来访问数组元素。
示例：
```
const firstItem = items[0];
```

在 React 组件中操作数组

1.数组的声明与渲染

在 React 组件内部，声明一个名为 items 的数组，并初始化四个季节名称：autumn、spring、summer 和 winter。

JSX 渲染

function Seasons() {
  const items = ['autumn', 'spring', 'summer', 'winter'];
  return (
    <div>
      <h1>Season Names</h1>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

映射数组元素：在 ul 元素中，使用 map 方法遍历 items 数组，为每个元素动态生成一个 li 列表项。
key 属性：为每个列表项分配一个唯一的 key，以帮助 React 高效地标识每个元素。

2.动态添加与删除数组项

状态管理：

使用 useState 钩子来管理数组状态。声明两个状态变量：

items：存储季节名称的数组，初始值为 ['autumn', 'spring', 'summer', 'winter']。
inputValue：表示输入框中的值，用于添加新项，初始值为空字符串。

添加项：

通过点击 "Add" 按钮调用 addItem 函数，将当前输入框的值添加到 items 数组中，并重置输入框值。

删除项：

通过点击每个列表项旁边的 "Remove" 按钮，触发 removeItem 函数，创建一个新数组 newItems，通过 splice 方法删除指定索引的项，并更新 items 状态。

function Seasons() {
  const [items, setItems] = useState(['autumn', 'spring', 'summer', 'winter']);
  const [inputValue, setInputValue] = useState('');

  const addItem = () => {
    setItems([...items, inputValue]);
    setInputValue('');
  };

  const removeItem = (index) => {
    const newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  return (
    <div>
      <h1>Seasons</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
      />
      <button onClick={addItem}>Add</button>
    </div>
  );
}

渲染效果：

列表项显示季节名称，并有一个 "Remove" 按钮可删除。
在输入框中输入新季节名称，点击 "Add" 按钮后，该项会被添加到数组并显示在列表中。

3.条件渲染数组内容

通过条件渲染来展示不同的内容。若数组为空，显示一条消息，否则显示数组内容。

示例

function FrontendLanguages() {
  const [items, setItems] = useState(['React', 'Vue', 'Angular']);

  return (
    <div>
      <h1>Front-end Languages</h1>
      {items.length > 0 ? (
        <ul>
          {items.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      ) : (
        <p>No Front-end languages are available</p>
      )}
    </div>
  );
}

条件渲染：如果 items 数组不为空，则渲染一个包含前端语言的 ul 列表；否则，显示 "No Front-end languages are available" 的消息。

总结

在本视频中，你学习了数组的基本概念和在 React 组件中的应用：

数组是存储多个值的数据结构。
常用数组方法：
- map：遍历数组并返回一个新的数组。
- forEach：遍历数组，但不返回新数组。
- push 和 splice：添加或删除数组中的元素。
数组是一个强大的数据结构，可以高效地操作和遍历数据，帮助构建动态和交互式的用户界面。

通过学习这些操作，你可以更灵活地管理 React 组件中的数据列表和数组内容，实现更加复杂的功能。

🎉 继续深入学习，掌握更强大的 React 技巧！ 🚀