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

React 列表组件的封装与复用

2021-04-305.7k 阅读

列表组件在前端开发中的重要性

在现代前端开发中，列表展示是极为常见的需求。无论是社交媒体平台上的动态列表、电商网站的商品列表，还是项目管理工具中的任务列表等，列表组件都无处不在。一个良好设计的列表组件不仅能高效地展示数据，还能提升用户体验，确保页面性能流畅。

在 React 框架下，利用其组件化的特性，我们可以将列表相关的逻辑和样式封装成独立的组件，实现高度的复用，提高开发效率和代码的可维护性。

React 列表渲染基础

在 React 中，渲染列表通常使用 JavaScript 的数组方法，最常见的是 map 方法。假设我们有一个简单的数组 items，里面包含一些字符串，想要将它们渲染成一个无序列表：

import React from'react';

const items = ['apple', 'banana', 'cherry'];

function List() {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

export default List;

在这个例子中，我们使用 map 方法遍历 items 数组，并为每个元素创建一个 <li> 元素。注意这里的 key 属性，key 是 React 用于追踪哪些列表项被修改、添加或删除的辅助标识，它在列表渲染中起着至关重要的作用，一般使用数据的唯一标识作为 key。如果数据本身没有唯一标识，使用索引 index 作为 key 是一种退而求其次的方法，但在某些复杂场景下可能会引发问题。

封装简单列表组件

现在我们将上述的列表渲染逻辑封装成一个更通用的组件，使其可以接受不同的数据进行渲染。

import React from'react';

function SimpleList({ data }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

export default SimpleList;

使用这个组件时，可以这样调用：

import React from'react';
import SimpleList from './SimpleList';

const fruits = ['apple', 'banana', 'cherry'];

function App() {
    return (
        <div>
            <SimpleList data={fruits} />
        </div>
    );
}

export default App;

这个 SimpleList 组件已经实现了一定程度的复用，只要传入不同的数组数据，就能渲染出不同内容的列表。但它的局限性也很明显，比如列表项的样式和结构非常单一，无法满足多样化的需求。

增强列表组件的灵活性

为了让列表组件更加灵活，我们可以允许传入一个渲染列表项的函数。这样，使用者可以根据自己的需求自定义列表项的样式和内容。

import React from'react';

function FlexibleList({ data, renderItem }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{renderItem(item)}</li>
            ))}
        </ul>
    );
}

export default FlexibleList;

使用时可以这样：

import React from'react';
import FlexibleList from './FlexibleList';

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

function App() {
    const renderUser = (user) => (
        <div>
            <p>{user.name}</p>
            <p>Age: {user.age}</p>
        </div>
    );

    return (
        <div>
            <FlexibleList data={users} renderItem={renderUser} />
        </div>
    );
}

export default App;

通过这种方式，FlexibleList 组件的适用性大大增强。使用者可以根据具体业务需求，灵活定义列表项的渲染方式。

处理列表项点击等交互

列表组件往往需要处理列表项的交互，比如点击事件。我们可以在组件中添加相应的事件处理逻辑，并通过 props 将事件回调传递给使用者。

import React from'react';

function InteractiveList({ data, renderItem, onItemClick }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index} onClick={() => onItemClick(item)}>
                    {renderItem(item)}
                </li>
            ))}
        </ul>
    );
}

export default InteractiveList;

在使用时：

import React from'react';
import InteractiveList from './InteractiveList';

const tasks = [
    { id: 1, title: 'Complete project', done: false },
    { id: 2, title: 'Buy groceries', done: true }
];

function App() {
    const renderTask = (task) => (
        <div>
            <input type="checkbox" checked={task.done} />
            <span>{task.title}</span>
        </div>
    );

    const handleTaskClick = (task) => {
        console.log(`Clicked on task: ${task.title}`);
    };

    return (
        <div>
            <InteractiveList data={tasks} renderItem={renderTask} onItemClick={handleTaskClick} />
        </div>
    );
}

export default App;

这样，当用户点击列表项时，就会触发 handleTaskClick 函数，执行相应的业务逻辑。

列表组件的样式处理

在 React 中处理列表组件的样式有多种方式，比如使用传统的 CSS 文件、CSS Modules 或者像 styled - components 这样的库。

