当前位置：首页 > article >正文

React 高级阶段学习计划

article 2024/12/28 22:31:51

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的编辑器或平台中，以便于查看和使用。

查看全文

http://www.kler.cn/a/354851.html

C语言简单测试总结

Debian12 安装配置 ODBC for GaussDB

双柱渐变图背景图

USB 状态机及状态转换

Semantic Segmentation Editor标注工具

win版ffmpeg的安装和操作

WNMP环境本地搭建并配置公网地址远程搭建动态网站或服务器

npm install 失败，报错 error sha512

uniapp打包成安卓video标签层级问题解决

matlab怎样将数据按行拼接和按列拼接（水平拼接竖直拼接）

太速科技-509-基于XCVU13P的4路QSFP28光纤PCIeX16收发卡

Redis主从复制机制详解

20255 - 中医方剂学 - 考研 - 执业

数据中台业务架构图

linux - ubuntu22.04 显卡驱动问题

如何将照片从华为传输到电脑 |轻松掌握转移技巧

Ansible自动化运维管理工具

nginx解决非人类使用http打开的443，解决网安漏扫时误扫443端口带来的问题

C++智能指针及其应用

【嵌入式设备】蓝牙鼠标遥控器

什么叫做设备绑定模型和模型绑定知识库

前端学习---(2)CSS基础

网络安全入门

get请求（豆瓣电影第一页爬取）

Web 升级 Https

【C语言】字符函数和字符串函数（中）

React 高级阶段学习计划

目标

学习内容

性能优化

React.memo

useCallback和useMemo

代码分割与懒加载

React.lazy和Suspense

测试

单元测试和集成测试

TypeScript

TypeScript基础

TypeScript与React结合

实践项目

个人博客

电子商务网站

建议

相关文章：