2025年每个开发者都应该知道的10个React最佳实践

作者头像东城·2026-01-31 23:45:39·
概述
_嘿，DEV社区！👋 React正在快速发展，跟上最佳实践是编写干净、高效和可维护代码的关键。_
✅ 1) 保持组件小而专注
一个组件理想情况下应该做好一件事。大型的"上帝组件"难以测试和维护。将大组件拆分为更小、可重用的组件。
🚫 不良实践
  1. // 一个做太多事情的组件
  2. function UserDashboard() {
  3. const [users, setUsers] = useState([]);
  4. const [loading, setLoading] = useState(false);
  5. const [error, setError] = useState(null);
  6. const [filters, setFilters] = useState({});
  7. const [pagination, setPagination] = useState({ page: 1, limit: 10 });
  9. // 用户管理逻辑
  10. const fetchUsers = async () => { /* ... */ };
  11. const createUser = async () => { /* ... */ };
  12. const updateUser = async () => { /* ... */ };
  13. const deleteUser = async () => { /* ... */ };
  15. // 过滤和分页逻辑
  16. const applyFilters = () => { /* ... */ };
  17. const handlePageChange = () => { /* ... */ };
  19. // 复杂的渲染逻辑
  20. return (
  21. <div>
  22. {/* 用户列表 */}
  23. {/* 用户表单 */}
  24. {/* 过滤器 */}
  25. {/* 分页 */}
  26. {/* 统计信息 */}
  27. div>
  28. );
  29. }
jsx
✅ 清洁实践
  1. // 拆分为多个专注的组件
  2. function UserDashboard() {
  3. return (
  4. <div>
  5. <UserFilters />
  6. <UserList />
  7. <UserPagination />
  8. <UserStats />
  9. div>
  10. );
  11. }

  13. function UserList() {
  14. const [users, setUsers] = useState([]);
  15. const [loading, setLoading] = useState(false);
  17. const fetchUsers = async () => { /* ... */ };
  19. return (
  20. <div>
  21. {loading ? <LoadingSpinner /> : >}
  22. div>
  23. );
  24. }
jsx
✅ 2) 使用函数组件和Hooks
对于大多数用例，类组件已经过时。拥抱带有hooks的函数组件来处理状态、副作用等——它们更简单、更简洁。
🚫 类组件（过时）
  1. class Counter extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = { count: 0 };
  5. }
  7. increment = () => {
  8. this.setState(prevState => ({ count: prevState.count + 1 }));
  9. };
  11. render() {
  12. return (
  13. <button onClick={this.increment}>
  14. Count: {this.state.count}
  15. button>
  16. );
  17. }
  18. }
jsx
✅ 函数组件和Hooks
  1. function Counter() {
  2. const [count, setCount] = useState(0);
  4. return (
  5. <button onClick={() => setCount(count + 1)}>
  6. Count: {count}
  7. button>
  8. );
  9. }
jsx
✅ 3) 解构Props和State
避免到处使用props.someValue。相反，解构props和state以获得更干净、更可读的代码：
🚫 不良实践
  1. function Welcome(props) {
  2. return <h1>Hello, {props.name}!h1>;
  3. }

  5. function UserProfile(props) {
  6. return (
  7. <div>
  8. <h2>{props.user.name}h2>
  9. <p>{props.user.email}p>
  10. <span>{props.user.role}span>
  11. div>
  12. );
  13. }
jsx
✅ 清洁实践
  1. function Welcome({ name }) {
  2. return <h1>Hello, {name}!h1>;
  3. }

  5. function UserProfile({ user: { name, email, role } }) {
  6. return (
  7. <div>
  8. <h2>{name}h2>
  9. <p>{email}p>
  10. <span>{role}span>
  11. div>
  12. );
  13. }