使用传统 CSS

首先创建一个 CSS 文件，比如 List.css：

ul {
    list - style - type: none;
    padding: 0;
}

li {
    background - color: #f0f0f0;
    padding: 10px;
    margin: 5px;
}

然后在 React 组件中引入这个 CSS 文件：

import React from'react';
import './List.css';

function List({ data, renderItem }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{renderItem(item)}</li>
            ))}
        </ul>
    );
}

export default List;

使用 CSS Modules

CSS Modules 允许你在 React 组件中局部作用域使用 CSS。首先创建一个 List.module.css 文件：

.list {
    list - style - type: none;
    padding: 0;
}

.item {
    background - color: #e0e0e0;
    padding: 10px;
    margin: 5px;
}

在 React 组件中使用：

import React from'react';
import styles from './List.module.css';

function List({ data, renderItem }) {
    return (
        <ul className={styles.list}>
            {data.map((item, index) => (
                <li className={styles.item} key={index}>{renderItem(item)}</li>
            ))}
        </ul>
    );
}

export default List;

使用 styled - components

styled - components 是一个将样式直接写在 JavaScript 中的库。首先安装 styled - components：

npm install styled - components

然后在组件中使用：

import React from'react';
import styled from'styled - components';

const ListUl = styled.ul`
    list - style - type: none;
    padding: 0;
`;

const ListLi = styled.li`
    background - color: #d0d0d0;
    padding: 10px;
    margin: 5px;
`;

function List({ data, renderItem }) {
    return (
        <ListUl>
            {data.map((item, index) => (
                <ListLi key={index}>{renderItem(item)}</ListLi>
            ))}
        </ListUl>
    );
}

export default List;

列表组件的性能优化

当列表数据量较大时，性能问题就会凸显出来。以下是一些常见的性能优化方法。

使用 shouldComponentUpdate 或 React.memo

shouldComponentUpdate 是 React 类组件中的生命周期方法，它允许我们控制组件在 props 或 state 变化时是否重新渲染。对于函数组件，可以使用 React.memo 进行类似的优化。

import React from'react';

function MemoizedList({ data, renderItem }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{renderItem(item)}</li>
            ))}
        </ul>
    );
}

export default React.memo(MemoizedList);

React.memo 会浅比较 props，如果 props 没有变化，组件就不会重新渲染，从而提升性能。

虚拟列表

虚拟列表是一种只渲染可见区域内列表项的技术。当列表数据量巨大时，一次性渲染所有项会导致性能下降和内存占用过高。使用虚拟列表，只有用户当前视口内的列表项会被渲染。

常用的虚拟列表库有 react - virtualized 和 react - window。以 react - window 为例，首先安装：

npm install react - window

然后使用：

import React from'react';
import { FixedSizeList } from'react - window';

const data = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

const renderItem = ({ index, key, style }) => (
    <div key={key} style={style}>
        {data[index]}
    </div>
);

function App() {
    return (
        <FixedSizeList
            height={400}
            itemCount={data.length}
            itemSize={50}
            width={300}
        >
            {renderItem}
        </FixedSizeList>
    );
}

export default App;

在这个例子中，FixedSizeList 组件通过 height、itemCount、itemSize 和 width 属性来计算和渲染可见区域内的列表项，大大提升了性能。

处理列表的动态更新

在实际应用中，列表数据往往是动态变化的，比如添加新项、删除项或者更新项。

添加新项

假设我们有一个待办事项列表，用户可以添加新的任务。

import React, { useState } from'react';
import InteractiveList from './InteractiveList';

const initialTasks = [
    { id: 1, title: 'Complete project', done: false },
    { id: 2, title: 'Buy groceries', done: true }
];

