React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目
发布于 3 年前 作者 tuolajikasiji 3052 次浏览 来自 分享

download: React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目

React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词,更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目,带领大家掌握最佳实践,全方位提升开发效率、开发质量和技术能力。

技术要求 有 React 基础 环境参数 React 17.0.1 / TypeScript 4.0.5 / react-router : 6.0.0 / create-react-app 4.0.1 react-query: 1.0.0 / emotion: 10.0.35 / cypress: 6.1.0 / jest: 26.6.3

就在今天,React 团队正式发布了 React 17,这次发布带来了哪些内容?

没有新特性 React 17版别不同寻常,因为它没有添加任何面向开发人员的新功能。取而代之的是,该发行版主要致力于简化React自身的晋级。

逐渐晋级 之前 React 15晋级到 React 16,你需要将整个应用一次性晋级。但无疑假如存在多年前的老代码,晋级是个不小的应战。尽管可以在页面上一起运用两个版其他React,但是直到React 17依然很脆弱,并导致工作问题。

我们正在解决React 17的许多问题。这意味着当React 18和下一个未来版别问世时,您现在将有更多选择。第一种选择是像以前或许那样一次晋级整个应用程序。但是您也可以选择逐一晋级您的应用程序。例如,您或许决定将大部分应用程序迁移到React 18,但在React 17上保留一些推迟加载的对话框或子路由。

这并不意味着您有必要逐渐晋级。关于大多数应用程序,一次悉数晋级依然是最好的解决方案。加载两个版其他React(即使其中一个是按需推迟加载)依然不抱负。但是,关于没有积极保护的大型应用程序,可以考虑运用此选项,React 17可以使这些应用程序不落伍。

我们将其他更改推迟到React 17之后,便是为了本次发布能渐进晋级。假如晋级React 17过于困难,这将违反原本目的。 工作署理更改 在React 17中,React将不再在后台的文档级别附加工作处理程序。取而代之的是,它将它们附加到烘托您的React树的根DOM容器:

const rootNode = document.getElementById(‘root’); ReactDOM.render(<App />, rootNode); 在React 16和更早的版别中,React将对大多数工作履行document.addEventListener()。 React 17将在后调用rootNode.addEventListener()。

其它严峻改动 在React v17 RC博客中现已描绘了其他的严峻更改。 官方现已在Facebook产品代码中的100,000多个组建中更改少于20个组件即可完结晋级,所以我们在晋级的时分应该可以轻松点。

新的JSX转化 React 17支撑新的JSX转化。我们还将对它支撑到React 16.14.0,React 15.7.0和0.14.10。需要留意的是,这是彻底选择启用的,您也不必运用它。之前的JSX转化的方法将继续存在,并且没有方案中止对其支撑。

设备 npm install react@17.0.0 react-dom@17.0.0 CDN

