渲染列表

我们已经渲染了一些原始变量，接下来我们将渲染项目列表，我们先用示例数据进行实验，然后将其应用于从远程 API 获取数据，定义变量：

const list = [
  {
    title: 'React',
    url: 'https://reactjs.org/',
    author: 'Jordan Walke',
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    objectID: 1,
  },
];

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <label htmlFor="search">Search: </label>
      <input type="text" id="search"/>
    
      <hr/>
      {/*在这里渲染列表*/}
    </div>
  );
}

export default App;

我们使用数组内置的 map() 遍历列表里的每个项目并返回每个项目的 JSX 片段：

举个例子：

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.map(function(number) {
  return number * 2; 
});

console.log(newNumbers);
// [2, 4, 6, 8, 10]

实际应用：

...

function App() {
  return (
    <div>
      ...
    
      <hr />
      <ul>
        {list.map(function (item) {
          return (
            <li key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default App;

通过为每个列表项的元素分配 key 属性，React 可以在列表发生更改（例如重新排序）时识别已修改的项目。

在 React 中，你必须为每个列表项指定一个唯一标识，也就是 key 属性，否则会报错，具体可以查看文档。

提取组件

为了提高项目的扩展性以及可复用性，React 中有几个关键点：

在 React 应用中，每一块 UI 都应该是一个组件
React 组件是常规的 JS 函数，但它们的名字都是以大写字母开头，且返回 JSX 代码

所以我们可以将 App 组件中的这部分职责分解成一个独立的 List 组件：

function List() {
  return (
    <ul>
      {list.map(function (item) {
        return (
          <li key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
          </li>
        );
      })}
    </ul>
  );
}

然后就可以在 App 组件中使用 List 组件了：

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <label htmlFor="search">Search: </label>
      <input type="text" id="search" />
      <hr />
    	
      {/* 创建一个 List 组件实例 */}
      <List />
      {/* 创建另一个 List 组件实例 */}
      <List />
    </div>
  );
}
export default App;

一旦我们定义了组件，我们就可以在 JSX 的任何地方像使用 HTML 元素一样使用它，就像 JS 类的定义一样，你可以根据需要创建任意数量的组件示例。

因为 List 组件在 App 中渲染，我们可以说 App 是一个父组件，每个 List 都是一个子组件。大一点的 React 应用都会有一个组件树，也可以说是组件层次结构。

在组件树中，App 是根组件，它可以有多个子组件，List 也是，如果 App 组件有其他子组件，那这个子组件可以称为 List 组件的兄弟组件。

专栏

因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。

在更新完后会整合为一整篇，感谢关注和点赞！

2022 React 最速上手指南（三）—— 渲染列表 & 提取组件

渲染列表

提取组件

专栏