React18进阶：从入门到初级实战教程@慕课网原创_慕课网

概述

本文全面介绍了React18进阶的相关内容，从React版本变迁到新增特性概述，涵盖了组件开发、状态管理和性能优化等多个方面。此外，文章还详细讲解了路由与导航的最佳实践，并通过实战案例解析了如何从零开始构建一个React18项目并进行部署。

React18进阶：从入门到初级实战教程

React18基础回顾

React版本变迁简述

React 从 0.5 版本到现在的 18 版本，经历了多个版本的更新，每个版本都带来了重要的改进和新特性。以下是一些重要的版本更新：

React 0.5: 引入了 JSX 语法。
React 0.13: 引入了 ES6 类。
React 16: 引入了错误边界、异步渲染、新的上下文 API、自定义渲染器（例如 React DOM、React Native）。
React 17: 引入了自动布局优化、自定义事件、更好的错误信息。
React 18: 引入了并发模式、自动批量更新、新的 context API、新的 concurrent mode。

React18新增特性概述

React 18 引入了一些新的特性，这些特性为开发者提供了更好的用户体验和更高的性能。以下是一些主要的新特性：

并发模式（Concurrent Mode）: 允许应用在后台加载，从而不会阻塞用户界面。这是 React 中最令人期待的新特性之一。
自动批量更新（Automatic Batching）: React 18 自动将状态更新批量处理，从而减少渲染次数。
Suspense for Data Fetching: 通过 Suspense 组件来优化数据获取的用户体验，允许在组件加载时显示一致的加载状态。以下是一个简单的 Suspense 示例：

import React from 'react';
import { Suspense } from 'react';
import { fetchUser } from './api';

function User({ userId }) {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  return <div>{user ? user.name : 'Loading...'}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <User userId={123} />
    </Suspense>
  );
}

export default App;
``

- **改进的错误处理**: 在 React 18 中，错误边界处理错误的方式更加灵活和强大。

## React18组件开发

### 函数组件与类组件对比

在 React 中，组件可以分为两种类型：函数组件（Functional Components）和类组件（Class Components）。这两种类型的组件在定义上和使用上有明显的区别。

#### 函数组件

函数组件是一种简洁的方式，用于定义组件。它们通常用于表示简单的 UI 结构，或在渲染时只需要渲染逻辑而不需要状态或生命周期方法。

