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）