MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 列表中条件渲染的应用

2022-04-121.6k 阅读

React 列表中条件渲染的概念

在 React 前端开发中，条件渲染是一种根据特定条件来决定是否渲染某些组件或元素的技术。而当涉及到列表时，条件渲染变得尤为重要。想象一下，我们有一个用户列表，可能需要根据用户的某些属性（比如是否为管理员）来决定在列表中是否显示特定的操作按钮。

在 React 中，列表通常是通过数组映射（.map() 方法）来生成的。条件渲染则可以在这个映射过程中，基于每个列表项的属性或者全局的某些条件，决定是否渲染特定的子组件。

基本的条件渲染语法

在 React 中，有几种常见的条件渲染方式。最直接的就是使用 JavaScript 的 if 语句。例如，我们有一个简单的组件，根据一个布尔值来决定是否渲染一个段落：

import React from'react';

function ConditionalComponent() {
  const isVisible = true;
  let content;
  if (isVisible) {
    content = <p>This is a visible paragraph.</p>;
  }
  return <div>{content}</div>;
}

export default ConditionalComponent;

在这个例子中，isVisible 为 true 时，段落会被渲染。如果 isVisible 为 false，content 会是 undefined，也就不会有段落显示。

另一种常用的方式是使用三元运算符。继续上面的例子，用三元运算符改写如下：

import React from'react';

function ConditionalComponent() {
  const isVisible = true;
  const content = isVisible? <p>This is a visible paragraph.</p> : null;
  return <div>{content}</div>;
}

export default ConditionalComponent;

这里，三元运算符根据 isVisible 的值，决定是返回段落还是 null。null 在 React 中表示不渲染任何内容。

在列表中使用条件渲染

假设我们有一个用户列表，每个用户对象包含 name 和 isAdmin 属性。我们想在列表中为管理员用户显示一个 “删除用户” 按钮，而非管理员用户则不显示。

首先，定义用户数据：

const users = [
  { name: 'Alice', isAdmin: true },
  { name: 'Bob', isAdmin: false },
  { name: 'Charlie', isAdmin: true }
];

然后，在组件中进行列表渲染并条件渲染按钮：

import React from'react';

function UserList() {
  const users = [
    { name: 'Alice', isAdmin: true },
    { name: 'Bob', isAdmin: false },
    { name: 'Charlie', isAdmin: true }
  ];

  const userElements = users.map(user => (
    <li key={user.name}>
      {user.name}
      {user.isAdmin && <button>Delete User</button>}
    </li>
  ));

  return <ul>{userElements}</ul>;
}

export default UserList;

在这个例子中，users.map() 方法遍历 users 数组，为每个用户生成一个列表项。在列表项中，通过 user.isAdmin && <button>Delete User</button> 进行条件渲染。如果 user.isAdmin 为 true，逻辑与运算符（&&）会返回按钮组件，从而渲染按钮；如果为 false，则返回 false，React 不会渲染 false，也就不会显示按钮。

基于多个条件的列表条件渲染

有时候，我们的条件渲染可能依赖多个条件。比如，我们不仅要判断用户是否为管理员，还要判断用户是否处于活动状态（假设用户对象有 isActive 属性），才显示 “删除用户” 按钮。

import React from'react';

function UserList() {
  const users = [
    { name: 'Alice', isAdmin: true, isActive: true },
    { name: 'Bob', isAdmin: false, isActive: true },
    { name: 'Charlie', isAdmin: true, isActive: false }
  ];

  const userElements = users.map(user => (
    <li key={user.name}>
      {user.name}
      {user.isAdmin && user.isActive && <button>Delete User</button>}
    </li>
  ));

  return <ul>{userElements}</ul>;
}

export default UserList;

在这个更新后的代码中，只有当 user.isAdmin 和 user.isActive 都为 true 时，才会渲染 “删除用户” 按钮。

条件渲染复杂组件

