React 列表 & Keys学习笔记

React是一种用于构建用户界面的JavaScript库。React使得构建大型、高效、可扩展的Web应用程序变得更加容易，而列表和key则是React中非常重要的一部分。

列表

在React中可以使用数组渲染出一个列表，这里提供两种常用方式：

1. map()

map可以遍历数组并将数组的元素转化为JSX元素，从而用于构建出需要的列表。

javascriptCopy Code
const myList = ["apple", "banana", "cherry"];

const listItems = myList.map((item) => 
  <li>{item}</li>
);

return (
  <ul>
    {listItems}
  </ul>
);

2. 遍历数组直接返回JSX元素

这种方式与map类似，只是直接通过遍历数组，并在循环体中返回JSX元素的方式来渲染列表。

javascriptCopy Code
const myList = ["apple", "banana", "cherry"];

return (
  <ul>
    {
      myList.map((item, index) => 
        <li key={index}>{item}</li>
      )
    }
  </ul>
);

Keys

在React中，每个子元素都应该有一个稳定的、不变的标识符，这个标识符称为key。key帮助React跟踪哪些元素发生了变化、增加或删除等。

key必须唯一且不可变，通常使用数组中每个元素的索引作为key。但在某些特殊情况下（例如列表顺序可能发生变化，或者列表中的项可能被删除和添加等），使用索引作为key可能会导致意想不到的错误。

下面演示了在列表中使用key的例子：

javascriptCopy Code
const myList = ["apple", "banana", "cherry"];

return (
  <ul>
    {
      myList.map((item, index) => 
        <li key={index}>{item}</li>
      )
    }
  </ul>
);

在上述例子中，我们将每个列表项的索引作为key，这是不推荐的方式。更好的实践是，如果可能的话，每个列表项都应该有一个可靠且独一无二的标识符，例如一个ID。

实例

下面是一个使用React创建待办事项列表的例子：

javascriptCopy Code
import React from 'react';

class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      text: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h2>Todo List</h2>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <br />
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
        <TodoItems items={this.state.items} />
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoItems extends React.Component {
  render() {
    return (
      <ul>
        {
          this.props.items.map(item => (
            <li key={item.id}>{item.text}</li>
          ))
        }
      </ul>
    );
  }
}

export default TodoList;

在这个例子中，我们创建了一个TodoList组件，其中包含一个表单和一个TodoItems组件。在表单中，我们使用handleChange方法来更新组件的状态。当用户提交表单时，我们将新项添加到items数组中，并将文本输入字段重置为初始状态。最后，我们将items数组传递给TodoItems组件，将其渲染为待办事项列表。

在实例中，我们使用了map函数来将items数组转换为一个列表。每个列表项都有一个唯一的key，例如item.id。这确保了React可以正确地识别每个列表项，并进行必要的更改。