React19 新特性 – 附带代码示例的更新

ReactJS 是前端开发世界中最流行的 UI 库之一。我喜欢 React 的原因之一就是它背后的团队以及社区对它的热情。

当社区提出对新功能和改进的需求时，团队会倾听。

React 的未来令人兴奋而有趣。如果我必须用一句话来总结，我会说这几乎概括了一切：“少写代码，多实现功能。”

在本文中，我将分享 React 19 中的新特性，这样你就可以开始尝试其中一些功能，并了解正在发生的变化。

请记住，当我写这篇文章时，React 19 仍在开发中。确保你遵循 GitHub 上的官方指南和官方社交媒体上的团队，以了解最新的进展。

（本文内容参考：java567.com）

我们将涵盖以下内容：

1. React v19 中的新功能 - 概览
2. React 编译器
3. 服务器端组件
4. 动作
5. Web 组件
6. 文档元数据
7. 资产加载
8. 新的 React Hooks
   • 新的 use() 钩子
   • useFormStatus() 钩子
   • useFormState() 钩子
   • useOptimistic() 钩子
9. 我现在可以使用 React 19 吗？
10. 摘要

🧩 先决条件：

1. 对 ReactJS 的工作知识
2. 对 HTML 和 JavaScript 的工作知识
3. 在 ReactJS 中开发 Web 应用的基本实践经验

🌟 React v19 中的新特性 – 概述

以下是 React 19 将具有的新特性的快速概述：

• 🤖 React 编译器：React 正在努力实现一个新的编译器。目前，Instagram 已经在利用这项技术，它将在未来版本的 React 中发布。
• 🔥 服务器组件：经过多年的开发，React 引入了服务器组件的概念。您现在可以在 Next.js 中使用此功能。
• 💪 动作：动作还将彻底改变我们与 DOM 元素的交互方式。
• 🌇 文档元数据：另一个急需改进的方面即将到来，使开发人员能够用更少的代码实现更多功能。
• 💼 资源加载：这将使资源能够在后台加载，从而改善应用程序的加载时间和用户体验。
• ⚙️ Web 组件：这特别令人着迷：React 代码现在将使我们能够集成 Web 组件。我对此发展非常激动，因为它将开启无数可能性。
• 🪝 增强型钩子：令人兴奋的新钩子即将问世，将彻底改变我们的编码体验。

React 19 将解决 React 长期存在的挑战之一：过度重新渲染的问题。开发人员历来花费了大量时间来解决这个问题，这经常导致性能问题。

对导致重新渲染的代码进行持续追踪和优化工作一直是工程师们的重复任务。但是有了 React 19，这个问题将得到缓解。框架将自动处理重新渲染，简化开发流程。

以前，开发人员依赖 useMemo()、useCallback()、memo 等技术来管理重新渲染。但是在 React 19 中，这样的手动干预将不再必要。

框架将在幕后智能识别和记忆代码，从而产生更清晰和更有效的代码。

1. 🤖 🤖 React 编译器 🤖 🤖

目前，React 在状态变化时不会自动重新渲染。优化这些重新渲染的一种方式是手动使用 useMemo()、useCallback() 和 memo API。根据 React 团队的说法，这是一种“合理的手动妥协”。他们的愿景是让 React 管理这些重新渲染。

但是 React 团队意识到手动优化很繁琐，而社区的反馈鼓励他们解决这个问题。

因此，React 团队创建了“React 编译器”。React 编译器现在将管理这些重新渲染。React 将自动决定何时以及如何更改状态并更新 UI。

有了这个，我们开发人员不再需要手动操作。这也意味着不再需要使用 useMemo()、useCallback() 和 memo。

我喜欢 React 的一件事是，在向外界引入新的突破性变化之前，React 团队首先在他们的产品上使用这些新功能 😍。目前，React 编译器正在 Instagram 的生产环境中运行。

2. 🔥🔥 服务器组件 🔥🔥

如果你还没有听说过服务器组件，那你就错过了 React 和 Next.js 中最令人兴奋的发展之一。

