Javascript

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

本文主要是介绍React18开发入门教程:轻松掌握React 18基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
概述

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

React18开发入门教程:轻松掌握React 18基础
React18简介

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.ComponentReact.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 中的一些生命周期方法已经被废弃,例如 componentWillMountcomponentWillReceiveProps。这些方法在 React 18 中不再使用,而是通过新的 Hook 来实现相同的功能。

钩子(Hook)的使用

钩子(Hook)是 React 18 中引入的新特性,用于在不编写类组件的情况下使用 React 特性。常用的 Hook 包括 useStateuseEffect

使用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.jsAbout.jsCounter.jsHelloWorld.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.memouseMemo 避免不必要的渲染。
  2. 优化状态更新:使用 React.memouseMemo 优化状态更新,避免不必要的计算。
  3. 使用 useMemouseCallback:这些 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,在实际项目中发挥其优势。

这篇关于React18开发入门教程:轻松掌握React 18基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!