React 高级阶段学习计划

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 
  {value}
  ;
  });
  
  function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');
  
    const memoizedValue = useMemo(() => {
      console.log('Computing memoized value');
      return count * 2;
    }, [count]);
  
    return (
      
  
        
  Performance Optimization
        
  Count: {count}
         setCount(count + 1)}>Increment Count
         setText(e.target.value)}
          placeholder="Type something"
        />
        
      
    );
  }
  
  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 (
      
  
        
  Performance Optimization
        
  Count: {count}
        Increment Count
         setText(e.target.value)}
          placeholder="Type something"
        />
        
  Memoized Value: {memoizedValue}
      
    );
  }
  
  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 (
      
        
  
          
  
            
  
              
  Home
              
  About
              
  Contact
            
          
  
          Loading...
  }>
            
              
              
              
            
          
        

); } 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 {label};
  }
  
  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();
    const buttonElement = screen.getByText('Click Me');
    expect(buttonElement).toBeInTheDocument();
  });
  
  test('calls onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render();
    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 = ({ label, onClick }) => {
    return {label};
  };
  
  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 (
        
  
          
  Count: {this.state.count}
          Increment
        
      );
    }
  }
  
  export default Counter;
  

实践项目

个人博客

1. 创建项目：

   npx create-react-app personal-blog-ts --template typescript
   cd personal-blog-ts
   npm start
   

2. 创建组件：
   • Header.tsx：头部组件

     import React from 'react';
     
     const Header: React.FC = () => {
       return 
     My Personal Blog
     ;
     };
     
     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 (
         
     
           {posts.map(post => (
             
     
               
     {post.title}
               
     {post.content}
             
           ))}
         
       );
     };
     
     export default PostList;
     

   • App.tsx：主组件

     import React from 'react';
     import Header from './Header';
     import PostList from './PostList';
     
     const App: React.FC = () => {
       return (
         
     
           
     
           
         
       );
     };
     
     export default App;
     

电子商务网站

1. 创建项目：

   npx create-react-app ecommerce-ts --template typescript
   cd ecommerce-ts
   npm start
   

2. 安装axios：

   npm install axios
   

3. 创建组件：
   • 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([]);
     
       useEffect(() => {
         axios.get('https://fakestoreapi.com/products')
           .then(response => {
             setProducts(response.data);
           })
           .catch(error => {
             console.error('Error fetching products:', error);
           });
       }, []);
     
       return (
         
     
           {products.map(product => (
             
     
               
               
     {product.title}
               
     ${product.price}
             
           ))}
         
       );
     };
     
     export default ProductList;
     

   • App.tsx：主组件

     import React from 'react';
     import ProductList from './ProductList';
     
     const App: React.FC = () => {
       return (
         
     
           
     E-commerce Website
           
         
       );
     };
     
     export default App;
     

建议

• 定期回顾：每周花时间回顾本周所学内容，确保知识点牢固掌握。
• 参与社区：加入React相关的论坛、Slack群组或Discord服务器，与其他开发者交流心得。
• 阅读源码：尝试阅读一些复杂的React库的源码，提高代码理解和分析能力。

希望这个学习计划能够帮助你系统地学习React高级技能，并通过实践项目巩固所学知识。祝你学习顺利！

你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中，以便于查看和使用。