React框架核心概念与实践

React框架核心概念与实践

1. 技术分析

1.1 React概述

React是Facebook开发的用户界面库：

React特点 组件化: 复用性强 虚拟DOM: 高效渲染 JSX: JavaScript扩展语法 单向数据流: 数据流向清晰 核心概念: 组件 状态管理 生命周期

1.2 React组件

组件类型 函数组件: 简洁、推荐 类组件: 功能完整 组件特性: props: 输入属性 state: 内部状态 hooks: 函数组件增强

1.3 虚拟DOM

2. 核心功能实现

2.1 函数组件与Hooks

import { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); const [name, setName] = useState(''); useEffect(() => { document.title = `Count: ${count}`; return () => { document.title = 'React App'; }; }, [count]); return ( <div> <h1>Counter: {count}</h1> <button onClick={() => setCount(c => c + 1)}> Increment </button> <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter name" /> </div> ); } function UserProfile({ user }) { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch(`/api/users/${user.id}`) .then(res => res.json()) .then(data => { setUser(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, [user.id]); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>; return ( <div className="profile"> <h2>{user.name}</h2> <p>{user.email}</p> </div> ); }

2.2 状态管理

import { useState, useReducer } from 'react'; // 使用useState管理简单状态 function TodoList() { const [todos, setTodos] = useState([]); const [input, setInput] = useState(''); const addTodo = () => { if (input.trim()) { setTodos(prev => [...prev, { id: Date.now(), text: input }]); setInput(''); } }; const deleteTodo = (id) => { setTodos(prev => prev.filter(todo => todo.id !== id)); }; return ( <div> <input value={input} onChange={(e) => setInput(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && addTodo()} /> <button onClick={addTodo}>Add Todo</button> <ul> {todos.map(todo => ( <li key={todo.id}> {todo.text} <button onClick={() => deleteTodo(todo.id)}>×</button> </li> ))} </ul> </div> ); } // 使用useReducer管理复杂状态 const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; case 'reset': return initialState; default: return state; } } function CounterWithReducer() { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> Count: {state.count} <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}-</button> <button onClick={() => dispatch({ type: 'reset' })}>Reset</button> </div> ); }

2.3 Context与高阶组件

import { createContext, useContext } from 'react'; // Context创建 const ThemeContext = createContext('light'); function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); const toggleTheme = () => { setTheme(prev => prev === 'light' ? 'dark' : 'light'); }; return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); } // 使用Context function ThemedButton() { const { theme, toggleTheme } = useContext(ThemeContext); return ( <button onClick={toggleTheme} style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#333' }} > Toggle Theme </button> ); } // 高阶组件 function withLoading(Component) { return function WithLoading({ isLoading, ...props }) { if (isLoading) { return <div>Loading...</div>; } return <Component {...props} />; }; } const EnhancedComponent = withLoading(MyComponent);

3. 性能对比

3.1 函数组件vs类组件

3.2 状态管理方案对比

3.3 渲染优化对比

4. 最佳实践

4.1 组件设计原则

// 单一职责原则 function UserAvatar({ src, alt }) { return <img src={src} alt={alt} className="avatar" />; } // 可复用性 function Button({ children, variant = 'primary', onClick }) { const variants = { primary: 'btn-primary', secondary: 'btn-secondary' }; return ( <button className={`btn ${variants[variant]}`} onClick={onClick}> {children} </button> ); }

4.2 Hooks规则

// Hooks必须在顶层调用 function MyComponent() { // ✅ 正确：在顶层 const [count, setCount] = useState(0); if (count > 5) { // ❌ 错误：在条件中 const [name, setName] = useState(''); } return <div>{count}</div>; }

5. 总结

React是构建现代Web应用的强大工具：

1. 函数组件：推荐的组件写法
2. Hooks：函数组件的增强功能
3. 状态管理：多种方案可选
4. 性能优化：memo、useMemo、useCallback

对比数据如下：

• 函数组件比类组件更简洁
• useState适合简单状态
• useReducer适合复杂状态逻辑
• Context适合跨组件共享状态