React Hooks 的优势和劣势
React Hooks 是 React 16.8 引入的特性，它允许在函数组件中使用状态（state）和其他 React 特性（如生命周期方法）。以下是 React Hooks 的主要优势和劣势：
优势
简化代码：
Hooks 消除了类组件中的复杂结构（如 this 和生命周期方法），使代码更简洁易读。
函数组件比类组件更轻量，减少了样板代码。
逻辑复用：
自定义 Hooks 可以将组件逻辑提取到可复用的函数中，解决了高阶组件（HOC）和渲染属性（Render Props）模式带来的嵌套问题。
更好的状态管理：
useState 和 useReducer 提供了更灵活的状态管理方式。
可以在函数组件中直接使用状态，而不需要转换为类组件。
更直观的生命周期管理：
useEffect 统一了生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount），使副作用管理更加直观。
更好的性能优化：
useMemo 和 useCallback 可以避免不必要的渲染和计算，提升性能。
更符合函数式编程思想：
Hooks 鼓励使用纯函数和不可变数据，使代码更易于测试和维护。
劣势
学习曲线：
对于习惯了类组件的开发者来说，Hooks 的概念和使用方式需要一定的学习成本。
需要理解 Hooks 的规则（如只能在函数组件的顶层调用 Hooks）。
潜在的滥用：
如果过度使用 Hooks，可能会导致组件逻辑分散，难以维护。
需要合理组织代码，避免 Hooks 之间的耦合。
调试难度：
在某些情况下，Hooks 的调试可能比类组件更复杂，尤其是在多个 useEffect 和自定义 Hooks 的情况下。
兼容性问题：
Hooks 只能在函数组件中使用，如果需要与类组件混用，可能需要额外的适配工作。
案例：使用 React Hooks 实现一个 TodoList
以下是一个使用 React Hooks 实现的简单 TodoList 应用。
项目结构
src/
│
├── components/
│ ├── TodoList.jsx
│ ├── TodoItem.jsx
│ └── AddTodo.jsx
│
├── App.jsx
└── index.js
1. TodoItem.jsx - 单个任务项组件
import React from 'react';
const TodoItem = ({ todo, onToggleComplete, onDelete }) => {
return (
<li>
<span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
</span>
<button onClick={() => onToggleComplete(todo.id)}>
{todo.completed ? 'Undo' : 'Complete'}
</button>
<button onClick={() => onDelete(todo.id)}>Delete</button>
</li>
);
};
export default TodoItem;
2. TodoList.jsx - 任务列表组件
import React from 'react';
import TodoItem from './TodoItem';
const TodoList = ({ todos, onToggleComplete, onDelete }) => {
return (
<ul>
{todos.map((todo) => (
<TodoItem
key={todo.id}
todo={todo}
onToggleComplete={onToggleComplete}
onDelete={onDelete}
/>
))}
</ul>
);
};
export default TodoList;
3. AddTodo.jsx - 添加任务组件
import React, { useState } from 'react';
const AddTodo = ({ onAddTodo }) => {
const [newTodo, setNewTodo] = useState('');
const handleAddTodo = () => {
if (newTodo.trim()) {
onAddTodo(newTodo);
setNewTodo('');
}
};
return (
<div>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
onKeyUp={(e) => e.key === 'Enter' && handleAddTodo()}
placeholder="Add a new task"
/>
<button onClick={handleAddTodo}>Add</button>
</div>
);
};
export default AddTodo;
4. App.jsx - 主组件
import React, { useState } from 'react';
import AddTodo from './components/AddTodo';
import TodoList from './components/TodoList';
const App = () => {
const [todos, setTodos] = useState([
{ id: 1, text: 'Learn React Hooks', completed: false },
{ id: 2, text: 'Build a TodoList', completed: false },
]);
const handleAddTodo = (newTodoText) => {
setTodos([
...todos,
{
id: todos.length + 1,
text: newTodoText,
completed: false,
},
]);
};
const handleToggleComplete = (todoId) => {
setTodos(
todos.map((todo) =>
todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
)
);
};
const handleDeleteTodo = (todoId) => {
setTodos(todos.filter((todo) => todo.id !== todoId));
};
return (
<div>
<h1>Todo List</h1>
<AddTodo onAddTodo={handleAddTodo} />
<TodoList
todos={todos}
onToggleComplete={handleToggleComplete}
onDelete={handleDeleteTodo}
/>
</div>
);
};
export default App;
5. index.js - 入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
运行项目
确保已安装 Node.js 和 create-react-app。
在项目根目录下运行以下命令启动开发服务器：
npm start