React 中的组件类型：Dumb 组件 vs Smart 组件

前端

2023-09-07 16:02:12

在 React 中，组件（Component）是构成应用的基本单元，负责显示数据并响应用户操作。React 中的组件主要分为两种类型：Dumb 组件和 Smart 组件，每种组件都有各自的特点和使用场景。

Dumb 组件与 Smart 组件的区别

Dumb 组件

Dumb 组件又称为 Presentational Component，是一种无状态组件，没有任何业务逻辑。
Dumb 组件只负责渲染数据，不包含任何状态或行为。
Dumb 组件通常很小，易于维护和测试。

Smart 组件

Smart 组件又称为 Container Component，是一种有状态组件，包含业务逻辑。
Smart 组件负责获取和处理数据，并根据数据状态决定如何渲染 Dumb 组件。
Smart 组件通常较大，维护和测试也更为复杂。

何时使用 Dumb 组件和 Smart 组件

使用 Dumb 组件：
- 当您需要渲染数据时。
- 当您需要创建一个简单的、可重用的组件时。
- 当您需要创建一个易于维护和测试的组件时。
使用 Smart 组件：
- 当您需要处理业务逻辑时。
- 当您需要获取和处理数据时。
- 当您需要根据数据状态决定如何渲染 Dumb 组件时。

举个例子

为了更好地理解 Dumb 组件和 Smart 组件的区别，我们来看一个简单的例子。假设我们正在构建一个待办事项应用。

Dumb 组件：

const TodoItem = (props) => {
  return (
    <li>
      {props.todo.text}
      <button onClick={() => props.onToggleTodo(props.todo)}>Toggle</button>
      <button onClick={() => props.onDeleteTodo(props.todo)}>Delete</button>
    </li>
  );
};

在这个 Dumb 组件中，我们只负责渲染待办事项的文本以及两个按钮。我们没有处理任何业务逻辑，如添加、删除或切换待办事项。

Smart 组件：

class TodoList extends React.Component {
  state = {
    todos: [
      {
        id: 1,
        text: "Learn React",
        completed: false,
      },
      {
        id: 2,
        text: "Build a React app",
        completed: false,
      },
      {
        id: 3,
        text: "Deploy a React app",
        completed: false,
      },
    ],
  };

  addTodo = (text) => {
    this.setState({
      todos: [...this.state.todos, { id: Date.now(), text, completed: false }],
    });
  };

  toggleTodo = (todo) => {
    this.setState({
      todos: this.state.todos.map((t) => (t.id === todo.id ? { ...t, completed: !t.completed } : t)),
    });
  };

  deleteTodo = (todo) => {
    this.setState({
      todos: this.state.todos.filter((t) => t.id !== todo.id),
    });
  };

  render() {
    return (
      <ul>
        {this.state.todos.map((todo) => (
          <TodoItem todo={todo} onToggleTodo={this.toggleTodo} onDeleteTodo={this.deleteTodo} />
        ))}
      </ul>
    );
  }
}