React 最佳实践指南

React 作为现代前端开发的核心框架，掌握其最佳实践对于构建高质量应用至关重要。

组件设计原则

1. 单一职责原则

每个组件应该只负责一个功能，这样可以提高代码的可维护性和可测试性。

```jsx
// ❌ 不好的做法
function UserProfile({ user }) {
return (

// ✅ 好的做法
function UserProfile({ user }) {
return (

2. Props 接口设计

使用 TypeScript 定义清晰的 Props 接口，提高代码的可读性和类型安全。

```typescript
interface ButtonProps {
variant: 'primary' | 'secondary' | 'danger'
size: 'small' | 'medium' | 'large'
disabled?: boolean
onClick: () => void
children: React.ReactNode
}

function Button({ variant, size, disabled, onClick, children }: ButtonProps) {
return (
<button
className={btn btn-${variant} btn-${size}}
disabled={disabled}
onClick={onClick}
>
{children}

)
}
```

状态管理

1. 使用 useState 管理本地状态

对于简单的本地状态，使用 useState 是最佳选择。

```jsx
function Counter() {
const [count, setCount] = useState(0)

return (

2. 使用 useReducer 管理复杂状态

当状态逻辑复杂时，useReducer 是更好的选择。

```jsx
function todoReducer(state, action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, { id: Date.now(), text: action.text, completed: false }]
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
)
default:
return state
}
}

function TodoList() {
const [todos, dispatch] = useReducer(todoReducer, [])

return (

性能优化

1. 使用 React.memo 优化组件渲染

对于纯组件，使用 React.memo 可以避免不必要的重新渲染。

```jsx
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
// 复杂的计算逻辑
const processedData = useMemo(() => {
return data.map(item => ({
...item,
processed: heavyCalculation(item)
}))
}, [data])

return (

2. 使用 useMemo 和 useCallback 优化计算

缓存昂贵的计算结果和函数引用。

```jsx
function SearchResults({ query, items }) {
const filteredItems = useMemo(() => {
return items.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
)
}, [query, items])

const handleItemClick = useCallback((item) => {
console.log('点击了:', item.name)
}, [])

return (