function App() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskTitle, setNewTaskTitle] = useState('');

    const renderTask = (task) => (
        <div>
            <input type="checkbox" checked={task.done} />
            <span>{task.title}</span>
        </div>
    );

    const handleTaskClick = (task) => {
        console.log(`Clicked on task: ${task.title}`);
    };

    const handleNewTaskChange = (e) => {
        setNewTaskTitle(e.target.value);
    };

    const handleAddTask = () => {
        if (newTaskTitle) {
            const newTask = {
                id: tasks.length + 1,
                title: newTaskTitle,
                done: false
            };
            setTasks([...tasks, newTask]);
            setNewTaskTitle('');
        }
    };

    return (
        <div>
            <input
                type="text"
                placeholder="Add new task"
                value={newTaskTitle}
                onChange={handleNewTaskChange}
            />
            <button onClick={handleAddTask}>Add Task</button>
            <InteractiveList data={tasks} renderItem={renderTask} onItemClick={handleTaskClick} />
        </div>
    );
}

export default App;

在这个例子中，我们使用 useState 来管理任务列表和新任务的输入。当用户点击“Add Task”按钮时，新任务会被添加到任务列表中，并且列表会重新渲染。

删除项

同样以任务列表为例，添加删除任务的功能。

import React, { useState } from'react';
import InteractiveList from './InteractiveList';

const initialTasks = [
    { id: 1, title: 'Complete project', done: false },
    { id: 2, title: 'Buy groceries', done: true }
];

function App() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskTitle, setNewTaskTitle] = useState('');

    const renderTask = (task) => (
        <div>
            <input type="checkbox" checked={task.done} />
            <span>{task.title}</span>
            <button onClick={() => handleDeleteTask(task.id)}>Delete</button>
        </div>
    );

    const handleTaskClick = (task) => {
        console.log(`Clicked on task: ${task.title}`);
    };

    const handleNewTaskChange = (e) => {
        setNewTaskTitle(e.target.value);
    };

    const handleAddTask = () => {
        if (newTaskTitle) {
            const newTask = {
                id: tasks.length + 1,
                title: newTaskTitle,
                done: false
            };
            setTasks([...tasks, newTask]);
            setNewTaskTitle('');
        }
    };

    const handleDeleteTask = (taskId) => {
        setTasks(tasks.filter(task => task.id!== taskId));
    };

    return (
        <div>
            <input
                type="text"
                placeholder="Add new task"
                value={newTaskTitle}
                onChange={handleNewTaskChange}
            />
            <button onClick={handleAddTask}>Add Task</button>
            <InteractiveList data={tasks} renderItem={renderTask} onItemClick={handleTaskClick} />
        </div>
    );
}

export default App;

这里通过 filter 方法从任务列表中过滤掉要删除的任务，实现删除功能。

更新项

假设我们要更新任务的完成状态。

import React, { useState } from'react';
import InteractiveList from './InteractiveList';

const initialTasks = [
    { id: 1, title: 'Complete project', done: false },
    { id: 2, title: 'Buy groceries', done: true }
];

function App() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskTitle, setNewTaskTitle] = useState('');

    const renderTask = (task) => (
        <div>
            <input
                type="checkbox"
                checked={task.done}
                onChange={() => handleToggleTask(task.id)}
            />
            <span>{task.title}</span>
        </div>
    );

    const handleTaskClick = (task) => {
        console.log(`Clicked on task: ${task.title}`);
    };

    const handleNewTaskChange = (e) => {
        setNewTaskTitle(e.target.value);
    };

    const handleAddTask = () => {
        if (newTaskTitle) {
            const newTask = {
                id: tasks.length + 1,
                title: newTaskTitle,
                done: false
            };
            setTasks([...tasks, newTask]);
            setNewTaskTitle('');
        }
    };

    const handleToggleTask = (taskId) => {
        setTasks(tasks.map(task =>
            task.id === taskId? { ...task, done:!task.done } : task
        ));
    };

    return (
        <div>
            <input
                type="text"
                placeholder="Add new task"
                value={newTaskTitle}
                onChange={handleNewTaskChange}
            />
            <button onClick={handleAddTask}>Add Task</button>
            <InteractiveList data={tasks} renderItem={renderTask} onItemClick={handleTaskClick} />
        </div>
    );
}

export default App;

在这个例子中，通过 map 方法找到要更新的任务，并更新其 done 属性，实现任务完成状态的切换。

列表组件与数据管理

在大型应用中，列表组件往往需要与数据管理库如 Redux 或 MobX 集成。

与 Redux 集成

首先安装 Redux 相关库：

