2.4条件渲染与列表渲染

2.4条件渲染与列表渲染

2.4 React 条件渲染与列表渲染

React 的核心理念之一是声明式地描述 UI。条件渲染和列表渲染是构建动态 UI 的关键技术，它们允许我们根据不同的数据和状态，灵活地控制组件的显示内容。

2.4.1 条件渲染

条件渲染允许我们根据特定条件显示不同的组件或元素。React 提供了几种实现条件渲染的方式：

1. if/else 语句

这是最基础的条件渲染方式，在 JSX 外部使用 if/else 语句来决定渲染哪个组件或元素。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}
function App() {
  return <Greeting isLoggedIn={true} />;
}
​

2. 三元运算符

三元运算符 condition ? trueExpression : falseExpression 是一种简洁的条件渲染方式，适用于简单的条件判断。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <h1>
      {isLoggedIn ? 'Welcome back!' : 'Please sign up.'}
    </h1>
  );
}
function App() {
  return <Greeting isLoggedIn={false} />;
}
​

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

&& 运算符可以用于条件渲染，当条件为真时，渲染后面的表达式；否则，不渲染任何内容。

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
function App() {
  return <Mailbox unreadMessages={messages} />;
}
​

4. 函数组件与条件渲染

可以将条件渲染的逻辑封装在函数组件中，提高代码的可读性和可维护性。

function WarningBanner(props) {
  if (!props.warn) {
    return null; // 不渲染任何内容
  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}
class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }
  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}
function App() {
  return <Page />;
}
​

条件渲染的 Mermaid 图示

2.4.2 列表渲染

列表渲染用于根据数据数组动态地生成一组相似的组件或元素。React 中通常使用 map() 方法来实现列表渲染。

1. 基本列表渲染

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
const numbers = [1, 2, 3, 4, 5];
function App() {
  return <NumberList numbers={numbers} />;
}
​

2. Key 属性

在渲染列表时，每个列表项都需要一个唯一的 key 属性。key 属性帮助 React 识别列表项的变化（添加、删除、移动），从而更高效地更新 DOM。

key 属性的选择：

• 稳定性： key 应该在多次渲染中保持不变。

• 唯一性： key 在同一列表中必须是唯一的。

• 避免使用索引作为 key： 除非列表项的顺序永远不会改变，否则使用索引作为 key 可能会导致性能问题和意外的副作用。

function Todo(props) {
  return (
    <li>{props.text}</li>
  );
}
function TodoList(props) {
  const todos = props.todos;
  const todoListItems = todos.map((todo) =>
    <Todo key={todo.id} text={todo.text} />
  );
  return (
    <ul>{todoListItems}</ul>
  );
}
const todos = [
  {id: 1, text: 'Learn React'},
  {id: 2, text: 'Build a Todo App'},
  {id: 3, text: 'Deploy the App'}
];
function App() {
  return <TodoList todos={todos} />;
}
​

3. 在组件中渲染列表

可以将列表渲染的逻辑封装在组件内部，使代码更清晰。

function List(props) {
    const items = props.items;
    return (
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}
const data = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' }
];
function App() {
    return (
        <div>
            <List items={data} />
        </div>
    );
}
​

4. 复杂列表渲染

当列表项包含复杂的结构时，可以将列表项渲染的逻辑提取到单独的组件中。

function Product(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>Price: ${props.price}</p>
    </div>
  );
}
function ProductList(props) {
  const products = props.products;
  const productListItems = products.map((product) =>
    <Product key={product.id} name={product.name} price={product.price} />
  );
  return (
    <div>
      {productListItems}
    </div>
  );
}
const products = [
  {id: 1, name: 'Laptop', price: 1200},
  {id: 2, name: 'Smartphone', price: 800},
  {id: 3, name: 'Tablet', price: 300}
];
function App() {
  return <ProductList products={products} />;
}
​

列表渲染的 Mermaid 图示

2.4.3 实践案例：动态表格

结合条件渲染和列表渲染，可以创建动态表格组件。

function Table(props) {
  const { data, columns } = props;
  if (!data || data.length === 0) {
    return <p>No data available.</p>; // 条件渲染：没有数据时显示提示信息
  }
  return (
    <table>
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={column.key}>{column.title}</th> // 列表渲染：渲染表头
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <tr key={row.id}>
            {columns.map((column) => (
              <td key={`${row.id}-${column.key}`}>{row[column.key]}</td> // 列表渲染：渲染表格数据
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
const tableData = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
  { id: 3, name: 'Peter Jones', age: 40, city: 'Chicago' },
];
const tableColumns = [
  { key: 'name', title: 'Name' },
  { key: 'age', title: 'Age' },
  { key: 'city', title: 'City' },
];
function App() {
  return <Table data={tableData} columns={tableColumns} />;
}
​

2.4.4 总结

条件渲染和列表渲染是 React 中构建动态 UI 的核心技术。通过灵活运用 if/else 语句、三元运算符、&& 运算符和 map() 方法，可以根据不同的数据和状态，动态地控制组件的显示内容。合理使用 key 属性可以提高列表渲染的性能。掌握这些技术，可以构建出更加灵活、高效的 React 应用。