【react】进阶教程01
目录
一、性能优化策略
1. 组件渲染优化
2. 虚拟 DOM 优化
3. 代码分割（Lazy Loading）
二、高级 Hooks 模式
1. 自定义 Hook
2. useReducer 复杂状态管理
三、状态管理进阶
1. Redux Toolkit 现代 Redux 实践
2. 状态选择器优化
四、高级组件模式
1. Render Props
2. 高阶组件 (HOC)
3. 复合组件（Compound Components）
五、错误边界与异步处理
1. 错误边界（Error Boundaries）
2. Suspense 数据获取
六、TypeScript 集成
1. 组件 Props 类型定义
组件props类型检查
2. 泛型组件
七、测试策略
1. 单元测试（Jest + Testing Library）
2. 端到端测试（Cypress）
八、部署与优化
1. 生产环境构建
2. 性能分析
3. CDN 与缓存策略
九、进阶学习方向
十、推荐资源
一、性能优化策略
1. 组件渲染优化
React.memo：缓存函数组件，避免不必要的渲染（浅比较 props）
const MemoComponent = React.memo(function MyComponent({ data }) {
return <div>{data}</div>;
});useMemo：缓存计算结果
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useCallback：缓存回调函数
const handleClick = useCallback(() => {
console.log('Clicked:', id);
}, [id]);2. 虚拟 DOM 优化
避免在渲染函数中进行高开销操作（如复杂计算、DOM 操作）
使用 key 属性稳定化（避免索引作为 key）
3. 代码分割（Lazy Loading）
React.lazy + Suspense：动态加载组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}二、高级 Hooks 模式
1. 自定义 Hook
封装可复用的逻辑：
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}
// 使用
function App() {
const { data, loading } = useFetch('https://api.example.com/data');
// ...
}2. useReducer 复杂状态管理
替代 useState 处理多层嵌套或关联状态：
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 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
</>
);
}
3. useContext 深度使用
配合 状态管理库 或 主题/全局配置：
const UserContext = React.createContext();
function App() {
const [user, setUser] = useState({ name: 'John', id: 1 });
return (
<UserContext.Provider value={{ user, setUser }}>
<Profile />
</UserContext.Provider>
);
}
function Profile() {
const { user } = useContext(UserContext);
return <div>{user.name}</div>;
}三、状态管理进阶
1. Redux Toolkit 现代 Redux 实践
安装：
npm install @reduxjs/toolkit react-redux创建 Store：
// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1 },
decrement: state => { state.value -= 1 }
}
});
export const store = configureStore({
reducer: {
counter: counterSlice.reducer
}
});
export const { increment, decrement } = counterSlice.actions;连接 React：
import { Provider, useSelector, useDispatch } from 'react-redux';
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
function Counter() {
const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(decrement())}>-</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>+</button>
</div>
);
}vvvvvvvv2. 状态选择器优化
使用 Reselect 或 Redux Toolkit 的 createSelector 缓存派生数据：
import { createSelector } from '@reduxjs/toolkit';
const selectUser = state => state.user;
const selectPosts = state => state.posts;
const selectUserPosts = createSelector(
[selectUser, selectPosts],
(user, posts) => posts.filter(post => post.userId === user.id)
);四、高级组件模式
1. Render Props
function MouseTracker({ render }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = e => {
setPosition({ x: e.clientX, y: e.clientY });
};
return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
}
// 使用
<MouseTracker render={({ x, y }) => (
<h1>Mouse position: {x}, {y}</h1>
)} />2. 高阶组件 (HOC)
function withLogger(WrappedComponent) {
return function(props) {
useEffect(() => {
console.log('Component mounted:', WrappedComponent.name);
return () => console.log('Component unmounted:', WrappedComponent.name);
}, []);
return <WrappedComponent {...props} />;
};
}
const EnhancedComponent = withLogger(MyComponent);3. 复合组件（Compound Components）
通过 Context 共享状态：
const TabsContext = React.createContext();
function Tabs({ children }) {
const [activeTab, setActiveTab] = useState(0);
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
<div className="tabs">{children}</div>
</TabsContext.Provider>
);
}
function Tab({ index, children }) {
const { activeTab, setActiveTab } = useContext(TabsContext);
return (
<button
className={activeTab === index ? 'active' : ''}
onClick={() => setActiveTab(index)}
>
{children}
</button>
);
}
// 使用
<Tabs>
<Tab index={0}>Tab 1</Tab>
<Tab index={1}>Tab 2</Tab>
</Tabs>五、错误边界与异步处理
1. 错误边界（Error Boundaries）
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// 使用
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>2. Suspense 数据获取
（React 18+ 实验性功能）
// 实现一个简单的 Suspense 兼容的数据源
function fetchData(url) {
let status = 'pending';
let result;
let suspender = fetch(url)
.then(res => res.json())
.then(data => {
status = 'success';
result = data;
})
.catch(error => {
status = 'error';
result = error;
});
return {
read() {
if (status === 'pending') throw suspender;
if (status === 'error') throw result;
return result;
}
};
}
// 组件中使用
const dataResource = fetchData('/api/data');
function MyComponent() {
const data = dataResource.read();
return <div>{data.message}</div>;
}‘
六、TypeScript 集成
1. 组件 Props 类型定义
interface ButtonProps {
primary?: boolean;
size?: 'small' | 'medium' | 'large';
onClick?: () => void;
children: React.ReactNode;
}
const Button: React.FC<ButtonProps> = ({ primary, size, onClick, children }) => {
// ...
};
组件props类型检查
import PropTypes from 'prop-types';
function Button({ primary, size, onClick, children }) {
// ...
}
Button.propTypes = {
primary: PropTypes.bool,
size: PropTypes.oneOf(['small', 'medium', 'large']),
onClick: PropTypes.func,
children: PropTypes.node.isRequired
};
Button.defaultProps = {
primary: false,
size: 'medium'
};2. 泛型组件
interface ListProps<T> {
items: T[];
renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>) {
return <div>{items.map(renderItem)}</div>;
}
// 使用
<List<{ id: number; name: string }>
items={users}
renderItem={user => <div key={user.id}>{user.name}</div>}
/>七、测试策略
1. 单元测试（Jest + Testing Library）
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('increments counter', () => {
render(<Counter />);
const button = screen.getByText('+');
fireEvent.click(button);
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});2. 端到端测试（Cypress）
describe('Login Flow', () => {
it('successfully logs in', () => {
cy.visit('/login');
cy.get('#email').type('user@example.com');
cy.get('#password').type('password123');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});
});八、部署与优化
1. 生产环境构建
npm run build # 生成优化的静态文件到 build/ 目录
2. 性能分析
使用 React DevTools Profiler 分析组件渲染
通过 reportWebVitals 监控 Core Web Vitals
3. CDN 与缓存策略
静态资源添加哈希指纹（main.a3b4c5.js）
配置长期缓存（Cache-Control: max-age=31536000）
九、进阶学习方向
-
服务端渲染：Next.js 深度使用
-
微前端架构：Module Federation
-
动画库：Framer Motion, React Spring
-
数据可视化：D3.js 集成
-
Web Workers：处理 CPU 密集型任务
十、推荐资源
-
React 进阶模式
-
React TypeScript Cheatsheet
-
Epic React（付费高级课程）
-
React 设计模式与最佳实践
通过实现复杂应用（如电商平台、实时聊天系统）并参与开源项目，持续提升 React 工程化能力！
码字不易，各位大佬点点赞呗