直到现在，React 组件主要在客户端上运行。但是 React 正在引入在服务器端运行组件的创新概念。

服务器组件的概念已经流传多年，Next.js 是第一个在生产环境中实现它们的先驱。从 Next.js 13 开始，默认情况下，所有组件都是服务器组件。要使组件在客户端上运行，你需要使用“use client”指令。

在 React 19 中，服务器组件将直接集成到 React 中，带来许多优势：

• SEO：服务器渲染的组件通过向网络爬虫提供更可访问的内容来增强搜索引擎优化。
• 性能提升：服务器组件有助于更快地加载页面和改善整体性能，特别是对于内容密集型应用程序。
• 服务器端执行：服务器组件使在服务器上执行代码变得无缝和高效，使诸如 API 调用之类的任务变得轻松。

这些优点凸显了服务器组件在现代 Web 开发中的转变潜力。

React 中所有组件默认都是客户端的。只有当你使用 ‘use server’ 时，组件才是服务器组件。

下面的代码是在 React 中，但将在服务器端运行。你只需要在组件的第一行添加 ‘use server’。这将使组件成为“服务器组件”。它不会在客户端运行，只会在服务器端运行。

那么你如何使用服务器组件呢？

我们可以在同一项目中的任何 React 组件中导入 requestUsername。在导入服务器组件后，我们可以使用“Actions”（我们很快会学习到）执行特定任务。

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  if (canRequest(username)) {
    // ...
    return 'successful';
  }
  return 'failed';
}

在操作部分，你将了解更多关于如何使用服务器组件的信息。

目前 Next.js 支持服务器端组件。你可以在这里了解更多关于服务器组件的信息。随着 React19 的到来，服务器组件支持将直接在 React 中提供。

3. 💪💪 动作 💪💪

在版本 19 中，另一个令人兴奋的新功能是动作。这将是我们如何处理表单的变革者。

动作将让你将动作集成到 HTML 标签 中。简单来说，你将能够用动作替换 onSubmit 事件。这些动作是 HTML 表单属性。

在使用动作之前：

在下面的代码片段中，我们将利用 onSubmit React 事件，该事件在表单提交时触发搜索方法的执行。但重要的是要注意，当前搜索方法仅在客户端上运行。我们仅限于使用 React 事件进行表单提交，意味着搜索无法在服务器端执行。

