React18开发入门教程：轻松掌握React 18基础

本文详细介绍了React18开发的基础知识，包括新特性、环境搭建、组件开发和路由配置等内容。通过本文，读者可以轻松掌握React18的核心概念和实践技巧。文章还提供了创建和部署React应用的完整步骤，帮助开发者快速上手。

React18的新特性介绍

React 18 引入了一些重要的新特性，例如自动批量更新（Automatic Batching）、并发模式（Concurrent Mode）、Suspense for Data Fetching 等。这些新特性使得 React 应用在性能和用户体验方面有了更大的提升。

自动批量更新（Automatic Batching）

自动批量更新是一个强大的功能，它可以将多次状态更新合并成一次渲染，从而减少不必要的渲染次数。这一特性在使用 useEffect 等方法时尤为有用，因为它能够确保在状态更新后只执行一次副作用。

并发模式（Concurrent Mode）

并发模式引入了新的调度系统，允许 React 在渲染时进行并发操作。这种模式使得应用可以更好地处理延迟和优先级，从而提升用户体验。例如，在加载大组件或处理大量数据时，React 可以优先渲染用户可见的部分。

Suspense for Data Fetching

Suspense for Data Fetching 是一个新的概念，它可以简化异步数据获取的处理。通过引入 Suspense 组件，React 能够在组件挂载时延迟加载所需的资源，同时显示一个加载指示器。

React18与之前的版本对比

React 18 相比之前的版本，增强了对现代应用开发的支持。主要的区别在于以下几个方面：

1. 自动批量更新：React 18 引入了自动批量更新功能，这在之前的版本中是不存在的。自动批量更新有助于提高应用的渲染性能，减少不必要的渲染。
2. 并发模式：并发模式是 React 18 的重要新特性，它允许 React 在渲染时进行并发操作，并且可以优先渲染用户可见的部分。这在之前的版本中是不可实现的。
3. Suspense for Data Fetching：Suspense for Data Fetching 是 React 18 引入的一个新特性，它简化了异步数据获取的处理，使得开发更加高效和简洁。

以下是旧版本与新版本代码对比：

// 旧版本代码示例
import React from 'react';

class OldComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate() {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default OldComponent;

// 新版本代码示例
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Component did mount');
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  useEffect(() => {
    console.log('Component did update');
  }, [count]);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default NewComponent;

安装Node.js和npm

在开发 React 应用之前，需要确保已经安装了 Node.js 和 npm（Node Package Manager）。Node.js 是一个跨平台的 JavaScript 运行时环境，而 npm 是 Node.js 的包管理器。

安装Node.js

1. 访问 Node.js 官方网站（https://nodejs.org/）。
2. 根据自己的操作系统下载并安装相应的版本。
3. 安装完成后，可以通过命令行验证安装是否成功：

node -v
npm -v

验证命令会输出 Node.js 和 npm 的版本号，如果输出了有效的版本号，说明安装成功。

创建React项目

创建 React 项目需要使用 Create React App 工具。Create React App 是一个官方推荐的工具，用于快速搭建 React 项目。

使用Create React App启动项目

1. 打开命令行工具（如 Terminal 或 Command Prompt）。
2. 运行以下命令：

npx create-react-app my-app

该命令会在当前目录下创建一个名为 my-app 的新项目。执行完毕后，项目文件结构会如下所示：

my-app/
  ├── node_modules/
  ├── public/
  ├── src/
  ├── .gitignore
  ├── package.json
  ├── package-lock.json
  ├── README.md

1. 进入项目目录：

cd my-app

1. 启动开发服务器：

npm start

以上命令会在浏览器中打开一个新标签页，展示默认的 React 应用。

定义和使用函数组件

函数组件是 React 18 中最常用的组件类型。它们通过 JavaScript 函数来定义，接受 props 作为参数，返回一个表示视图的 React 元素。

创建简单的函数组件

1. 在 src 目录下创建一个名为 HelloWorld.js 的文件。
2. 在文件中编写如下代码：

import React from 'react';

function HelloWorld(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default HelloWorld;

1. 在 App.js 中引入并使用该组件：

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld name="World" />
    </div>
  );
}