jsx
✅ 4) 保持JSX可读
长而深度嵌套的JSX难以阅读。用辅助函数或子组件来分解它。
🚫 不良实践
  1. function ProductCard({ product }) {
  2. return (
  3. <div className="product-card">
  4. <div className="product-image">
  5. <img src={product.image} alt={product.name} />
  6. {product.isNew && <span className="badge">Newspan>}
  7. {product.discount > 0 && (
  8. <span className="discount-badge">
  9. -{product.discount}%
  10. span>
  11. )}
  12. div>
  13. <div className="product-info">
  14. <h3>{product.name}h3>
  15. <p>{product.description}p>
  16. <div className="price-section">
  17. <span className="current-price">${product.price}span>
  18. {product.originalPrice > product.price && (
  19. <span className="original-price">
  20. ${product.originalPrice}
  21. span>
  22. )}
  23. div>
  24. <div className="actions">
  25. <button className="add-to-cart">Add to Cartbutton>
  26. <button className="wishlist">❤button>
  27. div>
  28. div>
  29. div>
  30. );
  31. }
jsx
✅ 清洁实践
  1. function ProductCard({ product }) {
  2. return (
  3. <div className="product-card">
  4. <ProductImage product={product} />
  5. <ProductInfo product={product} />
  6. <ProductActions product={product} />
  7. div>
  8. );
  9. }

  11. function ProductImage({ product }) {
  12. return (
  13. <div className="product-image">
  14. <img src={product.image} alt={product.name} />
  15. {product.isNew && <Badge type="new" />}
  16. {product.discount > 0 && (
  17. <Badge type="discount" value={product.discount} />
  18. )}
  19. div>
  20. );
  21. }

  23. function ProductInfo({ product }) {
  24. return (
  25. <div className="product-info">
  26. <h3>{product.name}h3>
  27. <p>{product.description}p>
  28. <PriceDisplay product={product} />
  29. div>
  30. );
  31. }

  33. function ProductActions({ product }) {
  34. return (
  35. <div className="actions">
  36. <button className="add-to-cart">Add to Cartbutton>
  37. <button className="wishlist">❤button>
  38. div>
  39. );
  40. }
jsx
✅ 5) 使用PropTypes或TypeScript
始终使用PropTypes验证组件props，或者更好的是，迁移到TypeScript以获得更安全、自文档化的代码。
使用PropTypes
  1. import PropTypes from 'prop-types';

  3. function UserCard({ user, onEdit, onDelete }) {
  4. return (
  5. <div className="user-card">
  6. <h3>{user.name}h3>
  7. <p>{user.email}p>
  8. <div className="actions">
  9. <button onClick={() => onEdit(user.id)}>Editbutton>
  10. <button onClick={() => onDelete(user.id)}>Deletebutton>
  11. div>
  12. div>
  13. );
  14. }

  16. UserCard.propTypes = {
  17. user: PropTypes.shape({
  18. id: PropTypes.number.isRequired,
  19. name: PropTypes.string.isRequired,
  20. email: PropTypes.string.isRequired,
  21. }).isRequired,
  22. onEdit: PropTypes.func.isRequired,
  23. onDelete: PropTypes.func.isRequired,
  24. };
jsx
使用TypeScript
  1. interface User {
  2. id: number;
  3. name: string;
  4. email: string;
  5. }

  7. interface UserCardProps {
  8. user: User;
  9. onEdit: (id: number) => void;
  10. onDelete: (id: number) => void;
  11. }

  13. function UserCard({ user, onEdit, onDelete }: UserCardProps) {
  14. return (
  15. <div className="user-card">
  16. <h3>{user.name}h3>
  17. <p>{user.email}p>
  18. <div className="actions">
  19. <button onClick={() => onEdit(user.id)}>Editbutton>
  20. <button onClick={() => onDelete(user.id)}>Deletebutton>
  21. div>
  22. div>
  23. );
  24. }