<form onSubmit={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

在使用动作之后：

随着服务器组件的引入，动作可以在服务器端执行。在我们的 JSX 中，通过 ，我们可以省略 onSubmit 事件，并使用 action 属性。action 属性的值将是一个方法，用于在客户端或服务器端提交数据。

你可以使用动作执行同步和异步操作，简化数据提交管理和状态更新。目标是使处理表单和数据更加简单。

让我们看一个例子，看看这是如何工作的：

"use server"

const submitData = async (userData) => {
    const newUser = {
        username: userData.get('username'),
        email: userData.get('email')
    }
    console.log(newUser)
}
const Form = () => {
    return <form action={submitData}>
        <div>
            <label>Name</label>
            <input type="text" name='username'/>
        </div>
        <div>
            <label>Name</label>
            <input type="text" name="email" />
        </div>
       
 <button type='submit'>Submit</button>
    </form>
}

export default Form;

在上面的代码中，submitData 是服务器组件中的动作。form 是一个客户端组件，它使用 submitData 作为动作。submitData 将在服务器上执行。客户端（form）和服务器（submitData）组件之间的通信只有通过动作属性才能实现。

我们可以使用表单和动作在客户端和服务器端处理数据提交。

在增强钩子部分，你将了解到三个新的钩子，这也将增强你处理表单的方式。

4. ⚙️⚙️ Web 组件 ⚙️⚙️

大约 5 年前，我深入研究了 Web 组件的世界。自那以后，我一直被它们的潜力所吸引。如果你不熟悉 Web 组件，让我为你解释一下：

Web 组件允许你使用原生 HTML、CSS 和 JavaScript 创建自定义组件，并将它们无缝地整合到你的 Web 应用程序中，就像它们是标准 HTML 标签一样。相当令人惊讶，对吧？

目前，在 React 中集成 Web 组件并不简单。通常情况下，你要么需要将 Web 组件转换为 React 组件，要么安装额外的包并编写额外的代码，以使 Web 组件与 React 协同工作。这可能很令人沮丧。

幸运的是，React 19 将帮助你更轻松地将 Web 组件集成到你的 React 代码中。如果你遇到一个非常有用的 Web 组件，比如一个轮播图，你可以在不需要将其转换为 React 代码的情况下轻松地将其整合到你的 React 项目中。

这简化了开发，并允许你在 React 应用程序中利用现有的 Web 组件生态系统。

但是目前还没有关于代码将如何呈现的进一步细节。不过，我对这种从 React 团队那里获得的实现细节非常期待。

5. 🌇🌇 文档元数据 🌇🌇

像“title”、“meta 标签”和“description”之类的元素在优化 SEO 和确保可访问性方面至关重要。在 React 中，单页应用程序普遍存在，跨不同路由管理这些元素可能有些麻烦。

目前，开发人员通常倾向于编写自定义代码，或使用类似 react-helmet 的包来处理路由更改并相应地更新元数据。这个过程可能是重复的，并且容易出错，特别是在处理像 meta 标签这样对 SEO 敏感的元素时。

在之前：

import React, { useEffect } from 'react';

const HeadDocument = ({ title }) => {
  useEffect(() => {
    document.title = title;

 	const metaDescriptionTag = document.querySelector('meta[name="description"]');
    if (metaDescriptionTag) {
    metaDescriptionTag.setAttribute('content', 'New description');
    }
  }, [title]);

  return null;
};

export default HeadDocument;

在上面的代码中，我们有一个组件 HeadDocument，负责根据 props 更新标题和 meta 标签。我们在 useEffect 钩子中更新这些。我们还使用 JavaScript 来更新标题和 meta 标签。该组件将在路由更改时更新。这并不是一个干净的方式来做这件事。

在之后：

使用 React19，我们可以直接在我们的 React 组件中使用 title 和 meta 标签：

Const HomePage = () => {
  return (
    <>
      <title>Freecodecamp</title>
      <meta name="description" content="Freecode camp blogs" />
      // 页面内容
    </>
  );
}

在 React 中以前是不可能的。唯一的方法是使用像 react-helmet 这样的包。

6. 💼💼 资源加载 💼💼

在 React 中，你需要仔细管理应用程序的加载体验和性能，特别是对于图像和其他资源文件。

通常情况下，浏览器首先渲染视图，然后是样式表、字体和图像。这可能导致从未样式化（或未样式化内容的闪烁）到样式化视图的闪烁。

为了解决这个问题，开发人员通常会添加自定义代码来检测这些资源何时准备就绪，确保仅在一切加载完毕后显示视图。

在 React 19 中，图像和其他文件将在用户浏览当前页面时在后台加载。这个改进应该有助于改善页面加载时间并减少等待时间。

此外，React 还引入了用于资源加载的生命周期 Suspense，包括脚本、样式表和字体。这个特性使 React 能够确定内容何时准备好显示，消除了任何“未样式化”闪烁。

还有新的资源加载 API，如 preload 和 preinit，可以提供更大的控制权，使资源何时加载和初始化。

通过允许资源在后台异步加载，React 19 将最小化等待时间，并确保用户可以在没有中断的情况下与内容交互。这种优化不仅提升了 React 应用程序的性能，也为用户提供了更愉快的浏览体验。

7. 🪝🪝 新的 React Hooks 🪝🪝

React Hooks 已经成为该库中最受欢迎的功能之一。你很可能多次使用了 React 内置的钩子，并且也尝试过创建自己的自定义钩子。Hooks 如此受欢迎，以至于它们已经成为了 React 编程模式。

在 React 19 中，我们使用 useMemo、forwardRef、useEffect 和 useContext 的方式将发生变化。这主要是因为将引入一个新的钩子 use。

🥁 useMemo():

在 React19 之后，你不再需要使用 useMemo() 钩子，因为 React 编译器将自行进行记忆。

之前：

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

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  // 缓存检查输入值是否为空的结果
  const isInputEmpty = useMemo(() => {
    console.log('检查输入是否为空...');
    return inputValue.trim() === '';
  }, [inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入一些内容..."
      />
      <p>{isInputEmpty ? '输入为空' : '输入不为空'}</p>
    </div>
  );
}

export default ExampleComponent;

之后：

在下面的示例中，你可以看到在 React19 之后，我们不需要再使用 useMemo 缓存值了 - React19 将在底层自行处理。代码更加简洁：

import React, { useState } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  const isInputEmpty = () => {
    console.log('检查输入是否为空...');
    return inputValue.trim() === '';
  });

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入一些内容..."
      />
      <p>{isInputEmpty ? '输入为空' : '输入不为空'}</p>
    </div>
  );
}