上述例子中条件渲染的是简单的按钮组件。在实际项目中，可能需要渲染更复杂的组件。假设我们有一个 AdminActions 组件，它接收用户对象作为属性，并根据用户的权限执行不同的操作。

import React from'react';

function AdminActions({ user }) {
  return (
    <div>
      <button onClick={() => console.log(`Promote ${user.name}`)}>Promote</button>
      <button onClick={() => console.log(`Demote ${user.name}`)}>Demote</button>
    </div>
  );
}

function UserList() {
  const users = [
    { name: 'Alice', isAdmin: true },
    { name: 'Bob', isAdmin: false },
    { name: 'Charlie', isAdmin: true }
  ];

  const userElements = users.map(user => (
    <li key={user.name}>
      {user.name}
      {user.isAdmin && <AdminActions user={user} />}
    </li>
  ));

  return <ul>{userElements}</ul>;
}

export default UserList;

这里，当 user.isAdmin 为 true 时，会渲染 AdminActions 组件，并将 user 对象传递给它作为属性。AdminActions 组件内部可以根据接收到的 user 对象执行不同的操作。

条件渲染与列表样式

除了渲染组件，条件渲染还可以用于控制列表项的样式。比如，我们可以根据用户的状态（活跃或非活跃）来为列表项添加不同的背景颜色。

import React from'react';

function UserList() {
  const users = [
    { name: 'Alice', isActive: true },
    { name: 'Bob', isActive: false },
    { name: 'Charlie', isActive: true }
  ];

  const userElements = users.map(user => {
    const listItemStyle = {
      backgroundColor: user.isActive? 'lightgreen' : 'lightcoral'
    };
    return (
      <li key={user.name} style={listItemStyle}>
        {user.name}
      </li>
    );
  });

  return <ul>{userElements}</ul>;
}

export default UserList;

在这个例子中，通过 map 方法遍历用户列表，根据 user.isActive 的值为每个列表项生成不同的 backgroundColor 样式。活跃用户的列表项背景色为淡绿色，非活跃用户的列表项背景色为淡珊瑚色。

条件渲染在嵌套列表中的应用

当我们的列表结构较为复杂，存在嵌套列表时，条件渲染同样适用。例如，我们有一个部门列表，每个部门包含员工列表，并且只有特定部门（假设是 HR 部门）的员工列表中才显示员工的薪资信息。

import React from'react';

const departments = [
  {
    name: 'HR',
    employees: [
      { name: 'Eve', salary: 5000 },
      { name: 'Frank', salary: 6000 }
    ]
  },
  {
    name: 'Engineering',
    employees: [
      { name: 'Grace', salary: 7000 },
      { name: 'Hank', salary: 8000 }
    ]
  }
];

function EmployeeList({ employees }) {
  const employeeElements = employees.map(employee => (
    <li key={employee.name}>
      {employee.name}
      {employee.salary && <span> - Salary: {employee.salary}</span>}
    </li>
  ));
  return <ul>{employeeElements}</ul>;
}

function DepartmentList() {
  const departmentElements = departments.map(department => (
    <li key={department.name}>
      {department.name}
      {department.name === 'HR' && <EmployeeList employees={department.employees} />}
    </li>
  ));
  return <ul>{departmentElements}</ul>;
}

export default DepartmentList;

在这个代码中，外层 DepartmentList 组件通过 map 遍历部门列表。当部门名称为 HR 时，会渲染 EmployeeList 组件来显示该部门的员工列表。EmployeeList 组件又通过 map 遍历员工列表，并根据员工对象是否有 salary 属性来决定是否显示薪资信息。

条件渲染与性能优化

在列表中进行条件渲染时，性能是一个需要考虑的因素。如果列表很大，频繁的条件渲染可能会导致不必要的重渲染，影响应用的性能。

React 提供了 React.memo 来帮助优化。React.memo 是一个高阶组件，它会对函数组件进行浅比较，如果组件的 props 没有变化，就不会重新渲染组件。

