子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 列表渲染 ​

key 的作用 ​

在 React 中，我们可以使用 JavaScript 的 map() 方法来创建列表。但是，当我们在渲染列表时，React 需要为每个元素提供一个唯一的 key。这个 key 可以帮助 React 识别哪些元素发生了变化，从而优化渲染过程。

以下是一个使用 map() 方法和 key 属性创建数字列表的例子：

javascript
// 案例: 1. MyList
function MyList() {
  const listItems = ["hello", "world"].map((item, index) => (
    <li key={index}>{item}</li>
  ));
  return <ul>{listItems}</ul>;
}
ReactDOM.render(<MyList />, document.getElementById("app1"));

在这个例子中，我们使用数字的字符串形式作为 key。这是因为在 JavaScript 中，数字类型的 key 可能会被误解为索引，导致意外的行为。

当元素没有确定的 id 时，我们可以使用它的序列号索引作为 key。但是，如果列表可以重新排序，我们不建议使用索引作为 key，因为这会导致渲染变得很慢。

javascript
const todoItems = todos.map((todo, index) => <li key={index}>{todo.text}</li>);

组件中的 key ​

注意，元素的 key 只有在它和它的兄弟节点对比时才有意义。因此，如果我们提取出一个 ListItem 组件，我们应该把 key 保存在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。

javascript
// 案例: 2. MyList
function ListItem(props) {
  return <li>{props.value}</li>;
}
function MyList(props) {
  const listItems = props.list.map((item, index) => (
    <ListItem key={index} value={item} />
  ));
  return <ul>{listItems}</ul>;
}
ReactDOM.render(
  <MyList list={["hello", "world"]} />,
  document.getElementById("app2")
);

最后，需要注意的是，key 会作为给 React 的提示，但不会传递给你的组件。如果您的组件中需要使用和 key 相同的值，请将其作为属性传递。

代码与演示 ​

全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-jsx</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1. MyList
        function MyList() {
          const listItems = ["hello", "world"].map((item, index) => (
            <li key={index}>{item}</li>
          ));
          return <ul>{listItems}</ul>;
        }
        ReactDOM.render(<MyList />, document.getElementById("app1"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. MyList
        function ListItem(props) {
          return <li>{props.value}</li>;
        }
        function MyList(props) {
          const listItems = props.list.map((item, index) => (
            <ListItem key={index} value={item} />
          ));
          return <ul>{listItems}</ul>;
        }
        ReactDOM.render(
          <MyList list={["hello", "world"]} />,
          document.getElementById("app2")
        );
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




test-react-list.html 资源加载中...