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

React组件的列表渲染与优化

2022-06-086.8k 阅读

React 组件的列表渲染基础

在 React 应用开发中，列表渲染是非常常见的需求。例如，展示用户列表、商品列表等。React 提供了简洁且高效的方式来处理列表渲染，主要通过 map 方法来实现。

使用 map 方法进行列表渲染

假设我们有一个简单的数组，数组中的每个元素是一个对象，对象包含 name 和 age 两个属性，我们要在 React 组件中渲染出这些人的信息。

import React from 'react';

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const ListRendering = () => {
  return (
    <ul>
      {people.map(person => (
        <li key={person.name}>
          {person.name} is {person.age} years old.
        </li>
      ))}
    </ul>
  );
};

export default ListRendering;

在上述代码中，我们使用 map 方法遍历 people 数组。map 方法会返回一个新的数组，这个新数组中的每个元素就是我们要渲染的列表项。这里特别要注意的是 key 属性，key 是 React 用于追踪哪些列表项被修改、添加或删除的一个重要属性。在实际应用中，key 应该是列表项中唯一且稳定的值，通常使用数据库中的主键或其他唯一标识符。如果使用索引作为 key，在列表项顺序发生变化或有增删操作时，可能会导致性能问题和一些难以调试的错误。

嵌套列表渲染

有时候我们需要渲染嵌套的列表结构。例如，我们有一个包含多个部门的公司，每个部门又有多个员工。

import React from 'react';

const company = [
  {
    department: 'Engineering',
    employees: [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 }
    ]
  },
  {
    department: 'Marketing',
    employees: [
      { name: 'Charlie', age: 35 },
      { name: 'David', age: 40 }
    ]
  }
];