tsx
✅ 6) 利用React DevTools
在浏览器中使用React Developer Tools来检查组件树、props和state——它将为您节省数小时调试棘手问题的时间。
使用DevTools的技巧
组件树检查：查看组件层次结构
Props和State检查：实时查看数据流
性能分析：识别不必要的重新渲染
Profiler：分析组件渲染时间
✅ 7) 记忆化昂贵操作
使用React.memo、useMemo和useCallback避免不必要的重新渲染，特别是对于大型列表或密集计算。
使用React.memo
  1. const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  2. // 昂贵的计算
  3. const processedData = data.map(item => ({
  4. ...item,
  5. processed: heavyComputation(item)
  6. }));
  8. return (
  9. <div>
  10. {processedData.map(item => (
  11. <div key={item.id}>{item.processed}div>
  12. ))}
  13. div>
  14. );
  15. });
jsx
使用useMemo
  1. function ProductList({ products, filters }) {
  2. const filteredProducts = useMemo(() => {
  3. return products.filter(product => {
  4. return filters.category === 'all' ||
  5. product.category === filters.category;
  6. });
  7. }, [products, filters.category]);
  9. const sortedProducts = useMemo(() => {
  10. return [...filteredProducts].sort((a, b) => {
  11. if (filters.sortBy === 'price') {
  12. return a.price - b.price;
  13. }
  14. return a.name.localeCompare(b.name);
  15. });
  16. }, [filteredProducts, filters.sortBy]);
  18. return (
  19. <div>
  20. {sortedProducts.map(product => (
  21. <ProductCard key={product.id} product={product} />
  22. ))}
  23. div>
  24. );
  25. }
jsx
使用useCallback
  1. function ParentComponent() {
  2. const [count, setCount] = useState(0);
  4. const handleClick = useCallback(() => {
  5. console.log('Button clicked');
  6. }, []); // 空依赖数组，函数永远不会改变
  8. return (
  9. <div>
  10. <p>Count: {count}p>
  11. <button onClick={() => setCount(count + 1)}>
  12. Increment
  13. button>
  14. <ChildComponent onAction={handleClick} />
  15. div>
  16. );
  17. }

  19. const ChildComponent = React.memo(function ChildComponent({ onAction }) {
  20. return <button onClick={onAction}>Child Actionbutton>;
  21. });
jsx
✅ 8) 清理副作用
使用useEffect时，始终清理订阅、定时器或事件监听器以防止内存泄漏。
正确的useEffect使用
  1. function Timer() {
  2. const [time, setTime] = useState(new Date());
  4. useEffect(() => {
  5. const id = setInterval(() => {
  6. setTime(new Date());
  7. }, 1000);
  9. return () => clearInterval(id); // 清理！
  10. }, []);
  12. return <div>Current time: {time.toLocaleTimeString()}div>;
  13. }
jsx
事件监听器清理
  1. function WindowResizeHandler() {
  2. const [windowSize, setWindowSize] = useState({
  3. width: window.innerWidth,
  4. height: window.innerHeight
  5. });
  7. useEffect(() => {
  8. const handleResize = () => {
  9. setWindowSize({
  10. width: window.innerWidth,
  11. height: window.innerHeight
  12. });
  13. };
  15. window.addEventListener('resize', handleResize);
  17. return () => {
  18. window.removeEventListener('resize', handleResize);
  19. };
  20. }, []);
  22. return (
  23. <div>
  24. Window size: {windowSize.width} x {windowSize.height}
  25. div>
  26. );
  27. }
jsx
API订阅清理
  1. function UserProfile({ userId }) {
  2. const [user, setUser] = useState(null);
  3. const [loading, setLoading] = useState(true);
  5. useEffect(() => {
  6. let isMounted = true;
  8. const fetchUser = async () => {
  9. try {
  10. const response = await fetch(`/api/users/${userId}`);
  11. const userData = await response.json();
  13. if (isMounted) {
  14. setUser(userData);
  15. setLoading(false);
  16. }
  17. } catch (error) {
  18. if (isMounted) {
  19. console.error('Failed to fetch user:', error);
  20. setLoading(false);
  21. }
  22. }
  23. };
  25. fetchUser();
  27. return () => {
  28. isMounted = false; // 防止在组件卸载后设置状态
  29. };
  30. }, [userId]);
  32. if (loading) return <div>Loading...div>;
  33. if (!user) return <div>User not founddiv>;
  35. return (
  36. <div>
  37. <h2>{user.name}h2>
  38. <p>{user.email}p>
  39. div>
  40. );
  41. }