例如，我们优化之前的 AdminActions 组件：

import React from'react';

const AdminActions = React.memo(({ user }) => {
  return (
    <div>
      <button onClick={() => console.log(`Promote ${user.name}`)}>Promote</button>
      <button onClick={() => console.log(`Demote ${user.name}`)}>Demote</button>
    </div>
  );
});

function UserList() {
  const users = [
    { name: 'Alice', isAdmin: true },
    { name: 'Bob', isAdmin: false },
    { name: 'Charlie', isAdmin: true }
  ];

  const userElements = users.map(user => (
    <li key={user.name}>
      {user.name}
      {user.isAdmin && <AdminActions user={user} />}
    </li>
  ));

  return <ul>{userElements}</ul>;
}

export default UserList;

在这个例子中，AdminActions 组件被 React.memo 包裹。当 UserList 组件重新渲染时，如果传递给 AdminActions 的 user 属性没有变化，AdminActions 组件就不会重新渲染，从而提高性能。

条件渲染在动态列表中的应用

动态列表是指列表的内容可以根据用户操作或其他事件动态改变。在这种情况下，条件渲染同样起着关键作用。

假设我们有一个待办事项列表，用户可以标记事项为已完成。当事项被标记为已完成时，我们希望在列表中显示一个 “已完成” 的标识，并且可以选择隐藏已完成的事项。

import React, { useState } from'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build a project', completed: false }
  ]);
  const [showCompleted, setShowCompleted] = useState(false);

  const handleToggle = (todoId) => {
    setTodos(todos.map(todo =>
      todo.id === todoId? { ...todo, completed:!todo.completed } : todo
    ));
  };

  const handleShowCompleted = () => {
    setShowCompleted(!showCompleted);
  };

  const filteredTodos = showCompleted? todos : todos.filter(todo =>!todo.completed);

  const todoElements = filteredTodos.map(todo => (
    <li key={todo.id}>
      {todo.text}
      {todo.completed && <span> - Completed</span>}
      <input type="checkbox" checked={todo.completed} onChange={() => handleToggle(todo.id)} />
    </li>
  ));

  return (
    <div>
      <ul>{todoElements}</ul>
      <input type="checkbox" onChange={handleShowCompleted} /> Show Completed
    </div>
  );
}

export default TodoList;

在这个代码中，todos 是待办事项列表的状态，showCompleted 用于控制是否显示已完成的事项。handleToggle 函数用于切换事项的完成状态，handleShowCompleted 函数用于切换是否显示已完成事项的开关。通过 filteredTodos 数组，根据 showCompleted 的值来过滤待办事项列表。在列表渲染中，通过 todo.completed && <span> - Completed</span> 来条件渲染 “已完成” 的标识。

条件渲染在 React 表单中的应用

在 React 表单中，条件渲染可以用于根据用户的输入来显示不同的表单字段。例如，我们有一个注册表单，当用户选择 “个人” 注册类型时，显示姓名和邮箱字段；当选择 “企业” 注册类型时，显示企业名称、联系人姓名和邮箱字段。

import React, { useState } from'react';

function RegistrationForm() {
  const [registrationType, setRegistrationType] = useState('personal');

  const handleTypeChange = (e) => {
    setRegistrationType(e.target.value);
  };

  let formFields;
  if (registrationType === 'personal') {
    formFields = (
      <div>
        <label>Name:</label>
        <input type="text" />
        <label>Email:</label>
        <input type="email" />
      </div>
    );
  } else {
    formFields = (
      <div>
        <label>Company Name:</label>
        <input type="text" />
        <label>Contact Name:</label>
        <input type="text" />
        <label>Email:</label>
        <input type="email" />
      </div>
    );
  }

  return (
    <form>
      <label>Registration Type:</label>
      <select onChange={handleTypeChange}>
        <option value="personal">Personal</option>
        <option value="business">Business</option>
      </select>
      {formFields}
      <input type="submit" value="Register" />
    </form>
  );
}

