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

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）