React开发最佳实践总结

React作为目前最流行的前端框架之一，掌握其最佳实践对于写出高质量代码至关重要。

组件设计原则

1. 单一职责原则

每个组件应该只负责一个功能：

// ❌ 不好的例子
function UserProfile({ user }) {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={() => sendEmail(user.email)}>发送邮件</button>
      <div>
        {user.posts.map(post => (
          <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// ✅ 好的例子
function UserProfile({ user }) {
  return (
    <div>
      <UserAvatar user={user} />
      <UserInfo user={user} />
      <UserPosts posts={user.posts} />
    </div>
  );
}

2. 合理使用Props和State

• Props用于组件间通信
• State用于组件内部状态管理
• 优先使用函数组件和Hooks

性能优化技巧

1. 使用React.memo避免不必要的重渲染

const ExpensiveComponent = React.memo(({ data }) => {
  return (
    <div>
      {/* 复杂的渲染逻辑 */}
    </div>
  );
});

2. 合理使用useCallback和useMemo

function TodoList({ todos, filter }) {
  const filteredTodos = useMemo(() => {
    return todos.filter(todo => todo.category === filter);
  }, [todos, filter]);

  const handleToggle = useCallback((id) => {
    // 处理逻辑
  }, []);

  return (
    <div>
      {filteredTodos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onToggle={handleToggle} 
        />
      ))}
    </div>
  );
}

状态管理

对于复杂应用，选择合适的状态管理方案：

• 本地状态：useState, useReducer
• 全局状态：Context API, Redux, Zustand
• 服务器状态：React Query, SWR

代码组织

src/
  components/
    common/
    ui/
  hooks/
  utils/
  pages/
  services/

总结

React开发的关键在于：

1. 保持组件简单和可复用
2. 合理管理状态
3. 注重性能优化
4. 遵循团队约定的代码规范

持续学习和实践是提高React开发技能的最佳途径。