export default App;

类组件的使用

类组件是通过继承 React.Component 或 React.PureComponent 来定义的。类组件可以包含状态和生命周期方法。

创建类组件

1. 在 src 目录下创建一个名为 Counter.js 的文件。
2. 在文件中编写如下代码：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

1. 在 App.js 中引入并使用该组件：

import React from 'react';
import Counter from './Counter';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <Counter />
      <HelloWorld name="World" />
    </div>
  );
}

export default App;

组件的属性和状态

组件可以通过属性（props）接收外部传入的数据，也可以通过状态（state）管理内部状态。

使用props与状态

1. 修改 HelloWorld.js 文件，使其接受 props 并使用它：

import React from 'react';

function HelloWorld(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default HelloWorld;

1. 修改 Counter.js 文件，使其使用状态：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

状态的定义和更新

状态（state）是组件内部的数据容器，用于存储和管理组件的状态。通过状态，组件可以在用户交互时动态地更新其内容。

定义状态

在类组件中，状态通过构造函数进行定义：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
      </div>
    );
  }
}

export default Counter;

更新状态

状态可以通过 setState 方法进行更新。setState 方法接收一个函数或对象作为参数，该函数或对象用于计算新的状态值：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

使用生命周期方法

生命周期方法是类组件在不同阶段执行的特殊方法。在 React 18 中，一些生命周期方法已经被废弃，而新的生命周期钩子（Hook）被引入。

生命周期方法

在 React 16 中，类组件的生命周期方法如下：

• constructor：组件实例化时调用。
• componentDidMount：组件挂载后调用。
• componentDidUpdate：组件更新后调用。
• componentWillUnmount：组件卸载前调用。

废弃的生命周期方法

React 18 中的一些生命周期方法已经被废弃，例如 componentWillMount 和 componentWillReceiveProps。这些方法在 React 18 中不再使用，而是通过新的 Hook 来实现相同的功能。

钩子（Hook）的使用

钩子（Hook）是 React 18 中引入的新特性，用于在不编写类组件的情况下使用 React 特性。常用的 Hook 包括 useState 和 useEffect。

使用useState

useState Hook 用于在函数组件中添加状态：

import React, { useState } from 'react';

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

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

使用useEffect

useEffect Hook 用于执行副作用操作，如数据获取、订阅和清理操作：

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

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

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

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

React Router的基本使用

React Router 是一个流行的 React 路由库，用于管理应用中的不同路由和导航。它允许应用根据 URL 的不同部分来渲染不同的组件。

安装React Router

在项目中安装 React Router：

npm install react-router-dom

基本路由配置

在 src 目录下创建一个 App.js 文件，并配置基本的路由：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Counter from './Counter';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/counter" element={<Counter />} />
        <Route path="/hello" element={<HelloWorld name="World" />} />
      </Routes>
    </Router>
  );
}

export default App;

为每个页面创建组件

为每个路由创建对应的组件，例如 Home.js、About.js、Counter.js 和 HelloWorld.js：

import React from 'react';

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

export default Home;

import React from 'react';

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

export default About;

路由配置与导航

路由配置可以包含嵌套路由、动态路由等多种形式。

嵌套路由

嵌套路由允许在一个路由下配置多个子路由。例如，在 /about 路径下配置两个子路由：

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Counter from './Counter';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />}>
          <Route path="team" element={<Team />} />
          <Route path="history" element={<History />} />
        </Route>
        <Route path="/counter" element={<Counter />} />
        <Route path="/hello" element={<HelloWorld name="World" />} />
      </Routes>
      <Link to="/about/team">Team</Link>
      <Link to="/about/history">History</Link>
    </Router>
  );
}

export default App;

动态路由的实现

动态路由允许通过参数化 URL 来匹配不同的路由。例如，可以在 /user/:id 路径下配置一个动态路由：

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import User from './User';
import Counter from './Counter';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<User />} />
        <Route path="/counter" element={<Counter />} />
        <Route path="/hello" element={<HelloWorld name="World" />} />
      </Routes>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/user/123">User 123</Link>
      <Link to="/counter">Counter</Link>
      <Link to="/hello">Hello World</Link>
    </Router>
  );
}