<script crossorigin class=“lazy” data-src=“https://unpkg.com/react@17.0.0/umd/react.production.min.js”>script> <script crossorigin src=“https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js”>script> Changelog React 为全新的 JSX 转化器添加 react/jsx-runtime 和 react/jsx-dev-runtime。(@lunaruan 提交于 #18299) 根据原生框架构建组件调用栈。(@sebmarkbage 提交于 #18561) 可以在 context 中设置 displayName 以改进调用栈信息。(@eps1lon 提交于 #18224) 避免 ‘use strict’ 从 UMD 的 bundles 中走漏。(@koba04 提交于 #19614) 中止运用 fb.me 进行重定向。(@cylim 提交于 #19598) React DOM 将工作托付从 document 切换为 root。(@trueadm 提交于 #18195 及其他) 在运转下一个副作用前,请整理全部副作用。(@bvaughn 提交于 #17947) 异步运转 useEffect 整理函数。(@bvaughn 提交于 #17925) 运用浏览器的 focusin 和 focusout 替换 onFocus 和 onBlur 的底层完结。(@trueadm 提交于 #19186) 将全部 Capture 工作都运用浏览器的捕获阶段完结。(@trueadm 提交于 #19221) 制止在 onScroll 工作时冒泡。(@gaearon 提交于 #19464) 假如 forwardRef 或 memo 组件的返回值为 undefined,则抛出失常。(@gaearon 提交于 #19550) 移除工作池。(@trueadm 提交于 #18969) 移除 React Native Web 不需要的内部组件。(@necolas 提交于 #18483) 当挂载 root 时,附加全部已知的工作监听器。(@gaearon 提交于 #19659) 在 Dev 方式下,禁用第二次烘托过程中的 console。(@sebmarkbage 提交于 #18547) 弃用为记载且具有误导性的 ReactTestUtils.SimulateNative API。(@gaearon 提交于 #13407) 重命名内部运用的私有字段(@gaearon 提交于 #18377) 不在开发环境调用 User Timing API。(@gaearon 提交于 #18417) 在严峻方式下重复烘托期间禁用 console。(@sebmarkbage 提交于 #18547) 在严峻方式下,二次烘托组件也不运用 Hook。(@eps1lon 提交于 #18430) 允许在生命周期函数中调用 ReactDOM.flushSync(但会宣布警告)。(@sebmarkbage 提交于 #18759) 将 code 特色添加到键盘工作方针中。(@bl00mber 提交于 #18287) 为 video 元素添加 disableRemotePlayback 特色。(@tombrowndev 提交于 #18619) 为 input 元素添加 enterKeyHint 特色。(@eps1lon 提交于 #18634) 当没有给 供给任何值时,会宣布警告。(@charlie1404 提交于 #19054) 假如 forwardRef 或 memo 组件的返回值为 undefined,则抛出警告。(@bvaughn 提交于 #19550) 为无效更新改进差错信息。(@JoviDeCroock 提交于 #18316) 从调用栈信息中忽略 forwardRef 和 memo。(@sebmarkbage 提交于 #18559) 在受控输入与非受控输入间切换时,改进差错消息。(@vcarl 提交于 #17070) 坚持 onTouchStart、onTouchMove 和 onWheel 默认为 passive。(@gaearon 提交于 #19654) 批改在 development 方式下 iframe 封闭时,setState 挂起的问题。(@gaearon 提交于 #19220) 运用 defaultProps 批改拉架子组件在烘托时的问题。(@jddxf 提交于 #18539) 批改当 dangerouslySetInnerHTML 为 undefined 时,误报警告的问题。(@eps1lon 提交于 #18676) 运用费规范的 require 完结来批改 Test Utils。(@just-boris 提交于 #18632) 批改 onBeforeInput 报告差错的 event.type。(@eps1lon 提交于 #19561) 批改 Firefox 中 event.relatedTarget 输出为 undefined 的问题。(@claytercek 提交于 #19607) 批改 IE11 中 “unspecified error” 的问题。(@hemakshis 提交于 #19664) 批改 shadow root 中的烘托问题。(@Jack-Works 提交于 #15894) 运用工作捕获批改 movementX/Y polyfill 的问题。(@gaearon 提交于 #19672) 运用托付处理 onSubmit 和 onReset 工作。(@gaearon 提交于 #19333) 提高内存运用率。(@trueadm 提交于 #18970) React DOM Server 运用服务端烘托的 useCallback 与 useMemo 共同。(@alexmckenley提交于 #18783) 批改函数组件抛出失常时状况走漏的问题。(@pmaccart 提交于 #19212) React Test Renderer 改进 findByType 差错信息。(@henryqdineen 提交于 #17439) Concurrent Mode (实验阶段) 改进启发式更新算法。(@acdlite 提交于 #18796) 在完结性 API 前添加 unstable_ 前缀。 (@acdlite 提交于 #18825) 移除 unstable_discreteUpdates 和 unstable_flushDiscreteUpdates。(@trueadm 提交于 #18825) 移除了 timeoutMs 参数。(@acdlite 提交于 #19703) 禁用 预烘托,以支撑未来的 API。(@acdlite 提交于 #18917)

为 Suspense 添加了 unstable_expectedLoadTime,用于 CPU-bound 树。(@acdlite 提交于 #19936) 添加了一个完结性的 unstable_useOpaqueIdentifier Hook。(@lunaruan 提交于 #17322) 添加了一个实验性的 unstable_startTransition API. (@rickhanlonii 提交于 #19696) 在测验烘托器中运用 act 后,不在改写 Suspense 的 fallback。(@acdlite 提交于 #18596) 将全局烘托的 timeout 用于 CPU Suspense。(@sebmarkbage 提交于 #19643) 挂载前,清除现有根目录的内容。(@bvaughn 提交于 #18730) 批改带有差错距离的 bug。(@acdlite 提交于 #18265) 批改了导致挂起树更新丢掉的 bug。(@acdlite 提交于 #18384 以及 #18457) 批改导致烘托阶段更新丢掉的 bug。(@acdlite 提交于 #18537) 批改 SuspenseList 的 bug。(@sebmarkbage 提交于 #18412) 批改导致 Suspense fallback 过早显现的 bug。(@acdlite 提交于 #18411) 批改 SuspenseList 中运用 class 组件失常的 bug。(@sebmarkbage 提交于 #18448) 批改输入内容或许被更新被丢掉的 bug。(@jddxf 提交于 #18515 以及 @acdlite 提交于 #18535) 批改暂挂 Suspense fallback 后卡住的差错。(@acdlite 提交于 #18663) 假如 hydrate 中,不要切断 SuspenseList 的尾部。(@sebmarkbage 提交于 #18854) 批改 useMutableSource 中的 bug,此 bug 或许在 getSnapshot 更改时出现。(@bvaughn 提交于 #18297) 批改 useMutableSource 令人恶心的 bug。(@bvaughn 提交于 #18912) 假如外部烘托且提交之前调用 setState,会宣布警告。(@sebmarkbage 提交于 #18838)

回到顶部