npm install redux react - redux

假设我们有一个任务列表，使用 Redux 来管理任务数据。

创建 actions.js：

const ADD_TASK = 'ADD_TASK';
const DELETE_TASK = 'DELETE_TASK';
const TOGGLE_TASK = 'TOGGLE_TASK';

export const addTask = (task) => ({
    type: ADD_TASK,
    payload: task
});

export const deleteTask = (taskId) => ({
    type: DELETE_TASK,
    payload: taskId
});

export const toggleTask = (taskId) => ({
    type: TOGGLE_TASK,
    payload: taskId
});

创建 reducer.js：

const initialState = [
    { id: 1, title: 'Complete project', done: false },
    { id: 2, title: 'Buy groceries', done: true }
];

const taskReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TASK:
            return [...state, action.payload];
        case DELETE_TASK:
            return state.filter(task => task.id!== action.payload);
        case TOGGLE_TASK:
            return state.map(task =>
                task.id === action.payload? { ...task, done:!task.done } : task
            );
        default:
            return state;
    }
};

export default taskReducer;

创建 store.js：

import { createStore } from'redux';
import taskReducer from './reducer';

const store = createStore(taskReducer);

export default store;

在 React 组件中使用 Redux：

import React, { useState } from'react';
import { useSelector, useDispatch } from'react - redux';
import { addTask, deleteTask, toggleTask } from './actions';

function App() {
    const tasks = useSelector(state => state);
    const dispatch = useDispatch();
    const [newTaskTitle, setNewTaskTitle] = useState('');

    const renderTask = (task) => (
        <div>
            <input
                type="checkbox"
                checked={task.done}
                onChange={() => dispatch(toggleTask(task.id))}
            />
            <span>{task.title}</span>
            <button onClick={() => dispatch(deleteTask(task.id))}>Delete</button>
        </div>
    );

    const handleNewTaskChange = (e) => {
        setNewTaskTitle(e.target.value);
    };

    const handleAddTask = () => {
        if (newTaskTitle) {
            const newTask = {
                id: tasks.length + 1,
                title: newTaskTitle,
                done: false
            };
            dispatch(addTask(newTask));
            setNewTaskTitle('');
        }
    };

    return (
        <div>
            <input
                type="text"
                placeholder="Add new task"
                value={newTaskTitle}
                onChange={handleNewTaskChange}
            />
            <button onClick={handleAddTask}>Add Task</button>
            {tasks.map((task, index) => (
                <div key={index}>{renderTask(task)}</div>
            ))}
        </div>
    );
}

export default App;

通过 Redux，我们将任务列表的状态管理从组件中分离出来，使代码结构更加清晰，便于维护和扩展。

与 MobX 集成

安装 MobX 相关库：

npm install mobx mobx - react

创建 store.js：

import { makeObservable, observable, action } from'mobx';

class TaskStore {
    tasks = [
        { id: 1, title: 'Complete project', done: false },
        { id: 2, title: 'Buy groceries', done: true }
    ];

    constructor() {
        makeObservable(this, {
            tasks: observable,
            addTask: action,
            deleteTask: action,
            toggleTask: action
        });
    }

    addTask(task) {
        this.tasks.push(task);
    }

    deleteTask(taskId) {
        this.tasks = this.tasks.filter(task => task.id!== taskId);
    }

    toggleTask(taskId) {
        this.tasks.forEach(task => {
            if (task.id === taskId) {
                task.done =!task.done;
            }
        });
    }
}

const taskStore = new TaskStore();

export default taskStore;

在 React 组件中使用 MobX：

import React, { useState } from'react';
import { observer } from'mobx - react';
import taskStore from './store';