```jsx
// 一个简单的函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用函数组件
const element = <Welcome name="World" />;

类组件

类组件是 React 早期实现组件的一种方式。类组件可以包含状态（State）、生命周期方法，并且可以使用 React 生命周期方法来控制组件的生命周期。

// 定义一个类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 使用类组件
const element = <Welcome name="World" />;

Hooks的使用与实践

React Hooks 是 React 16.8 引入的一个新特性，它允许你在不编写类的情况下使用状态（State）和其他 React 功能。Hooks 提供了更简洁和灵活的方式来管理组件状态和生命周期。

使用useState

useState Hook 允许你在函数组件中使用状态。useState 返回一个包含两个元素的数组：当前状态和更新状态的函数。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

使用useEffect

useEffect Hook 允许你在函数组件中执行副作用操作，如数据获取、订阅或手动更改 DOM。useEffect 在每次渲染后都会执行，除非你使用了 useEffect 的第二个参数来指定依赖项。

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

使用useContext与useReducer

对于更复杂的状态管理需求，可以使用 useContext 和 useReducer Hook。useContext 用于访问上下文值，useReducer 用于处理更为复杂的状态逻辑。

import React, { useContext, useReducer, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemeToggle() {
  const [theme, setTheme] = useContext(ThemeContext);

  return (
    <div>
      <p>Theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <ThemeToggle />
    </ThemeContext.Provider>
  );
}

export default App;

状态管理

状态管理是 React 应用开发中的一个重要部分。React 提供了多种方式来管理组件的状态，包括 useState 和 useReducer。

使用useState管理组件状态

useState Hook 是一个非常简单的状态管理工具，适用于简单的状态管理需求。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

使用useContext和useReducer实现复杂状态管理

对于更复杂的状态管理需求，可以使用 useContext 和 useReducer Hook。useContext 用于访问上下文值，useReducer 用于处理更为复杂的状态逻辑。

import React, { useContext, useReducer, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemeToggle() {
  const [theme, setTheme] = useContext(ThemeContext);

  return (
    <div>
      <p>Theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <ThemeToggle />
    </ThemeContext.Provider>
  );
}

export default App;

生命周期与优化

React18生命周期的变迁

React 18 中，生命周期方法已经被 Hooks 所取代。但为了理解为什么要使用 Hooks，了解 React 16 中的生命周期方法仍然非常重要。

componentWillMount 和 componentDidMount
componentWillReceiveProps 和 shouldComponentUpdate
componentWillUpdate 和 componentDidUpdate

在 React 18 中，这些生命周期方法已经被 Hooks 所取代。例如：

componentDidMount 对应于 useEffect。
componentWillReceiveProps 和 shouldComponentUpdate 对应于 useEffect 的第二个参数数组。
componentWillUpdate 和 componentDidUpdate 也被 useEffect 替代。

使用useEffect替代生命周期方法

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

性能优化技巧

性能优化在大规模的 React 应用中非常重要。以下是一些常见的性能优化技巧：

批量更新: React 18 自动将状态更新批量处理，从而减少渲染次数。你可以使用 React.useSyncExternalStore 和 React.useTransition 来进一步优化性能。
懒加载和代码分割: 使用 React 的动态导入来实现代码分割，从而减少初始加载时间。
虚拟 DOM: React 的虚拟 DOM 机制可以减少实际 DOM 操作，提高性能。
memo 化组件: 使用 React.memo 来避免不必要的重新渲染。

使用React.useSyncExternalStore

import React from 'react';

function Counter({ syncState }) {
  const [count, setCount] = React.useState(0);

  React.useSyncExternalStore(
    syncState.subscribe,
    syncState.getSnapshot,
    () => count
  );
  setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

路由与导航

React Router基础使用

React Router 是一个用于管理应用中不同路由的库。它允许你在应用中定义多个页面，并根据 URL 路径导航到不同的页面。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

路由与导航的最佳实践

为了确保路由和导航的正确使用，可以遵循以下最佳实践：

使用 Switch 组件: 使用 Switch 组件确保每次只有一个路由匹配成功。
使用 exact 属性: 使用 exact 属性确保精确匹配路由。
代码分割: 使用动态导入来分割代码，减少初始加载时间。
使用 useLocation 和 useHistory Hook: 使用这些 Hook 来获取 URL 信息和导航。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useLocation, useHistory } from 'react-router-dom';

function App() {
  const location = useLocation();
  const history = useHistory();

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch location={location}>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

实战案例解析

从零开始构建一个React18项目

构建一个简单的 React18 项目，包括设置环境、创建组件、添加路由和状态管理。

设置环境

首先，安装 Node.js 和 npm。然后，创建一个新的 React 项目：

npx create-react-app my-app
cd my-app
npm start

创建组件

创建一些简单的组件，例如 Header、Footer 和 MainContent。

// Header.js
import React from 'react';

function Header() {
  return (
    <header>
      <h1>My App</h1>
    </header>
  );
}

export default Header;

// Footer.js
import React from 'react';

function Footer() {
  return (
    <footer>
      <p>Copyright © 2023</p>
    </footer>
  );
}

export default Footer;

// MainContent.js
import React from 'react';

function MainContent() {
  return (
    <div>
      <p>Welcome to my app!</p>
    </div>
  );
}

export default MainContent;

添加路由

使用 React Router 来管理应用的路由。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import MainContent from './MainContent';

function App() {
  return (
    <Router>
      <div>
        <Header />
        <main>
          <Switch>
            <Route exact path="/">
              <MainContent />
            </Route>
          </Switch>
        </main>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

状态管理

使用 useState 和 useReducer 来管理组件状态。

import React, { useState, useReducer } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <Header />
        <main>
          <Route exact path="/">
            <Counter />
          </Route>
        </main>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

项目部署与上线

部署 React 项目可以使用多种方式，包括 GitHub Pages、Netlify、Vercel 等。以下是如何使用 Netlify 部署 React 项目的步骤：

注册并登录 Netlify。
创建新的站点：点击“新建站点”按钮，选择“从 GitHub 或 GitLab”。
连接仓库：选择你的 GitHub 或 GitLab 仓库，并按照提示进行操作。
配置构建设置：在 Netlify 的“构建设置”中，设置构建命令为 npm run build，并设置构建输出目录为 build。
部署站点：点击“部署站点”按钮，Netlify 会自动从你的仓库中拉取代码并进行构建和部署。

# 在项目根目录执行以下命令
npm run build

构建项目

运行以下命令来构建项目：

npm run build

这将在 build 目录中生成一个静态文件夹，你可以将其上传到 Netlify 或其他静态文件托管服务。

部署到 Netlify

登录 Netlify。
创建新的站点：点击“新建站点”按钮，选择“从 GitHub 或 GitLab”。
连接仓库：选择你的 GitHub 或 GitLab 仓库，并按照提示进行操作。
配置构建设置：在 Netlify 的“构建设置”中，设置构建命令为 npm run build，并设置构建输出目录为 build。
部署站点：点击“部署站点”按钮，Netlify 会自动从你的仓库中拉取代码并进行构建和部署。