const NestedListRendering = () => {
  return (
    <div>
      {company.map(department => (
        <div key={department.department}>
          <h3>{department.department}</h3>
          <ul>
            {department.employees.map(employee => (
              <li key={employee.name}>
                {employee.name} is {employee.age} years old.
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default NestedListRendering;

在这段代码中，我们首先使用 map 遍历 company 数组，渲染出每个部门。然后在每个部门内部，又使用 map 遍历该部门的员工列表，从而实现了嵌套列表的渲染。同样，为每层列表项都设置了合适的 key 属性。

React 组件列表渲染的性能问题

虽然 React 的列表渲染机制很方便，但在处理大量数据时，性能问题可能会逐渐显现出来。

频繁的重渲染

假设我们有一个包含大量数据的列表，并且列表所在的组件依赖于一些外部状态。当这些外部状态发生变化时，即使列表数据本身没有改变，整个组件也会重新渲染，这就导致了列表的不必要重渲染。

import React, { useState } from'react';

const largeList = Array.from({ length: 10000 }, (_, i) => ({ id: i, value: `Item ${i}` }));

const ListPerformanceProblem = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <ul>
        {largeList.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
};

export default ListPerformanceProblem;

在上述代码中，当我们点击按钮增加 count 的值时，ListPerformanceProblem 组件会重新渲染，尽管 largeList 并没有发生任何改变。这在大数据量的情况下会严重影响性能。

渲染过多不必要的 DOM 元素

在列表渲染过程中，如果列表项的结构比较复杂，每次重渲染都可能导致 React 重新创建和更新大量的 DOM 元素。例如，一个列表项中包含多个子组件，每个子组件又有自己的状态和逻辑。当列表重渲染时，即使只有部分列表项发生了变化，其他未变化的列表项中的子组件也可能会被不必要地重新渲染。

React 组件列表渲染的优化策略

为了解决上述性能问题，我们可以采用以下几种优化策略。

使用 React.memo 进行组件 memoization

React.memo 是一个高阶组件，它可以对函数式组件进行 memoization。当组件的 props 没有发生变化时，React.memo 会阻止组件重新渲染。

import React from'react';

const ListItem = React.memo(({ item }) => {
  return <li>{item.value}</li>;
});

const OptimizedListRendering = () => {
  const [count, setCount] = useState(0);
  const largeList = Array.from({ length: 10000 }, (_, i) => ({ id: i, value: `Item ${i}` }));

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <ul>
        {largeList.map(item => (
          <ListItem key={item.id} item={item} />
        ))}
      </ul>
    </div>
  );
};

export default OptimizedListRendering;

在这个例子中，ListItem 组件使用了 React.memo。当 count 变化导致 OptimizedListRendering 组件重新渲染时，只要 ListItem 的 item prop 没有变化，ListItem 就不会重新渲染，从而提高了性能。

使用 useCallback 和 useMemo 优化依赖

useCallback 和 useMemo 是 React 提供的两个 hooks，用于优化函数和值的创建。useCallback 可以缓存函数，useMemo 可以缓存值。

import React, { useState, useCallback, useMemo } from'react';

const largeList = Array.from({ length: 10000 }, (_, i) => ({ id: i, value: `Item ${i}` }));

const OptimizedListWithHooks = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const renderedList = useMemo(() => {
    return largeList.map(item => (
      <li key={item.id}>{item.value}</li>
    ));
  }, [largeList]);

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <ul>
        {renderedList}
      </ul>
    </div>
  );
};

export default OptimizedListWithHooks;

在这段代码中，handleClick 函数使用 useCallback 进行了缓存，只有当 count 变化时才会重新创建。renderedList 使用 useMemo 进行了缓存，只有当 largeList 变化时才会重新生成。这样在 count 变化导致组件重新渲染时，handleClick 函数和 renderedList 不会不必要地重新创建，提高了性能。

虚拟列表技术

对于非常长的列表，即使采用了上述优化策略，性能可能仍然不理想。这时可以考虑使用虚拟列表技术。虚拟列表只渲染当前可见区域内的列表项，而不是渲染整个列表。

我们可以使用一些第三方库来实现虚拟列表，例如 react - virtualized 或 react - window。以 react - virtualized 为例：

import React from'react';
import { List } from'react - virtualized';

const largeList = Array.from({ length: 100000 }, (_, i) => `Item ${i}`);

const rowRenderer = ({ index, key, style }) => {
  return (
    <div key={key} style={style}>
      {largeList[index]}
    </div>
  );
};

const VirtualizedListExample = () => {
  return (
    <List
      height={400}
      rowCount={largeList.length}
      rowHeight={50}
      rowRenderer={rowRenderer}
      width={300}
    />
  );
};

export default VirtualizedListExample;

在上述代码中，react - virtualized 的 List 组件只渲染当前可见区域内的列表项。height 和 width 定义了列表的可视区域大小，rowHeight 定义了每个列表项的高度，rowCount 是列表项的总数，rowRenderer 是用于渲染每个列表项的函数。通过这种方式，无论列表有多长，始终只渲染一小部分列表项，大大提高了性能。

动态列表渲染与优化

在实际应用中，列表往往不是静态的，会涉及到动态添加、删除和更新列表项的操作。

动态添加列表项

当需要动态添加列表项时，我们要注意保持列表渲染的高效性。

import React, { useState } from'react';

const DynamicListAddition = () => {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newItem) {
      setItems([...items, { id: Date.now(), value: newItem }]);
      setNewItem('');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          placeholder="Enter new item"
        />
        <button type="submit">Add Item</button>
      </form>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
};

export default DynamicListAddition;

在这段代码中，我们通过 useState 来管理列表数据 items 和新输入项 newItem。当用户提交表单时，我们使用展开运算符 ... 创建一个新的数组，将新项添加到数组中，然后更新 items 状态。这样做可以确保 React 能够高效地识别列表的变化并进行渲染。

动态删除列表项

删除列表项同样需要注意优化。

import React, { useState } from'react';

const DynamicListDeletion = () => {
  const [items, setItems] = useState([
    { id: 1, value: 'Item 1' },
    { id: 2, value: 'Item 2' },
    { id: 3, value: 'Item 3' }
  ]);

  const handleDelete = (itemId) => {
    setItems(items.filter(item => item.id!== itemId));
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.value}
            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DynamicListDeletion;

这里我们通过 filter 方法创建一个新的数组，排除要删除的列表项，然后更新 items 状态。这种方式使得 React 可以准确地知道哪些列表项被删除，从而进行高效的 DOM 更新。

动态更新列表项

更新列表项时，我们要确保只更新发生变化的部分。

import React, { useState } from'react';

const DynamicListUpdate = () => {
  const [items, setItems] = useState([
    { id: 1, value: 'Item 1' },
    { id: 2, value: 'Item 2' },
    { id: 3, value: 'Item 3' }
  ]);

  const handleUpdate = (itemId, newVal) => {
    setItems(items.map(item =>
      item.id === itemId? { id: item.id, value: newVal } : item
    ));
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <input
              type="text"
              value={item.value}
              onChange={(e) => handleUpdate(item.id, e.target.value)}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DynamicListUpdate;

在这个例子中，当输入框的值发生变化时，我们通过 map 方法创建一个新的数组，对于发生变化的列表项，更新其 value，其他列表项保持不变。这样 React 就能精准地更新 DOM 中发生变化的部分，提高性能。

列表渲染中的错误处理与最佳实践

在列表渲染过程中，可能会遇到各种错误情况，同时也有一些最佳实践可以遵循。

错误处理

当列表数据可能为空或者包含无效数据时，我们需要进行适当的错误处理。

import React from'react';

const ErrorHandlingList = () => {
  const data = null; // 假设这里的数据可能为空

  return (
    <ul>
      {data && data.map(item => (
        <li key={item.id}>{item.value}</li>
      ))}
      {!data && <li>No data available</li>}
    </ul>
  );
};

export default ErrorHandlingList;

在上述代码中，我们使用 && 运算符来确保只有当 data 存在时才进行 map 操作。如果 data 为空，我们渲染一个提示信息。这样可以避免因 data 为空而导致的 map 方法调用错误。

最佳实践

  1. 使用唯一且稳定的 key：如前文所述，key 对于 React 高效识别列表项的变化至关重要。始终使用唯一且稳定的值作为 key，避免使用索引，除非你能确保列表项的顺序不会改变且不会有增删操作。
  2. 合理拆分组件：对于复杂的列表项，将其拆分成多个小组件，并对这些小组件应用 React.memo 进行优化。这样可以减少不必要的重渲染。
  3. 避免在 map 中创建新函数：在 map 方法内部创建新函数会导致每次渲染时都创建新的函数实例，这可能会影响性能。如果需要传递函数给子组件，可以使用 useCallback 进行缓存。

列表渲染与 React 生态系统

React 生态系统中有许多工具和库可以进一步优化列表渲染。

Redux 与列表管理

当应用规模较大时，使用 Redux 来管理列表数据可以带来很多好处。Redux 提供了一个可预测的状态管理模式，使得列表的添加、删除、更新等操作更加可控。

// actions.js
const ADD_ITEM = 'ADD_ITEM';
const DELETE_ITEM = 'DELETE_ITEM';

export const addItem = (item) => ({
  type: ADD_ITEM,
  payload: item
});

export const deleteItem = (itemId) => ({
  type: DELETE_ITEM,
  payload: itemId
});

// reducer.js
const initialState = [];

const listReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return [...state, action.payload];
    case DELETE_ITEM:
      return state.filter(item => item.id!== action.payload);
    default:
      return state;
  }
};

export default listReducer;

// component.js
import React from'react';
import { useDispatch, useSelector } from'react-redux';
import { addItem, deleteItem } from './actions';

const ReduxList = () => {
  const items = useSelector(state => state);
  const dispatch = useDispatch();
  const [newItem, setNewItem] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newItem) {
      dispatch(addItem({ id: Date.now(), value: newItem }));
      setNewItem('');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          placeholder="Enter new item"
        />
        <button type="submit">Add Item</button>
      </form>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.value}
            <button onClick={() => dispatch(deleteItem(item.id))}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ReduxList;

在这个例子中，我们使用 Redux 来管理列表数据。actions 定义了添加和删除列表项的动作，reducer 根据这些动作更新状态。在组件中，通过 useDispatch 和 useSelector hooks 来分发动作和获取状态，实现了对列表的集中式管理。

GraphQL 与列表数据获取

GraphQL 是一种用于 API 的查询语言，它可以让我们更精准地获取列表数据，避免不必要的数据传输。

假设我们有一个 GraphQL 服务器提供用户列表数据：

type User {
  id: ID!
  name: String!
  age: Int!
}

type Query {
  users: [User!]!
}

在 React 应用中，我们可以使用 apollo - client 来获取数据并渲染列表。

import React from'react';
import { ApolloClient, InMemoryCache, useQuery } from '@apollo/client';
import gql from 'graphql-tag';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      age
    }
  }
`;

const GraphQLList = () => {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          {user.name} is {user.age} years old.
        </li>
      ))}
    </ul>
  );
};

export default GraphQLList;

在这段代码中，我们使用 useQuery hook 来执行 GraphQL 查询获取用户列表数据。根据查询结果的 loading 和 error 状态进行相应的处理，然后渲染列表。通过 GraphQL，我们可以只请求需要的字段，减少数据传输量，提高性能。

通过对 React 组件列表渲染的深入了解和各种优化策略的应用，我们可以构建出高效、流畅的前端应用，即使在处理大量数据和动态操作时也能保持良好的用户体验。同时，结合 React 生态系统中的其他工具和技术，可以进一步提升列表渲染的管理和性能优化水平。