export default ExampleComponent;

🥁 forwardRef()

ref 现在将作为 props 传递，而不是使用 forwardRef() 钩子。这将简化代码。因此，在 React19 之后，你将不再需要使用 forwardRef()。

之前：

这是在 React 19 之前使用 forwardRef() 的示例：

import React, { forwardRef } from 'react';

const ExampleButton = forwardRef((props, ref) => (
  <button ref={ref}>
    {props.children}
  </button>
));

之后：

ref 可以作为 props 传递。不再需要 forwardRef()。

import React from 'react';

const ExampleButton = ({ ref, children }) => (
  <button ref={ref}>
    {children}
  </button>
);

🥁 新的 use() 钩子

React19 将引入一个新的钩子，称为 use()。这个钩子将简化我们如何使用 promises、async 代码和 context。

这是钩子的语法：

const value = use(resource);

下面的代码是一个示例，展示了如何使用 use 钩子发起 fetch 请求：

import { use } from "react";

const fetchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
  };
  
  const UsersItems = () => {
    const users = use(fetchUsers());
  
    return (
      <ul>
        {users.map((user) => (
          <div key={user.id} className='bg-blue-50 shadow-md p-4 my-6 rounded-lg'>
            <h2 className='text-xl font-bold'>{user.name}</h2>
            <p>{user.email}</p>
          </div>
        ))}
      </ul>
    );
  }; 
export default UsersItems;

让我们了解一下代码：

1. fetchUsers 负责进行 GET 请求。
2. 我们使用 use 钩子执行 fetchUsers，而不是使用 useEffect 或 useState 钩子。
3. useState 钩子的返回值是 users，其中包含 GET 请求的响应（users）。
4. 在返回块中，我们使用 users 进行映射，并创建列表。

另一个我们可以使用新钩子的地方是与 Context 一起。Context API 是一种在 React 中管理全局状态而无需使用任何状态管理库的流行方式。使用 use 钩子，context 钩子的代码将如下所示。

现在，不再使用 useContext()，而是使用 use(context)。

