TheOdinProject React教程：JSX渲染技术与条件渲染详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01128/article/details/148416114

TheOdinProject React教程：JSX渲染技术与条件渲染详解

curriculum TheOdinProject/curriculum: The Odin Project 是一个免费的在线编程学习平台，这个仓库是其课程大纲和教材资源库，涵盖了Web开发相关的多种技术栈，如HTML、CSS、JavaScript以及Ruby on Rails等。项目地址: https://gitcode.com/gh_mirrors/cu/curriculum

前言

在React开发中，JSX的渲染技术是构建用户界面的核心技能。本文将深入探讨如何在React中高效地渲染列表元素以及实现灵活的条件渲染逻辑，这些技术对于构建动态Web应用至关重要。

列表渲染技术

基础列表渲染

在React中，我们经常需要渲染一组相似的元素。假设我们要展示一个动物列表：

function App() {
  return (
    <div>
      <h1>Animals: </h1>
      <ul>
        <li>Lion</li>
        <li>Cow</li>
        <li>Snake</li>
        <li>Lizard</li>
      </ul>
    </div>
  );
}

虽然这种方式可行，但当数据量增大时，手动编写每个列表项会变得非常繁琐。更专业的做法是使用JavaScript数组的map方法：

function App() {
  const animals = ["Lion", "Cow", "Snake", "Lizard"];

  return (
    <div>
      <h1>Animals: </h1>
      <ul>
        {animals.map((animal) => {
          return <li key={animal}>{animal}</li>;
        })}
      </ul>
    </div>
  );
}

关键点解析

key属性：每个列表项需要一个唯一的key属性，帮助React识别哪些元素发生了变化。对于静态列表，可以直接使用数据值作为key，但在动态列表中应使用更稳定的标识符。
数组自动渲染：JSX能够自动渲染数组元素，因此我们可以将映射结果存储在变量中：

const animalsList = animals.map((animal) => <li key={animal}>{animal}</li>);

然后在JSX中直接使用这个变量：{animalsList}。

组件化列表渲染

为了更好的代码组织和复用性，我们可以将列表渲染逻辑封装成组件：

function ListItem({ animal }) {
  return <li>{animal}</li>;
}

function List({ animals }) {
  return (
    <ul>
      {animals.map((animal) => (
        <ListItem key={animal} animal={animal} />
      ))}
    </ul>
  );
}

这种组件化方式使得代码更加模块化，每个组件都有明确的职责，便于维护和测试。

条件渲染技术

条件渲染是React中控制UI显示逻辑的重要手段，以下是几种常见的实现方式：

1. 三元运算符

function List({ animals }) {
  return (
    <ul>
      {animals.map((animal) => 
        animal.startsWith("L") ? <li key={animal}>{animal}</li> : null
      )}
    </ul>
  );
}

三元运算符适合简单的二元条件判断，语法简洁明了。

2. 逻辑与(&&)运算符

function List({ animals }) {
  return (
    <ul>
      {animals.map((animal) => 
        animal.startsWith("L") && <li key={animal}>{animal}</li>
      )}
    </ul>
  );
}

&&运算符在条件为真时返回右侧元素，否则不渲染任何内容。注意不要将数字放在左侧，可能导致意外渲染。

3. 条件语句渲染

对于更复杂的条件逻辑，可以使用传统的if/else语句：

function List({ animals }) {
  if (!animals) return <div>Loading...</div>;
  if (animals.length === 0) return <div>No animals found</div>;
  
  return (
    <ul>
      {animals.map((animal) => (
        <li key={animal}>{animal}</li>
      ))}
    </ul>
  );
}

这种方式特别适合处理数据加载状态和空状态，提升用户体验。

4. 立即执行函数(IIFE)

对于复杂条件逻辑，可以使用IIFE封装：

function List({ animals }) {
  return (
    <>
      {(() => {
        if (!animals) return <div>Loading...</div>;
        if (animals.length === 0) return <div>No animals found</div>;
        return (
          <ul>
            {animals.map((animal) => (
              <li key={animal}>{animal}</li>
            ))}
          </ul>
        );
      })()}
    </>
  );
}