export default RegistrationForm;

在这个例子中，registrationType 状态用于存储用户选择的注册类型。handleTypeChange 函数在用户选择改变时更新 registrationType。通过 if - else 语句，根据 registrationType 的值来决定渲染不同的表单字段。

条件渲染与 React Router

在使用 React Router 进行路由管理的应用中，条件渲染也非常有用。例如，我们可能希望在特定路由下显示某些组件，而在其他路由下不显示。

假设我们有一个导航栏组件，在用户登录后，导航栏会显示 “注销” 按钮，而在登录页面不需要显示。

import React from'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from'react-router-dom';
import LoginPage from './LoginPage';
import HomePage from './HomePage';
import Navbar from './Navbar';

function App() {
  const isLoggedIn = true; // 假设用户已登录

  return (
    <Router>
      <Navbar isLoggedIn={isLoggedIn} />
      <Routes>
        <Route path="/login" element={!isLoggedIn? <LoginPage /> : <Navigate to="/home" />} />
        <Route path="/home" element={isLoggedIn? <HomePage /> : <Navigate to="/login" />} />
      </Routes>
    </Router>
  );
}

export default App;

在 Navbar 组件中，可以根据 isLoggedIn 属性来条件渲染 “注销” 按钮：

import React from'react';

function Navbar({ isLoggedIn }) {
  return (
    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        {isLoggedIn && <li><a href="/logout">Logout</a></li>}
      </ul>
    </nav>
  );
}

export default Navbar;

在这个例子中，App 组件通过 isLoggedIn 变量控制不同路由下的组件渲染以及 Navbar 组件中 “注销” 按钮的显示。如果用户已登录，/login 路由会重定向到 /home，/home 路由会显示 HomePage；如果用户未登录，/home 路由会重定向到 /login，/login 路由会显示 LoginPage。同时，Navbar 组件根据 isLoggedIn 决定是否渲染 “注销” 按钮。

条件渲染在 React 与 Redux 结合中的应用

当 React 与 Redux 结合使用时，条件渲染可以基于 Redux store 中的状态来进行。假设我们有一个电商应用，Redux store 中存储了用户的购物车信息以及用户是否为会员的状态。我们希望在购物车页面，如果用户是会员，显示一个会员专享折扣信息。

首先，定义 Redux actions 和 reducers：

// actions.js
const SET_USER_INFO ='SET_USER_INFO';

export const setUserInfo = (userInfo) => ({
  type: SET_USER_INFO,
  payload: userInfo
});

// reducers.js
const initialState = {
  userInfo: null
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_USER_INFO:
      return {
      ...state,
        userInfo: action.payload
      };
    default:
      return state;
  }
};

export default userReducer;

然后，在 React 组件中使用 Redux 状态进行条件渲染：

import React from'react';
import { useSelector } from'react-redux';

function CartPage() {
  const userInfo = useSelector(state => state.userInfo);

  return (
    <div>
      <h1>Cart Page</h1>
      {userInfo && userInfo.isMember && <p>You have a member - only discount!</p>}
      {/* 购物车其他内容 */}
    </div>
  );
}

export default CartPage;

在这个例子中，CartPage 组件通过 useSelector 从 Redux store 中获取 userInfo 状态。然后，根据 userInfo 是否存在以及 userInfo.isMember 的值来条件渲染会员专享折扣信息。

条件渲染在 React 与 GraphQL 结合中的应用

当 React 与 GraphQL 结合时，我们可以根据 GraphQL 查询的结果进行条件渲染。假设我们有一个博客应用，通过 GraphQL 查询获取文章列表，并且文章有一个属性表示是否为特色文章。我们希望在文章列表中，为特色文章添加一个特殊的标识。

首先，定义 GraphQL 查询：