import { createContext, useState, use } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const Card = () => {
  // use Hook()
  const { theme, toggleTheme } = use(ThemeContext);

  return (
    <div
      className={`p-4 rounded-md ${
        theme === 'light' ? 'bg-white' : 'bg-gray-800'
      }`}
    >
      <h1
        className={`my-4 text-xl ${
          theme === 'light' ? 'text-gray-800' : 'text-white'
        }`}
      >
        Theme Card
      </h1>
      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
       Hello!! use() hook
      </p>
      <button
        onClick={toggleTheme}
        className='bg-blue-500 hover:bg-blue-600 text-white rounded-md mt-4 p-4'
      >
        {theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
      </button>
    </div>
  );
};

const Theme = () => {
  return (
    <ThemeProvider>
      <Card />
    </ThemeProvider>
  );
};

export default Theme

让我们了解一下代码：

1. ThemeProvider 负责上下文提供。

2. 卡片是我们要消耗上下文的组件。为此，我们将使用新的 use 钩子来消耗上下文。其他部分与 React19 之前的代码相同。

在 React19 中，我们还有新的钩子来处理表单状态和数据。这将使处理表单变得更加流畅和简单。将这些钩子与动作（React19 的新功能）结合使用，将使处理表单和数据更加简单。

🥁 useFormStatus() 钩子

React19 中的这个新钩子将帮助你更好地控制创建的表单。它将提供关于上次表单提交的状态信息。

这是钩子的语法：

const { pending, data, method, action } = useFormStatus();

或者更简单的版本：

const { status } = useFormStatus()

让我们看看这里发生了什么：

1. pending：如果表单处于挂起状态，则为 true，否则为 false。
2. data：一个实现 FormData 接口的对象，包含父级 正在提交的数据。
3. method：HTTP 方法 – GET 或 POST。默认情况下为 GET。
4. action：一个函数引用。

这个钩子将用于显示挂起状态和用户提交的数据。

这是一个代码示例：

import { useFormStatus } from "react-dom";

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>{status.pending ? '正在提交...' : '提交'}</button>;
}

const formAction = async () => {
  // 模拟延迟 2 秒
  await new Promise((resolve) => setTimeout(resolve, 3000));
}

const FormStatus = () => {
  return (
    <form action={formAction}>
      <Submit />
    </form>
  );
};

export default FormStatus;

让我们了解一下上述代码中发生了什么：

1. Submit 是一个方法 – 表单的动作来提交表单。这个方法将检查来自 useFormStatus 的状态，让我们知道状态.pending 是 true 还是 false。
2. 根据 status.pending，我们可以在 UI 中显示消息。
3. formAction 是一个模拟延迟提交的假方法。

在上面的代码中，当表单提交时，从 useFormStatus 钩子中我们将得到一个 pending 状态。当 pending 为 true 时，在 UI 上将显示 “正在提交…” 文本。一旦 pending 为 false，“正在提交” 文本将更改为 “已提交”。

这个钩子非常强大，当你想要知道表单提交的状态（是否挂起）并相应地显示数据时，它会很有帮助。

🥁 useFormState() 钩子

React19 中的另一个新钩子是 useFormState。它允许你基于表单提交的结果来更新状态。

这是钩子的语法：

const [state, formAction] = useFormState(fn, initialState, permalink?);

1. fn：当表单提交或按钮被按下时要调用的函数。
2. initialState：你希望初始状态是什么值。它可以是任何可序列化的值。在首次调用后，此参数将被忽略。
3. permalink：这是可选的。一个 URL 或页面链接，如果 fn 将在服务器上运行，则页面将重定向到 permalink。

这个钩子将返回：

1. state：初始状态将是我们传递给 initialState 的值。
2. formAction：一个 action，将传递给表单动作。这将在状态中可用。

下面是它的一个工作示例：

import { useFormState} from 'react-dom';

const FormState = () => {
    const submitForm = (prevState, queryData) => {
        const name =  queryData.get("username");
        console.log(prevState); // 表单之前的状态
        if(name === 'john'){
            return {
                success: true,
                text: "欢迎"
            }
        }
        else{
            return {
                success: false,
                text: "错误"
            }
        }
    }
    const [ message, formAction ] = useFormState(submitForm, null)
    return <form action={formAction}>
        <label>姓名</label>
        <input type="text" name="username" />
        <button>提交</button>
        {message && <h1>{message.text}</h1>}
    </form>
}

export default FormState;

让我们了解一下上述代码中发生了什么：

1. submitForm 是负责表单提交的方法。这是一个 Action（记住 React19 的新功能）。
2. 在 submitForm 中，我们检查表单的值。然后，根据它是否成功或显示错误，我们返回特定的值和消息。在上面的代码示例中，如果名称不是 “John”，则会返回一个错误。
3. 我们还可以检查表单的 prevState。初始状态将是 null，之后它将返回表单的 prevState。