export default App;

import React from 'react';

function User({ match }) {
  let { id } = match.params;
  return <h1>User ID: {id}</h1>;
}

export default User;

实现一个简单的待办事项应用

待办事项应用是一个典型的前端应用，可以用来学习和实践 React 的各种特性。本节将详细说明如何实现一个简单的待办事项应用。

项目结构

首先，创建项目的基本结构：

1. 创建文件夹和文件：

mkdir src/components
mkdir src/styles
touch src/components/AddItem.js
touch src/components/Item.js
touch src/components/TodoList.js
touch src/App.js
touch src/index.js
touch src/App.css

1. 配置 App.js：

import React from 'react';
import TodoList from './components/TodoList';
import './App.css';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

实现组件

接下来，实现各个组件的功能。

TodoList.js

import React, { useState } from 'react';
import Item from './Item';
import AddItem from './AddItem';

function TodoList() {
  const [items, setItems] = useState([]);

  const handleAddItem = (item) => {
    setItems([...items, { id: items.length + 1, text: item }]);
  };

  const handleDeleteItem = (id) => {
    setItems(items.filter((item) => item.id !== id));
  };

  return (
    <div className="TodoList">
      <AddItem onAddItem={handleAddItem} />
      <ul>
        {items.map((item) => (
          <Item key={item.id} id={item.id} text={item.text} onDelete={handleDeleteItem} />
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

AddItem.js

import React, { useState } from 'react';

function AddItem({ onAddItem }) {
  const [itemText, setItemText] = useState('');

  const handleAddItem = () => {
    onAddItem(itemText);
    setItemText('');
  };

  return (
    <div>
      <input
        type="text"
        value={itemText}
        onChange={(e) => setItemText(e.target.value)}
      />
      <button onClick={handleAddItem}>Add</button>
    </div>
  );
}

export default AddItem;

Item.js

import React from 'react';

function Item({ id, text, onDelete }) {
  return (
    <li>
      {text}
      <button onClick={() => onDelete(id)}>Delete</button>
    </li>
  );
}

export default Item;

打包与部署

完成应用开发后，可以使用 npm run build 命令将应用打包，然后将打包后的文件部署到服务器上。

npm run build

打包后的文件位于 build 目录下，可以将该目录下的文件上传到服务器上，例如使用 scp 命令：

scp -r build/* user@server:/path/to/deploy

调试与优化建议

在开发过程中，可能会遇到各种调试和性能优化的问题。以下是一些建议：

调试建议

1. 使用 React 开发者工具：浏览器插件（如 Chrome 的 React 开发者工具）可以帮助调试 React 组件，查看组件的状态和 props。
2. 添加调试日志：在组件的关键位置添加 console.log 语句，帮助追踪变量的变化。
3. 使用断点：在代码编辑器中设置断点，帮助调试代码执行过程。

性能优化建议

1. 减少不必要的渲染：通过 React.memo 和 useMemo 避免不必要的渲染。
2. 优化状态更新：使用 React.memo 和 useMemo 优化状态更新，避免不必要的计算。
3. 使用 useMemo 和 useCallback：这些 Hook 可以帮助优化性能，避免不必要的计算。

部署上线

在完成项目开发后，需要将项目打包并部署到服务器上，以实现线上运行。

打包步骤

1. 运行打包命令：

npm run build

该命令会将项目打包到 build 目录下。

部署步骤

1. 上传文件：使用 scp 或 FTP 工具将 build 目录下的文件上传到服务器上。

scp -r build/* user@server:/path/to/deploy

1. 配置服务器：确保服务器上的 index.html 文件能够正确指向打包后的文件。

2. 启动服务器：启动服务器，使应用能够通过 URL 访问。

通过以上步骤，可以将 React 18 应用成功部署上线，供用户访问。

通过本教程，您已经掌握了 React 18 的基础概念与开发实践。从环境搭建到组件开发，再到路由配置和项目部署，您应当能够轻松构建出完整的 React 应用。希望这篇教程能够帮助您更好地理解和使用 React 18，在实际项目中发挥其优势。