download: React17+React Hook+TS4 Best Practice Imitating Jira Enterprise Project
React17 + React Hook + TypeScript4 has become synonymous with the quality assurance of large React projects, and it is a must-have technology for outstanding React developers in 2021. This course will lead everyone to master best practices by completing a powerful task management project, and improve development efficiency, development quality and technical capabilities in all aspects.
Technical requirements
: React basic
environment parameters
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
Just today, the React team officially released React 17. What content does this release bring?
No new features
React 17 is unusual because it does not add any new features for developers. Instead, the release is mainly dedicated to simplifying React's own promotion.
Before gradually upgrading from React 15 to React 16, you need to upgrade the entire application at once. But undoubtedly, if there is old code many years ago, upgrading is a big challenge. Although it is possible to use two other versions of React together on the page, it was still fragile until React 17 and caused work problems.
We are solving many problems with React 17. This means that when React 18 and the next future version come out, you will now have more choices. The first option is to advance to the entire application at once, perhaps as before. But you can also choose to upgrade your applications one by one. For example, you might decide to migrate most of your applications to React 18, but keep some dialogs or sub-routes that delay loading on React 17.
This does not mean that you need to advance gradually. For most applications, upgrading all at once is still the best solution. Loading two versions of other React (even if one is delayed on-demand) is still not ambition. However, for large applications that are not actively protected, this option can be considered, and React 17 can keep these applications out of date.
We postponed other changes to React 17 in order to make progress in this release. If it is too difficult to qualify for React 17, it will violate the original purpose.
Work agent changes
In React 17, React will no longer attach work handlers at the document level in the background. Instead, it attaches them to the root DOM container that foils your React tree:
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
In React 16 and earlier versions, React will perform document.addEventListener() for most tasks. React 17 will call rootNode.addEventListener() later.
Other serious changes
have been described in the React v17 RC blog.
The official has now changed less than 20 components in the more than 100,000 components in the Facebook product code to complete the promotion, so we should be able to make the promotion easier.
The new JSX transformation
React 17 supports the new JSX transformation. We will also support it to React 16.14.0, React 15.7.0 and 0.14.10. It should be noted that this is completely opt-in, and you do not need to use it. The previous JSX transformation method will continue to exist, and there is no plan to stop its support.
Device
npm install [email protected] [email protected]
CDN
<script crossorigin class="lazy" data-src=" https://unpkg.com/[email protected]/umd/react.production.min.js">script> ; <script crossorigin src=" https:/ /unpkg.com/[email protected]/umd/react-dom.production.min.js">script> ;
Changelog
React
adds react/jsx-runtime and react/jsx-dev- to the new JSX converter runtime. (@Lunaruan submitted #18299)
Build component call stack based on native framework. (@Sebmarkbage submitted in #18561)
You can set displayName in the context to improve the call stack information. (@Eps1lon submitted #18224) Avoid'use
strict' from leaking out of UMD bundles. (@Koba04 submitted #19614)
Discontinue the use of fb. me redirects.
(@Cylim submitted in #19598) React DOM
switches the job assignment from document to root. (@Trueadm submitted in #18195 and others)
Before running the next side effect, please sort out all the side effects. (@Bvaughn submitted in #17947)
Run the useEffect finishing function asynchronously. (@Bvaughn submitted in #17925)
Use the browser's focusin and focusout to replace onFocus and onBlur for the underlying end. (@Trueadm submitted #19186)
Use the browser's capture phase to complete all the Capture work. (@Trueadm submitted in #19221)
Stop bubbling when onScroll is working. (@Gaearon submitted in #19464)
If the return value of the forwardRef or memo component is undefined, an abnormality is thrown. (@Gaearon submitted #19550)
Remove the work pool. (@Trueadm submitted #18969)
Remove internal components that are not needed by React Native Web. (@Necolas submitted in #18483)
When root is mounted, all known working listeners are attached. (@Gaearon submitted in #19659)
In Dev mode, disable the console during the second rendering . (@Sebmarkbage submitted in #18547)
Deprecated as documented and misleading ReactTestUtils.SimulateNative API. (@Gaearon submitted in #13407)
Renamed the private fields used internally (@gaearon submitted in #18377)
not to call the User Timing API in the development environment. (@Gaearon submitted in #18417)
Disable the console during repeated renderings in severe mode. (@Sebmarkbage submitted in #18547)
In the severe mode, Hook is not used for secondary rendering components. (@Eps1lon submitted #18430)
It is allowed to call ReactDOM.flushSync in the lifecycle function (but a warning will be announced). (@Sebmarkbage submitted in #18759)
Add the code feature to the keyboard work policy. (@Bl00mber submitted in #18287)
Add the feature of disableRemotePlayback to the video element. (@Tombrowndev submitted in #18619)
Add the enterKeyHint feature to the input element. (@Eps1lon submitted #18634)
When no value is provided, a warning will be announced. (@Charlie1404 submitted in #19054)
If the return value of the forwardRef or memo component is undefined, a warning will be thrown. (@Bvaughn submitted #19550)
Improved error information for invalid update. (@JoviDeCroock submitted in #18316)
Ignore forwardRef and memo from the call stack information. (@Sebmarkbage submitted in #18559)
Improve the error message when switching between controlled input and uncontrolled input. (@Vcarl submitted in #17070)
insist that onTouchStart, onTouchMove and onWheel default to passive. (@Gaearon submitted in #19654) Fix
the problem that setState hangs when the iframe is closed in development mode. (@Gaearon submitted in #19220)
Use defaultProps to correct the problem of the shelf component during rendering . (@Jddxf submitted in #18539)
Fix the problem of false alarm when dangerouslySetInnerHTML is undefined. (@Eps1lon submitted in #18676)
Use the require completion of the fee specification to revise Test Utils. (@Just-boris submitted #18632)
Corrected the event.type of onBeforeInput reporting errors. (@Eps1lon submitted #19561) Fix
the issue that event.relatedTarget output is undefined in Firefox. (@Claytercek submitted #19607) Fix the
"unspecified error" problem in IE11. (@Hemakshis submitted #19664) Corrected the
shadow root issue. (@Jack-Works submitted #15894)
Use work to capture and correct the problem of the movementX/Y polyfill. (@Gaearon submitted #19672)
Use entrust to handle onSubmit and onReset tasks. (@Gaearon submitted #19333)
Improve memory usage. (@Trueadm submitted in #18970)
React DOM Server
uses the server-side useCallback and useMemo together. (@Alexmckenley submitted in #18783) Corrected
the problem of leakage when the function component was abnormal. (@Pmaccart submitted #19212)
React Test Renderer
improves findByType error message. (@Henryqdineen submitted #17439)
Concurrent Mode (experimental phase)
improves the heuristic update algorithm. (@Acdlite submitted #18796)
Add the unstable_ prefix before the final API. (@acdlite submitted in #18825)
Remove unstable_discreteUpdates and unstable_flushDiscreteUpdates. (@Trueadm submitted #18825) The
timeoutMs parameter has been removed. (@Acdlite submitted in #19703)
Disable
pre- rendering to support future APIs. (@Acdlite submitted #18917)
Added unstable_expectedLoadTime to Suspense for CPU-bound tree. (@Acdlite submitted in #19936)
Added a complete unstable_useOpaqueIdentifier Hook. (@Lunaruan submitted in #17322)
Added an experimental unstable_startTransition API. (@rickhanlonii submitted in #19696)
After using act in the test setter, Suspense's fallback is not rewritten. (@Acdlite submitted in #18596)
Use the timeout of the global rendering for CPU Suspense. (@Sebmarkbage submitted in #19643)
Before mounting, clear the contents of the existing root directory. (@Bvaughn submitted #18730) Fix
bugs with error distance. (@Acdlite submitted in #18265) Fixed
the bug that caused the pending tree update to be lost. (@Acdlite submitted in #18384 and #18457) Correct
the bug that caused the update to be lost during the contrast phase. (@Acdlite submitted in #18537) Fix the
SuspenseList bug. (@Sebmarkbage submitted in #18412) Fix
the bug that caused Suspense fallback to appear prematurely. (@Acdlite submitted in #18411) Fix
the bug that the class component in SuspenseList is abnormal. (@Sebmarkbage submitted in #18448)
Correcting the input content may be updated to be lost. (@Jddxf submitted in #18515 and @acdlite submitted in #18535) Corrected
the error that stuck after Suspense fallback was suspended. (@Acdlite submitted in #18663)
If the hydrate is in, don't cut off the tail of SuspenseList. (@Sebmarkbage submitted in #18854)
Fix the bug in useMutableSource. This bug may appear when getSnapshot is changed. (@Bvaughn submitted #
18297 ) Fix the disgusting bug of useMutableSource. (@Bvaughn submitted in #18912)
If setState is called externally and called before submission, a warning will be announced. (@Sebmarkbage submitted in #18838)