jsx
✅ 9) 尽可能保持状态本地
不要不必要地提升状态。本地状态减少复杂性和重新渲染，使您的组件更快、更容易维护。
🚫 不必要的状态提升
  1. // 父组件管理所有状态
  2. function ParentComponent() {
  3. const [child1Data, setChild1Data] = useState('');
  4. const [child2Data, setChild2Data] = useState('');
  5. const [child3Data, setChild3Data] = useState('');
  7. return (
  8. <div>
  9. <Child1 data={child1Data} setData={setChild1Data} />
  10. <Child2 data={child2Data} setData={setChild2Data} />
  11. <Child3 data={child3Data} setData={setChild3Data} />
  12. div>
  13. );
  14. }
jsx
✅ 本地状态管理
  1. // 每个组件管理自己的状态
  2. function ParentComponent() {
  3. return (
  4. <div>
  5. <Child1 />
  6. <Child2 />
  7. <Child3 />
  8. div>
  9. );
  10. }

  12. function Child1() {
  13. const [data, setData] = useState('');
  14. // 只在需要时使用本地状态
  15. return <input value={data} onChange={e => setData(e.target.value)} />;
  16. }
jsx
何时提升状态
  1. // 当多个组件需要共享状态时
  2. function TodoApp() {
  3. const [todos, setTodos] = useState([]);
  5. const addTodo = (text) => {
  6. setTodos([...todos, { id: Date.now(), text, completed: false }]);
  7. };
  9. const toggleTodo = (id) => {
  10. setTodos(todos.map(todo =>
  11. todo.id === id ? { ...todo, completed: !todo.completed } : todo
  12. ));
  13. };
  15. return (
  16. <div>
  17. <TodoForm onAdd={addTodo} />
  18. <TodoList todos={todos} onToggle={toggleTodo} />
  19. <TodoStats todos={todos} />
  20. div>
  21. );
  22. }
jsx
✅ 10) 使用有意义的命名
始终为组件、props和hooks使用清晰、描述性的名称。像Button、handleClick或isLoading这样的名称使您的代码自解释，更容易被他人理解。
🚫 不良命名
  1. function Comp({ d, f }) {
  2. const [l, setL] = useState(false);
  4. const hc = () => {
  5. setL(true);
  6. f(d);
  7. };
  9. return <button onClick={hc}>Clickbutton>;
  10. }
jsx
✅ 有意义的命名
  1. function UserButton({ user, onUserClick }) {
  2. const [isLoading, setIsLoading] = useState(false);
  4. const handleClick = () => {
  5. setIsLoading(true);
  6. onUserClick(user);
  7. };
  9. return (
  10. <button
  11. onClick={handleClick}
  12. disabled={isLoading}
  13. >
  14. {isLoading ? 'Loading...' : 'View Profile'}
  15. button>
  16. );
  17. }
jsx
命名约定
  1. // 组件：PascalCase
  2. function UserProfile() { }
  3. function ProductCard() { }
  4. function NavigationMenu() { }

  6. // Props：camelCase
  7. function Button({ onClick, isDisabled, children }) { }

  9. // 事件处理函数：handle + 事件名
  10. function Form() {
  11. const handleSubmit = () => { };
  12. const handleInputChange = () => { };
  13. const handleButtonClick = () => { };
  14. }

  16. // 布尔props：is/has/can前缀
  17. function Modal({ isOpen, hasOverlay, canClose }) { }

  19. // 状态：描述性名称
  20. const [isLoading, setIsLoading] = useState(false);
  21. const [userData, setUserData] = useState(null);
  22. const [errorMessage, setErrorMessage] = useState('');
