React v19稳定版发布12.5

在这里插入图片描述

🤖 作者简介:水煮白菜王 ,一位资深前端劝退师 👻
👀 文章专栏: 前端专栏 ,记录一下平时在博客写作中,总结出的一些开发技巧✍。
感谢支持💕💕💕

目录

  • React v19,他来了!
  • React v19 新特性一览
    • Actions:
    • 异步数据更新操作Actions,会自动管理提交数据
    • New hook: useActionState
    • New hook: useOptimistic
    • 新API: use
    • Server Components支持
  • React 19 中的改进
    • ref作为 prop
    • 支持 `<Context> `
    • ref 的回调清理
    • 支持Document Metadata
    • 支持stylesheets样式表
    • 支持异步async脚本
    • 支持预加载资源
    • 更好的 Error报告及hydration错误改进
    • 支持自定义元素

React 19 的第一个版本是在2024年4月发布的,具体来说是4月25日发布了版本号为19.0.0-Beta的测试版。这个版本主要是面向各大库以确保它们与 React 19 的兼容性。因此,对于开发者而言,建议先升级至最新的稳定版… 所以

React v19,他来了!

React 团队于 2024 年 12 月 5 日正式发布了 React v19 稳定版,现已在 npm 上可用。开发者们可以通过 React 19 升级指南获取详细的升级步骤和注意事项。本文将介绍在React v19 版本中给大家都带来了哪些新特性和改进。

React v19 新特性一览

功能名称描述
ActionsActions 现在支持异步数据更新操作,允许在 Transition 中执行副作用(如 API 请求)。每个 Transition 可以包含一个或多个 Actions,这些 Actions 在后台更新状态,最后通过一次提交来刷新 UI。此外,Actions 支持错误处理和乐观更新useOptimistic,确保用户界面在等待后台任务完成时保持响应。
useActioState这是一个新的 Hook,用于在 Transition 中调度 Actions进行排序。它提供了访问 Action 的状态和 pending 状态的能力。useAction 接受一个 reducer 函数,用于调用 Actions,以及一个初始状态对象。还可以接受一个可选字符串参数,当操作传递给 form prop 时,该字符串可用于表单中的渐进式增强。
useOptimistic此 Hook 用于在过渡期间立即更新状态,提供一种乐观更新的方式。它返回当前状态及一个 set 函数,可以在过渡中调用来即时应用预期的最终状态值。一旦过渡完成,状态会自动更新为实际的新值。
use这是 React 19 引入的一个新 API,允许在渲染过程中读取资源。它可以接受 Promise 或 Context 对象。如果提供的是 Promise,则 React 将暂停渲染,直到 Promise 解析完成。此功能只能在 render 方法中使用,但可以根据条件调用。
ref 作为 propRefs 现在可以直接作为 props 传递给子组件,无需显式使用 forwardRef。这简化了 ref 的传递方式,使得代码更加简洁。
Suspense 同级预热当组件挂起(例如等待数据加载)时,React 不再等待整个同级树渲染完毕,而是立即提交最近的 Suspense 边界的回退内容。之后,React 会继续为其他暂停的兄弟组件安排渲染,提前启动惰性请求,从而加快整体渲染速度。
这项改进显著提升了用户体验,特别是在加载多个异步组件时。通过尽早展示部分可用的内容,用户可以更快地开始与页面互动,而不需要等待所有内容都准备好。
简洁的 <Context> 写法在 React 19 中,引入了更简洁的 Context 写法,可以直接使用 <Context> 代替 <Context.Provider>,简化了上下文提供者的使用。
ref 的回调清理React 19 支持从回调返回清理函数,允许在组件卸载时执行回调清理逻辑,确保资源释放和避免内存泄漏。
Document Metadata 支持现在 React v19 原生支持 <title><meta><link> 等文档元数据标签。这些标签可直接在组件中声明,React 会自动将它们提升至 <head> 或 document 部分,简化 SEO 和元数据管理逻辑,确保与服务端渲染、客户端渲染、流式 SSR 和服务器组件兼容。
增强的样式表管理React 19 增强了样式表的加载管理,通过引入 precedence 属性,React 可以动态调整样式表的插入顺序,确保正确的样式覆盖。此外,React 解决了由于样式优先规则导致的复杂性,允许在组件内实现可组合性的样式表功能。React 现在能够管理 DOM 中样式表(无论是外部 <link rel="stylesheet" href="..."> 还是内联 <style>...</style>)的插入位置,并提供与客户端上的并发渲染和服务器上的流式渲染的更深入集成。如果你告诉 React 你的样式表,它将自动处理样式表的加载顺序,确保在显示依赖于这些样式规则的内容之前加载必要的样式表(特别是外部样式表)。
异步脚本支持在 React 19 中,增强了对异步脚本的支持,允许在组件树的任何位置渲染脚本,并确保它们在所有渲染环境中被去重,从而只加载和执行一次,即使由多个组件渲染。这简化了脚本管理,避免了重复实例和重新定位的问题。
预加载资源支持React 19 引入了多项新 API,用于高效加载和预加载浏览器资源,从而简化构建高性能应用的过程。这些 API 确保资源加载不会成为用户体验的瓶颈,提供流畅、无阻碍的出色体验。
改进的错误处理React 19 改进了错误处理机制,消除了重复错误记录,并提供了处理捕获和未捕获错误的选项。现在,当渲染过程中出现错误并被 Error Boundary 捕获时,React 只会记录一次错误信息,并包含所有相关细节,避免了之前版本中多次抛出错误(如原始错误和自动恢复失败)的情况。此外,React 提供了关于错误发生位置的详细信息,帮助开发者更轻松地诊断和解决问题。
自定义元素支持React 19 增加了对自定义元素的全面支持,并通过了 Custom Elements Everywhere 的所有测试。这一改进解决了过去版本中使用自定义元素的困难,确保了 React 组件与 Web Components 标准无缝集成。使开发者能够更轻松地创建和使用自定义 HTML 元素,提升应用程序的灵活性和可维护性。
更多更新内容 👉react-blog 、GitHub发行版本v19.0.0