function App() {
    const [newTaskTitle, setNewTaskTitle] = useState('');

    const renderTask = (task) => (
        <div>
            <input
                type="checkbox"
                checked={task.done}
                onChange={() => taskStore.toggleTask(task.id)}
            />
            <span>{task.title}</span>
            <button onClick={() => taskStore.deleteTask(task.id)}>Delete</button>
        </div>
    );

    const handleNewTaskChange = (e) => {
        setNewTaskTitle(e.target.value);
    };

    const handleAddTask = () => {
        if (newTaskTitle) {
            const newTask = {
                id: taskStore.tasks.length + 1,
                title: newTaskTitle,
                done: false
            };
            taskStore.addTask(newTask);
            setNewTaskTitle('');
        }
    };

    return (
        <div>
            <input
                type="text"
                placeholder="Add new task"
                value={newTaskTitle}
                onChange={handleNewTaskChange}
            />
            <button onClick={handleAddTask}>Add Task</button>
            {taskStore.tasks.map((task, index) => (
                <div key={index}>{renderTask(task)}</div>
            ))}
        </div>
    );
}

export default observer(App);

MobX 通过 observable 和 action 等概念，提供了一种简洁的状态管理方式，与 React 组件的集成也相对简单。

列表组件的国际化支持

在全球化的应用中，列表组件可能需要支持多语言。以 React - Intl 库为例，首先安装：

npm install react - intl

假设我们有一个任务列表，需要将任务标题翻译成不同语言。

创建 messages.js：

const en = {
    taskTitle: 'Complete project',
    anotherTaskTitle: 'Buy groceries'
};

const zh = {
    taskTitle: '完成项目',
    anotherTaskTitle: '买杂货'
};

export const messages = {
    en,
    zh
};

在 React 组件中使用 React - Intl：

import React, { useState } from'react';
import { IntlProvider, FormattedMessage } from'react - intl';
import messages from './messages';

const initialTasks = [
    { id: 1, titleKey: 'taskTitle', done: false },
    { id: 2, titleKey: 'anotherTaskTitle', done: true }
];

function App() {
    const [tasks, setTasks] = useState(initialTasks);
    const [locale, setLocale] = useState('en');

    const renderTask = (task) => (
        <div>
            <input type="checkbox" checked={task.done} />
            <FormattedMessage id={task.titleKey} />
        </div>
    );

    return (
        <IntlProvider locale={locale} messages={messages[locale]}>
            <div>
                <select onChange={(e) => setLocale(e.target.value)}>
                    <option value="en">English</option>
                    <option value="zh">中文</option>
                </select>
                {tasks.map((task, index) => (
                    <div key={index}>{renderTask(task)}</div>
                ))}
            </div>
        </IntlProvider>
    );
}

export default App;

通过 React - Intl，我们可以根据用户选择的语言，动态地渲染不同语言的列表项内容。

列表组件的可访问性

确保列表组件具有良好的可访问性是非常重要的，这样可以让残障人士也能方便地使用应用。

语义化 HTML

使用正确的语义化 HTML 标签，比如 <ul> 和 <li> 来创建列表，这有助于屏幕阅读器等辅助技术理解页面结构。

键盘导航

确保列表项可以通过键盘进行导航，比如使用 tab 键在列表项之间切换焦点，使用 enter 键触发点击事件等。

import React from'react';

function KeyboardAccessibleList({ data, renderItem }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li
                    key={index}
                    tabIndex={0}
                    onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                            // 模拟点击事件的逻辑
                        }
                    }}
                >
                    {renderItem(item)}
                </li>
            ))}
        </ul>
    );
}

export default KeyboardAccessibleList;

提供描述信息

对于列表项的功能或含义，提供适当的描述信息，以便屏幕阅读器能够向用户传达。可以使用 aria - label 等属性来实现。

import React from'react';

function DescriptiveList({ data, renderItem }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li
                    key={index}
                    aria - label={`This is ${item.name}, it is used for ${item.description}`}
                >
                    {renderItem(item)}
                </li>
            ))}
        </ul>
    );
}

export default DescriptiveList;

通过以上这些措施，可以大大提高列表组件的可访问性，使应用更加包容和友好。

总结

在 React 中封装和复用列表组件是前端开发中的一项重要技能。从基础的列表渲染到逐步增强组件的灵活性、处理交互、优化性能、集成数据管理、支持国际化以及确保可访问性，每一个方面都对构建高质量的前端应用至关重要。通过合理地设计和实现列表组件，可以提高开发效率，降低维护成本，为用户带来更好的体验。在实际项目中，应根据具体需求和场景，综合运用上述技术，打造出符合项目要求的优秀列表组件。