React 高级阶段学习计划
目标
- 深入理解React的渲染机制和性能优化。
- 学会代码分割和懒加载。
- 掌握单元测试和集成测试。
- 学习TypeScript与React的结合。
学习内容
性能优化
React.memo
- React.memo：用于优化函数组件的性能，避免不必要的重新渲染。
- 示例：
import React, { useState, useMemo } from 'react'; const ExpensiveComponent = React.memo(({ value }) => { console.log('ExpensiveComponent rendered'); // 模拟昂贵的计算 for (let i = 0; i < 1000000000; i++) {} return <div>{value}</div>; }); function App() { const [count, setCount] = useState(0); const [text, setText] = useState(''); const memoizedValue = useMemo(() => { console.log('Computing memoized value'); return count * 2; }, [count]); return ( <div> <h1>Performance Optimization</h1> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment Count</button> <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something" /> <ExpensiveComponent value={memoizedValue} /> </div> ); } export default App;
useCallback和useMemo
- useCallback：用于缓存函数，避免不必要的重新创建。
- useMemo：用于缓存计算结果，避免不必要的计算。
- 示例：
import React, { useState, useCallback, useMemo } from 'react'; function App() { const [count, setCount] = useState(0); const [text, setText] = useState(''); const expensiveComputation = (num) => { console.log('Computing...'); // 模拟昂贵的计算 for (let i = 0; i < 1000000000; i++) {} return num * 2; }; const memoizedValue = useMemo(() => { return expensiveComputation(count); }, [count]); const memoizedCallback = useCallback(() => { console.log('Callback called'); setCount(count + 1); }, [count]); return ( <div> <h1>Performance Optimization</h1> <p>Count: {count}</p> <button onClick={memoizedCallback}>Increment Count</button> <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something" /> <p>Memoized Value: {memoizedValue}</p> </div> ); } export default App;
代码分割与懒加载
React.lazy和Suspense
- React.lazy：用于动态导入组件，实现代码分割。
- Suspense：用于在组件加载时显示加载指示器。
- 示例：
import React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; const Home = lazy(() => import('./Home')); const About = lazy(() => import('./About')); const Contact = lazy(() => import('./Contact')); function App() { return ( <Router> <div> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </nav> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Suspense> </div> </Router> ); } export default App;
测试
单元测试和集成测试
-
Jest：一个JavaScript测试框架。
-
Testing Library：一组用于测试UI组件的库。
-
安装：
npm install --save-dev jest @testing-library/react @testing-library/jest-dom -
示例：
// Button.js import React from 'react'; function Button({ onClick, label }) { return <button onClick={onClick}>{label}</button>; } export default Button;// Button.test.js import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import Button from './Button'; test('renders button with correct label', () => { render(<Button label="Click Me" />); const buttonElement = screen.getByText('Click Me'); expect(buttonElement).toBeInTheDocument(); }); test('calls onClick handler when clicked', () => { const handleClick = jest.fn(); render(<Button label="Click Me" onClick={handleClick} />); const buttonElement = screen.getByText('Click Me'); fireEvent.click(buttonElement); expect(handleClick).toHaveBeenCalled(); });
TypeScript
TypeScript基础
- TypeScript：一种静态类型的编程语言，可以提高代码的可读性和可维护性。
- 安装：
npm install --save typescript @types/react @types/react-dom - 配置：
- 在项目根目录下创建
tsconfig.json文件：{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": ["src"] }
- 在项目根目录下创建
TypeScript与React结合
-
函数组件：
import React from 'react'; interface ButtonProps { label: string; onClick: () => void; } const Button: React.FC<ButtonProps> = ({ label, onClick }) => { return <button onClick={onClick}>{label}</button>; }; export default Button; -
类组件：
import React, { Component } from 'react'; interface CounterState { count: number; } class Counter extends Component<{}, CounterState> { state: CounterState = { count: 0 }; increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.increment}>Increment</button> </div> ); } } export default Counter;
实践项目
个人博客
- 创建项目：
npx create-react-app personal-blog-ts --template typescript cd personal-blog-ts npm start - 创建组件：
Header.tsx：头部组件import React from 'react'; const Header: React.FC = () => { return <header><h1>My Personal Blog</h1></header>; }; export default Header;PostList.tsx：文章列表组件import React from 'react'; interface Post { id: number; title: string; content: string; } const posts: Post[] = [ { id: 1, title: 'First Post', content: 'This is the first post.' }, { id: 2, title: 'Second Post', content: 'This is the second post.' }, ]; const PostList: React.FC = () => { return ( <div> {posts.map(post => ( <div key={post.id}> <h2>{post.title}</h2> <p>{post.content}</p> </div> ))} </div> ); }; export default PostList;App.tsx：主组件import React from 'react'; import Header from './Header'; import PostList from './PostList'; const App: React.FC = () => { return ( <div className="App"> <Header /> <PostList /> </div> ); }; export default App;
电子商务网站
- 创建项目：
npx create-react-app ecommerce-ts --template typescript cd ecommerce-ts npm start - 安装axios：
npm install axios - 创建组件：
ProductList.tsx：显示产品列表import React, { useState, useEffect } from 'react'; import axios from 'axios'; interface Product { id: number; title: string; price: number; image: string; } const ProductList: React.FC = () => { const [products, setProducts] = useState<Product[]>([]); useEffect(() => { axios.get<Product[]>('https://fakestoreapi.com/products') .then(response => { setProducts(response.data); }) .catch(error => { console.error('Error fetching products:', error); }); }, []); return ( <div className="product-list"> {products.map(product => ( <div key={product.id} className="product"> <img src={product.image} alt={product.title} /> <h3>{product.title}</h3> <p>${product.price}</p> </div> ))} </div> ); }; export default ProductList;App.tsx：主组件import React from 'react'; import ProductList from './ProductList'; const App: React.FC = () => { return ( <div className="App"> <h1>E-commerce Website</h1> <ProductList /> </div> ); }; export default App;
建议
- 定期回顾：每周花时间回顾本周所学内容，确保知识点牢固掌握。
- 参与社区：加入React相关的论坛、Slack群组或Discord服务器，与其他开发者交流心得。
- 阅读源码：尝试阅读一些复杂的React库的源码，提高代码理解和分析能力。
希望这个学习计划能够帮助你系统地学习React高级技能，并通过实践项目巩固所学知识。祝你学习顺利！
你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中，以便于查看和使用。