Actions:

React 应用程序中的一个常见用例是执行数据更改,然后更新状态作为响应。例如,当用户提交表单以更改其名称时,您将发出 API 请求,然后处理响应。过去,您需要手动处理待处理状态、错误、乐观更新和顺序请求。

在 React 19 中,增加了对在 transition 中使用异步函数的支持,以自动处理待处理Pending状态、错误、表单和乐观更新(useOptimistic)。

异步数据更新操作Actions,会自动管理提交数据

  • Pending 待处理状态:操作提供待处理状态,该状态从请求开始时开始,并在提交最终状态更新时自动重置。
  • Optimistic 更新:Actions 支持新的 useOptimistic 钩子,因此您可以在提交请求时向用户显示即时反馈。
  • 错误处理:操作提供错误处理,因此您可以在请求失败时显示 Error Boundaries,并自动将乐观更新恢复为其原始值。
  • Forms: 元素现在支持将函数传递给 和 props。将函数传递给 props 默认使用 Actions,并在提交后自动重置表单。
    此功能增强了 Transitions 的灵活性,使其能够更好地处理复杂的 UI 更新逻辑。
// Using pending state from Actions
function UpdateName({}) {const [name, setName] = useState("");const [error, setError] = useState(null);const [isPending, startTransition] = useTransition();const handleSubmit = () => {startTransition(async () => {const error = await updateName(name);if (error) {setError(error);return;} redirect("/path");})};return (<div><input value={name} onChange={(event) => setName(event.target.value)} /><button onClick={handleSubmit} disabled={isPending}>Update</button>{error && <p>{error}</p>}</div>);
}

New hook: useActionState

React 19 构建在 Actions 之上,引入了 useOptimistic 来管理乐观更新,并引入了一个新的钩子 React.useActionState 来处理 Action 的常见情况。在添加 Actions 来自动管理表单,并使用 useFormStatus 来支持表单中 Actions 的常见情况。
通过这个 Hook,开发者可以在不直接管理复杂状态的情况下轻松地触发 Actions,并跟踪它们的状态变化。这对于构建交互性强的应用程序特别有用。

在 React 19 中,上面的例子可以简化为:

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {const [error, submitAction, isPending] = useActionState(async (previousState, formData) => {const error = await updateName(formData.get("name"));if (error) {return error;}redirect("/path");return null;},null,);return (<form action={submitAction}><input type="text" name="name" /><button type="submit" disabled={isPending}>Update</button>{error && <p>{error}</p>}</form>);
}