在运行此示例时，如果名称是 John，你将看到一个 “欢迎” 消息 - 否则它将返回 “错误”。

🥁 useOptimistic() 钩子

useOptimistic 是一个 React 钩子，允许你在异步操作进行中显示不同的状态，根据 React 文档。

这个钩子将有助于提升用户体验，并应该导致更快的响应。这对需要与服务器交互的应用程序非常有用。

以下是 useOptimistic 钩子的语法：

const [ optimisticMessage, addOptimisticMessage] = useOptimistic(state, updatefn)

例如，当响应正在进行中时，我们可以显示一个 “state” 来给用户一个立即的响应。一旦实际响应从服务器返回，“optimistic” 状态将被替换为它。

useOptimistic 钩子将立即更新 UI，假设请求将成功。之所以称为 “optimistic”，是因为用户将看到执行操作的乐观（成功）结果，即使实际操作需要时间才能完成。

让我们看看如何实现 useOptimistic 钩子。以下代码在单击提交按钮 时显示乐观状态（正在发送…），直到响应返回。

import { useOptimistic, useState } from "react";

const Optimistic = () => {
  const [messages, setMessages] = useState([
    { text: "嘿，我是初始的！", sending: false, key: 1 },
  ]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );

  async function sendFormData(formData) {
    const sentMessage = await fakeDelayAction(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }

  async function fakeDelayAction(message) {
    await new Promise((res) => setTimeout(res, 1000));
    return message;
  }

  const submitData = async (userData) => {
    addOptimisticMessage(userData.get("username"));

    await sendFormData(userData);
  };

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (正在发送...)</small>}
        </div>
      ))}
      <form action={submitData}>
        <h1>OptimisticState 钩子</h1>
        <div>
          <label>用户名</label>
          <input type="text" name="username" />
        </div>
        <button type="submit">提交</button>
      </form>
    </>
  );
};

export default Optimistic;

1. fakeDelayAction 是一个用于延迟提交事件的假方法。这是为了显示乐观状态。
2. submitData 是动作。这个方法负责表单提交。这也可能是异步的。
3. sendFormData 负责将表单发送到 fakeDelayAction
4. 设置默认状态。messages 将在 useOptimistic() 中作为输入使用，并将在 optimisticMessages 中返回。

const [messages, setMessages] = useState([{ text: "嘿，我是初始的！", sending: false, key: 1 },]);

现在，让我们进一步了解：

在 submitData 中，我们使用 addOptimisticMessage。这将添加表单数据，以便在 optimisticMessage 中可用。我们将使用它来在 UI 中显示消息：

{optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (正在发送...)</small>}
        </div>
      ))}

以下是我们学到的 3 个表单钩子的摘要：

新钩子摘要

❓我现在可以使用 React 19 吗？

截至目前，上文提到的所有功能都已经在 canary 版本发布了。你可以在这里了解更多。如 React 团队建议的，目前请不要将这些功能用于客户/用户面向的应用程序。可以随意尝试进行自己的学习，或者仅供娱乐。

如果你想知道 React19 的发布时间安排，可以关注 Canary Releases 获取更新信息。

🌟 摘要

本文涵盖了很多内容。以下是即将推出的 React v19 中令人兴奋的变化的简要总结：

1. 🤖 将在未来版本的 React 中引入一个新的 React 编译器。
2. 🙌🏽 现在我们将拥有自动重新渲染、记忆化和状态以及 UI 的优化。
3. 🔮 将有一些新的钩子，比如 use()，它将有助于简化 promises 和异步代码。
4. ⚙️ 现在 React 中将支持服务器端组件。
5. 📝 我们将通过 actions、useFormStatus()、useStatusForm() 和 useOptimistic() 实现更好的表单处理。
6. 🖼 React 将通过 suspense 在底层优化资产加载以增强性能。
7. 🔗 React 将与 Web 组件集成。

如果你喜欢本文，别忘了点赞和关注。

（本文内容参考：java567.com）