jsx
实际应用示例
1. 完整的用户管理组件
  1. // 主组件
  2. function UserManagement() {
  3. return (
  4. <div className="user-management">
  5. <UserHeader />
  6. <UserFilters />
  7. <UserList />
  8. <UserPagination />
  9. div>
  10. );
  11. }

  13. // 用户列表组件
  14. function UserList() {
  15. const [users, setUsers] = useState([]);
  16. const [loading, setLoading] = useState(false);
  17. const [error, setError] = useState(null);
  19. const fetchUsers = useCallback(async () => {
  20. setLoading(true);
  21. try {
  22. const response = await fetch('/api/users');
  23. const data = await response.json();
  24. setUsers(data);
  25. } catch (err) {
  26. setError(err.message);
  27. } finally {
  28. setLoading(false);
  29. }
  30. }, []);
  32. useEffect(() => {
  33. fetchUsers();
  34. }, [fetchUsers]);
  36. if (loading) return <LoadingSpinner />;
  37. if (error) return <ErrorMessage message={error} />;
  39. return (
  40. <div className="user-list">
  41. {users.map(user => (
  42. <UserCard key={user.id} user={user} />
  43. ))}
  44. div>
  45. );
  46. }

  48. // 用户卡片组件
  49. const UserCard = React.memo(function UserCard({ user }) {
  50. const [isEditing, setIsEditing] = useState(false);
  52. const handleEdit = useCallback(() => {
  53. setIsEditing(true);
  54. }, []);
  56. const handleSave = useCallback(async (updatedUser) => {
  57. try {
  58. await updateUser(updatedUser);
  59. setIsEditing(false);
  60. } catch (error) {
  61. console.error('Failed to update user:', error);
  62. }
  63. }, []);
  65. return (
  66. <div className="user-card">
  67. {isEditing ? (
  68. <UserEditForm
  69. user={user}
  70. onSave={handleSave}
  71. onCancel={() => setIsEditing(false)}
  72. />
  73. ) : (
  74. <UserDisplay
  75. user={user}
  76. onEdit={handleEdit}
  77. />
  78. )}
  79. div>
  80. );
  81. });
jsx
2. 自定义Hook示例
  1. // 自定义Hook：数据获取
  2. function useDataFetching(url) {
  3. const [data, setData] = useState(null);
  4. const [loading, setLoading] = useState(true);
  5. const [error, setError] = useState(null);
  7. useEffect(() => {
  8. let isMounted = true;
  10. const fetchData = async () => {
  11. try {
  12. setLoading(true);
  13. const response = await fetch(url);
  14. const result = await response.json();
  16. if (isMounted) {
  17. setData(result);
  18. setError(null);
  19. }
  20. } catch (err) {
  21. if (isMounted) {
  22. setError(err.message);
  23. }
  24. } finally {
  25. if (isMounted) {
  26. setLoading(false);
  27. }
  28. }
  29. };
  31. fetchData();
  33. return () => {
  34. isMounted = false;
  35. };
  36. }, [url]);
  38. return { data, loading, error };
  39. }

  41. // 使用自定义Hook
  42. function ProductList() {
  43. const { data: products, loading, error } = useDataFetching('/api/products');
  45. if (loading) return <LoadingSpinner />;
  46. if (error) return <ErrorMessage message={error} />;
  48. return (
  49. <div className="product-list">
  50. {products.map(product => (
  51. <ProductCard key={product.id} product={product} />
  52. ))}
  53. div>
  54. );
  55. }
jsx
总结
💡记住：小组件 + hooks + 有意义的命名 = 快乐的开发者和可维护的应用！🎉
这些最佳实践将帮助您：
编写更干净、更可维护的代码
提高应用性能
减少bug和调试时间
改善团队协作