为了简化 Actions 的常见情况,新增了一个名为 :useActionState

const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {const error = await updateName(newName);if (error) {// You can return any result of the action.// Here, we return only the error.return error;}// handle successreturn null;},null,
);

useActionState接受一个函数(“Action”),并返回一个包装好的 Action 来调用。这之所以有效,是因为 Actions 组合。调用包装的 Action 时,将返回 Action 的最后一个结果为 ,并将 Action 的待处理状态返回为 。useActionState data pending

注意:React.useActionState之前在 Canary 版本中调用,但已重命名并弃用 。ReactDOM.useFormStateuseFormState 。 useActionState文档

New hook: useOptimistic

这种方法提高了用户体验,因为用户不必等待服务器响应即可看到更改的结果

执行数据更改时,另一种常见的 UI 模式是在异步请求进行时乐观地显示最终状态。在 React 19 中,新增了一个名为 new hook 来简化此操作:useOptimistic

function ChangeName({currentName, onUpdateName}) {const [optimisticName, setOptimisticName] = useOptimistic(currentName);const submitAction = async formData => {const newName = formData.get("name");setOptimisticName(newName);const updatedName = await updateName(newName);onUpdateName(updatedName);};return (<form action={submitAction}><p>Your name is: {optimisticName}</p><p><label>Change Name:</label><inputtype="text"name="name"disabled={currentName !== optimisticName}/></p></form>);
}

当请求正在进行时,钩子将立即呈现。当更新完成或出错时,React 会自动切换回该值。useOptimistic optimisticName updateName currentName. useOptimistic 文档

新API: use

此 API 的引入简化了从服务器获取数据的过程,同时保证了良好的用户体验。通过让 React 处理加载状态,开发者可以专注于构建应用程序的核心逻辑。

例如,你可以用 来读取一个 promise,React 会 Suspend 直到 promise 解析:use

import {use} from 'react';function Comments({commentsPromise}) {// `use` will suspend until the promise resolves.const comments = use(commentsPromise);return comments.map(comment => <p key={comment.id}>{comment}</p>);
}function Page({commentsPromise}) {// When `use` suspends in Comments,// this Suspense boundary will be shown.return (<Suspense fallback={<div>Loading...</div>}><Comments commentsPromise={commentsPromise} /></Suspense>)
}

注意:use不支持在 render 中创建的 Promise。
如果你尝试将 render 中创建的 promise 传递给 ,React 会发出警告:
A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.
要修复,需要从支持 Promise 缓存的 suspense 驱动的库或框架中传递一个 Promise。React官方后面会计划发布功能,以便更轻松地在 render 中缓存 promise。

Server Components支持

React 19 的服务器组件提供了一种全新的渲染模式,在服务器上提前渲染组件,减少了客户端的渲染负担,并且无需引入额外工具链即可与现有项目无缝集成,支持在构建时或请求时生成组件。

React 19 中的改进

ref作为 prop

这一改变减少了不必要的样板代码,使 ref 的使用更加直观和方便,对于需要直接操作 DOM 元素的情况尤其有帮助。

从 React 19 开始,你现在可以作为函数组件的 prop 进行访问:ref

function MyInput({placeholder, ref}) {return <input placeholder={placeholder} ref={ref} />
}//...
<MyInput ref={ref} />

支持 <Context>

在 React v19 中,引入了简洁的 Context 写法,你可以渲染为 provider 而不是 :<Context><Context.Provider>,可以直接使用 <Context> 代替 <Context.Provider>

const ThemeContext = createContext('');function App({children}) {return (<ThemeContext value="dark">{children}</ThemeContext>);  
}

新的 Context providers 可以使用,React官方后面将发布一个 codemod 来转换现有的 providers。React官方在后面的版本中,会弃用 <Context><Context.Provider>

ref 的回调清理

React 19 支持从回调返回清理函数,允许在组件卸载时执行回调清理逻辑

<inputref={(ref) => {// ref created// NEW: return a cleanup function to reset// the ref when element is removed from DOM.return () => {// ref cleanup};}}
/>

支持Document Metadata

在 HTML 中,文档元数据标记保留用于放置在文档的部分中。在 React 中,决定哪些元数据适合应用程序的组件可能离你渲染的地方很远,或者 React 根本不渲染。过去,这些元素需要手动插入到 effect 中,或者通过 react-helmet 等库插入,并且在服务器渲染 React 应用程序时需要小心处理。
现在React v19 原生支持 <title><meta><link> 等文档元数据标签,这些标签可直接在组件中声明,React 会自动将资源提升至 <head> 或 document 部分,简化 SEO 和元数据管理逻辑,确保与服务端渲染、客户端渲染、流式 SSR 和服务器组件兼容。

function BlogPost({post}) {return (<article><h1>{post.title}</h1><title>{post.title}</title><meta name="author" content="Josh" /><link rel="author" href="https://twitter.com/joshcstory/" /><meta name="keywords" content={post.keywords} /><p>Eee equals em-see-squared...</p></article>);
}

注意:在开发上有可能仍然需要一个 Metadata library库,对于简单的用例,将文档元数据呈现为标记可能比较合适,但库可以提供更强大的功能,例如根据当前路由使用特定元数据覆盖通用元数据。这些功能使 react-helmet 等框架和库更容易支持元数据标签,而不是直接替换。

支持stylesheets样式表

在 React 19 中,增强了样式表的加载管理,通过引入 precedence 属性,React 可以动态调整样式表的插入顺序,确保正确的样式覆盖。此外,React 解决了由于样式优先规则导致的复杂性,允许在组件内实现可组合性的样式表功能。
React 现在能够管理 DOM 中样式表(无论是外部 <link rel="stylesheet" href="..."> 还是内联 <style>...</style>)的插入位置,并提供与客户端上的并发渲染和服务器上的流式渲染的更深入集成。如果你告诉 React 你的样式表,它将自动处理样式表的加载顺序,确保在显示依赖于这些样式规则的内容之前加载必要的样式表(特别是外部样式表)。

function ComponentOne() {return (<Suspense fallback="loading..."><link rel="stylesheet" href="foo.css" precedence="default" /><link rel="stylesheet" href="bar.css" precedence="high" /><article class="foo-class bar-class">{...}</article></Suspense>)
}function ComponentTwo() {return (<div><p>{...}</p><link rel="stylesheet" href="baz.css" precedence="default" />  <-- will be inserted between foo & bar --></div>)
}

支持异步async脚本

在 React 19 中,增强了对异步脚本的支持,允许在组件树的任何位置渲染脚本,并确保它们在所有渲染环境中被去重,从而只加载和执行一次,即使由多个组件渲染。这简化了脚本管理,避免了重复实例和重新定位的问题。

function MyComponent() {return (<div><script async={true} src="..." />Hello World</div>)
}function App() {<html><body><MyComponent>...<MyComponent> // won't lead to duplicate script in the DOM</body></html>
}

支持预加载资源

React 19 引入了多项新 API,用于高效加载和预加载浏览器资源,从而简化构建高性能应用的过程。这些 API 确保资源加载不会成为用户体验的瓶颈,提供流畅、无阻碍的出色体验。

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerlypreload('https://.../path/to/font.woff', { as: 'font' }) // preloads this fontpreload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheetprefetchDNS('https://...') // when you may not actually request anything from this hostpreconnect('https://...') // when you will request something but aren't sure what
}
<!-- the above would result in the following DOM/HTML -->
<html><head><!-- links/scripts are prioritized by their utility to early loading, not call order --><link rel="prefetch-dns" href="https://..."><link rel="preconnect" href="https://..."><link rel="preload" as="font" href="https://.../path/to/font.woff"><link rel="preload" as="style" href="https://.../path/to/stylesheet.css"><script async="" src="https://.../path/to/some/script.js"></script></head><body>...</body>
</html>

更好的 Error报告及hydration错误改进

React 19 改进了错误处理机制,消除了重复错误记录,并提供了处理捕获和未捕获错误的选项。现在,当渲染过程中出现错误并被 Error Boundary 捕获时,React 只会记录一次错误信息,并包含所有相关细节,避免了之前版本中多次抛出错误(如原始错误和自动恢复失败)的情况。此外,React 提供了关于错误发生位置的详细信息,提供更详细的差异化日志,帮助开发者更轻松地诊断和解决问题。

一个错误信息,其中包含所有错误信息,减少冗余错误日志
在这里插入图片描述
在这里插入图片描述

支持自定义元素

React 19 新增了对自定义元素的全面支持,完全兼容 Custom Elements Everywhere 的所有测试。这一改进解决了过去版本中使用自定义元素的困难,确保了 React 组件与 Web Components 标准无缝集成。使开发者能够更轻松地创建和使用自定义 HTML 元素,提升应用程序的灵活性和可维护性。

在 React 19 中,新增了对在客户端和 SSR 期间工作的属性的支持,策略如下:

  • 服务器端渲染:如果其类型是 string、number 或等原始值或值为 true ,则传递给自定义元素的 props 将呈现为属性。具有非原始类型(如 object、symbol、 function或 value)的 props 将被省略。
  • 客户端渲染:与 Custom Element 实例上的属性匹配的 props 将被分配为 properties,否则它们将被分配为 attributes。

React 19 引入了许多新特性,旨在提升开发体验、性能和灵活性。本文介绍了部分新增功能和对现有功能的优化改进,帮助开发者更好地理解和利用这些更新。

更多的更新内容请阅读 官方博客文档、GitHub发行版本v19.0.0

在这里插入图片描述
如果你觉得这篇文章对你有帮助,请点赞 👍、收藏 👏 并关注我!👀
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63456.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android笔记【17】返回数据的两种方法

目录 一、问题 二、具体分析 1、代码 2、区别 1. 目的和使用场景 resultLauncher startActivity 2. 数据传递方式 3. 返回结果的管理 4. 代码示例对比 使用 resultLauncher 启动活动并处理返回结果&#xff1a; 使用 startActivity 启动活动&#xff08;不处理返回&…

flutter修改状态栏学习

在flutter中如何动态更改状态栏的颜色和风格。 前置知识点学习 AnnotatedRegion AnnotatedRegion 是 Flutter 中的一个小部件&#xff0c;用于在特定区域中提供元数据&#xff08;metadata&#xff09;以影响某些系统级的行为或外观。它通常用于改变系统 UI 的外观&#xff…

功能篇:JAVA使用jwt

在Java中实现JWT&#xff08;JSON Web Token&#xff09;认证通常涉及以下几个步骤&#xff1a; 1. 添加依赖 2. 创建JWT工具类 3. 实现登录接口&#xff0c;生成JWT 4. 实现过滤器&#xff0c;验证JWT ### 1. 添加依赖 首先&#xff0c;你需要在项目中添加JWT库的依赖。如果…

Chrome扩展程序开发示例

项目文件夹内文件如下&#xff1a; manifest.json文件内容&#xff1a; {"manifest_version": 3,"name": "我的法宝","description": "我的有魔法的宝贝","version": "1.0","icons": {"…

前端知识1html

VScode一些快捷键 Ctrl/——注释 !——生成html框架元素 *n——生成n个标签 直接书写html的名字回车生成对应的标签 常见标签 span&#xff1a; <span style"color: red;">hello</span> <span>demo</span> span实现&#xff1a; 标题…

计算机键盘简史 | 键盘按键功能和指法

注&#xff1a;本篇为 “计算机键盘简史 | 键盘按键功能和指法” 相关文章合辑。 英文部分机翻未校。 The Evolution of Keyboards: From Typewriters to Tech Marvels 键盘的演变&#xff1a;从打字机到技术奇迹 Introduction 介绍 The keyboard has journeyed from a humb…

mongoDb的读session和写session权限报错问题

go在使用mongoDb时用到了全局会话&#xff0c;发现在创建的session的逻辑相同&#xff0c;首先会进行数据的查询&#xff0c;此时获取了全局session执行读操作&#xff0c;查询所有文档&#xff0c;则当前会话为读会话&#xff0c;当再去插入时发现会报错&#xff0c;此时sessi…

【C++】求第二大的数详细解析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述&#x1f4af;输入描述&#x1f4af;解题思路分析1. 题目核心要求2. 代码实现与解析3. 核心逻辑逐步解析定义并初始化变量遍历并处理输入数据更新最大值与次大值输…

redis-stack redisSearch环境安装搭建

RedisSearch在redis许可证变更之后显得是redis中的一大特色&#xff0c;闲来无事学习记录一下。 尝试通过源码编译redisSearch&#xff0c;貌似非常费劲&#xff0c;所以建议使用docker或者Linux的发行包进行安装redis-stack。redis-stack是基于redis的模块化机制进行一个扩展…

JavaCV录屏到网络流

1、pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.…

scala 编写 hdfs 工具类

scala 编写 hdfs 工具类 scala 创建 删除 hdfs 文件或目录 scala 上传 下载 hdfs 文件 scala 读取 写入 hdfs 文件 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi&quo…

从零用java实现 小红书 springboot vue uniapp (1)

前言 偶尔会用小红书发一些笔记 闲来无事 想自己实现一个小红书 正好可以学习一下 帖子 留言 im 好友 推送 等功能 下面我们就从零 开发一个小红书 后台依旧用我们的会员系统的脚手架 演示 http://120.26.95.195:8889/ 客户端我们使用uniapp 我们首先对主页进行一个分解 顶部我…

Cesium 按区域生成高度图

Cesium 按区域生成高度图 Cesium 按区域生成高度图 const cmd new CustomDrawCommand({vertexArray,shaderProgram,commandType: Compute,outputTexture: bufferColor,uniformMap,postExecute: () > {const url getImageByTexture(bufferAColor, gl);viewer.scene.primiti…

RESTful API设计原则与最佳实践

在当今的数字化时代&#xff0c;应用程序编程接口&#xff08;API&#xff09;已成为企业间数据交换、系统集成和业务扩展的关键工具。RESTful API作为一种基于HTTP协议的轻量级、无状态、可扩展的架构设计风格&#xff0c;在Web服务、移动应用、物联网等多个领域得到了广泛应用…

SpringMVC全局异常处理

一、Java中的异常 定义&#xff1a;异常是程序在运行过程中出现的一些错误&#xff0c;使用面向对象思想把这些错误用类来描述&#xff0c;那么一旦产生一个错误&#xff0c;即创建某一个错误的对象&#xff0c;这个对象就是异常对象。 类型&#xff1a; 声明异常&#xff1…

最小绝对偏差(Least Absolute Deviation, LAD)---子梯度法

最小绝对偏差&#xff08;Least Absolute Deviations&#xff0c;简称LAD&#xff09;是一种用于回归分析的统计方法&#xff0c;其目标是最小化残差的绝对值之和&#xff0c;而不是最小二乘法中的残差平方和。LAD回归特别适用于存在异常值的数据集&#xff0c;因为它对异常值不…

Linux - 进程等待和进程替换

进程等待 前面我们了解了如果父进程没有回收子进程, 那么当子进程接收后, 就会一直处于僵尸状态, 导致内存泄漏, 那么我们如何让父进程来回收子进程的资源. waitpid 我们可以通过 Linux 提供的系统调用函数 wait 系列函数来等待子进程死亡, 并回收资源. #include <sys/t…

mac下载安装jdk

背景 长时间不折腾mac全部忘记 特此记录 安装 1.下载jdk 根据需要下载对应的jdk 我直接 下载到/Applicatiions目录 https://www.oracle.com/java/technologies/downloads/#java8-mac 2.解压 cd /Applicatiions tar -zxvf jdk-8u431-macosx-x64.tar.gz 3.配置环境 …

【Java】—— 图书管理系统

基于往期学习的类和对象、继承、多态、抽象类和接口来完成一个控制台版本的 “图书管理系统” 在控制台界面中实现用户与程序交互 任务目标&#xff1a; 1、系统中能够表示多本图书的信息 2、提供两种用户&#xff08;普通用户&#xff0c;管理员&#xff09; 3、普通用户…

1-1.mysql2 之 mysql2 初识(mysql2 初识案例、初识案例挖掘)

一、mysql2 概述 mysql2 是一个用于 Node.js 的 MySQL 客户端库 mysql2 是 mysql 库的一个改进版本&#xff0c;提供了更好的性能和更多的功能 使用 mysql2 之前&#xff0c;需要先安装它 npm install mysql2 二、mysql2 初识案例 1、数据库准备 创建数据库 testdb CREAT…