query GetArticles {
  articles {
    id
    title
    isFeatured
    content
  }
}

然后，在 React 组件中使用 Apollo Client 进行查询并条件渲染：

import React from'react';
import { useQuery } from '@apollo/client';
import { GET_ARTICLES } from './queries';

function ArticleList() {
  const { loading, error, data } = useQuery(GET_ARTICLES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const articleElements = data.articles.map(article => (
    <li key={article.id}>
      {article.title}
      {article.isFeatured && <span> - Featured</span>}
      <p>{article.content}</p>
    </li>
  ));

  return <ul>{articleElements}</ul>;
}

export default ArticleList;

在这个例子中，useQuery 执行 GraphQL 查询并返回查询状态（loading、error 和 data）。当查询完成且没有错误时，通过 map 方法遍历文章列表，并根据 article.isFeatured 的值来条件渲染 “Featured” 标识。

条件渲染的常见问题及解决方法

  1. 不必要的重渲染：如前文所述，频繁的条件渲染可能导致不必要的重渲染。可以使用 React.memo 对函数组件进行优化，减少不必要的渲染。同时，合理使用 shouldComponentUpdate（对于类组件）或 useMemo、useCallback（对于函数组件）来控制组件的更新。
  2. 复杂条件逻辑混乱：当条件逻辑变得复杂时，代码可能变得难以维护。可以将复杂的条件逻辑提取到单独的函数中，提高代码的可读性和可维护性。例如：
import React from'react';

function shouldShowButton(user) {
  return user.isAdmin && user.isActive && user.hasPermission;
}

function UserList() {
  const users = [
    { name: 'Alice', isAdmin: true, isActive: true, hasPermission: true },
    { name: 'Bob', isAdmin: false, isActive: true, hasPermission: false }
  ];

  const userElements = users.map(user => (
    <li key={user.name}>
      {user.name}
      {shouldShowButton(user) && <button>Special Action</button>}
    </li>
  ));

  return <ul>{userElements}</ul>;
}

export default UserList;
  1. 条件渲染与样式冲突：在条件渲染组件并设置样式时，可能会出现样式冲突的问题。可以使用 CSS Modules 或 styled - components 等方式来更好地管理样式，避免冲突。例如，使用 styled - components：
import React from'react';
import styled from'styled - components';

const ActiveListItem = styled.li`
  background - color: lightgreen;
`;

const InactiveListItem = styled.li`
  background - color: lightcoral;
`;

function UserList() {
  const users = [
    { name: 'Alice', isActive: true },
    { name: 'Bob', isActive: false }
  ];

  const userElements = users.map(user => (
    {user.isActive? <ActiveListItem key={user.name}>{user.name}</ActiveListItem> : <InactiveListItem key={user.name}>{user.name}</InactiveListItem>}
  ));

  return <ul>{userElements}</ul>;
}

export default UserList;

通过这种方式，不同条件下的列表项样式可以更清晰地管理。

  1. 条件渲染在生命周期中的问题：在类组件的生命周期方法中进行条件渲染时，要注意生命周期的执行顺序。例如，在 componentDidMount 中进行条件渲染相关的操作，确保 DOM 已经挂载完成。同时，在 componentDidUpdate 中，要正确处理由于条件变化导致的组件更新，避免无限循环更新。

总结

React 列表中的条件渲染是前端开发中非常重要的技术，它允许我们根据不同的条件灵活地渲染组件和元素。无论是简单的布尔条件，还是复杂的多个条件组合，都可以通过合理的代码结构和语法来实现。同时，在性能优化、与其他技术（如 Redux、GraphQL、React Router 等）结合使用时，条件渲染也发挥着关键作用。通过解决常见问题，我们能够更好地利用条件渲染来构建高效、灵活且易于维护的 React 应用程序。在实际开发中，不断实践和总结经验，将有助于我们更熟练地运用这一技术，提升应用的质量和用户体验。