download: The React17 system is combined with TS to create a travel e-commerce platform
React—A necessary skill point for the front end of a big factory. This course will take you to systematically learn the complete technical system of React17, and combine TypeScript to develop popular business applications, to achieve in-depth mastery of the framework, to help you improve your hard power, and quickly enter the big factory.
Technical requirements
1. Familiar with front-end basics such as HTML, JavaScript, CSS, etc. 2. Understand Typescript basic syntax
environment parameters
Node: v14 (backwards compatible to v10) React: 17.0.1 Typescript: 4.1.2 Redux: 4.0.5 Antd: 4.9. 2
Just today, the React team officially released React 17. What content does this release bring?
No new features The
React 17 version is unusual because it does not add any new features for developers. Instead, this release focuses on simplifying the upgrade of React itself.
Before 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 not a small challenge. Although it is possible to use two versions of React on the page at the same time, it was still fragile until React 17 and caused incident 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 upgrade the entire application at once as previously possible. But you can also choose to upgrade your applications one by one. For example, you may decide to migrate most of your applications to React 18, but keep some lazy-loaded dialogs or sub-routes on React 17.
This does not mean that you have to upgrade gradually. For most applications, upgrading all at once is still the best solution. Loading two versions of React (even if one of them is lazily loaded on demand) is still not ideal. However, for large applications that are not actively maintained, consider using this option, and React 17 can make these applications out of date.
We postponed other changes until after React 17 in order to gradually upgrade this release. If upgrading React 17 is too difficult, it will go against the original intention.
Event proxy changes
In React 17, React will no longer attach event handlers at the document level in the background. Instead, it appends them to the root DOM container that renders your React tree:
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
In React 16 and earlier versions, React will execute document.addEventListener() for most events. React 17 will call rootNode.addEventListener() later.
Other major changes
have been described in the React v17 RC blog.
Officials have changed less than 20 components in the more than 100,000 components in the Facebook product code to complete the upgrade, so everyone should be able to upgrade easily.
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 conversion method will continue to exist, and there is no plan to stop supporting it.
Install
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/ to the new JSX converter jsx-dev-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 in #18224) Prevent'use
strict' from leaking from UMD bundles. (@Koba04 submitted in #19614)
Stop using fb. me redirects.
(@Cylim submitted in #19598) React DOM
switches the event delegate from document to root. (@Trueadm submitted in #18195 and others)
Before running the next side effect, please clean up all side effects. (@Bvaughn submitted #17947)
Run the useEffect cleanup function asynchronously. (@Bvaughn submitted in #17925)
Use the browser's focusin and focusout to replace the underlying implementation of onFocus and onBlur. (@Trueadm submitted #19186)
All Capture events are implemented using the capture phase of the browser. (@Trueadm submitted in #19221)
Prohibit bubbling in the onScroll event. (@Gaearon submitted in #19464)
If the return value of the forwardRef or memo component is undefined, an exception will be thrown. (@Gaearon submitted #19550)
Remove the event pool. (@Trueadm submitted #18969)
Remove internal components that are not needed by React Native Web. (@Necolas submitted #18483)
When root is mounted, all known event listeners are attached. (@Gaearon submitted #19659)
In Dev mode, disable the console during the second rendering. (@Sebmarkbage submitted in #18547)
Deprecated 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 #18417)
Disable console during repeated rendering in strict mode. (@Sebmarkbage submitted in #18547)
In strict mode, the secondary rendering component does not use hooks. (@Eps1lon submitted #18430)
It is allowed to call ReactDOM.flushSync in the lifecycle function (but will issue a warning). (@Sebmarkbage submitted in #18759)
Add the code attribute to the keyboard event object. (@Bl00mber submitted in #18287)
Add the disableRemotePlayback attribute to the video element. (@Tombrowndev submitted #18619)
Add the enterKeyHint attribute to the input element. (@Eps1lon submitted in #18634)
When no value is provided for <Context.Provider>, a warning will be issued. (@Charlie1404 submitted in #19054)
If the return value of the forwardRef or memo component is undefined, a warning will be thrown. (@Bvaughn submitted #19550)
Improve the error message for invalid updates. (@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 #17070)
Keep onTouchStart, onTouchMove and onWheel as passive by default. (@Gaearon submitted #19654)
Fix the problem that setState hangs when iframe is closed in development mode. (@Gaearon submitted #19220)
Use defaultProps to fix 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 implementation of the fee standard to fix Test Utils. (@Just-boris submitted #18632)
Fix wrong event.type reported by onBeforeInput. (@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)
Fix the rendering problem in shadow root. (@Jack-Works submitted #15894)
Use event capture to fix the movementX/Y polyfill problem. (@Gaearon submitted #19672)
Use delegates to handle onSubmit and onReset events. (@Gaearon submitted #19333)
Improve memory usage. (@Trueadm submitted in #18970)
React DOM Server
uses the server-side rendered useCallback to be consistent with useMemo. (@Alexmckenley submitted in #18783)
Fix the problem of state leakage when the function component throws an exception. (@Pmaccart submitted #19212)
React Test Renderer
improved findByType error message. (@Henryqdineen submitted #17439)
Concurrent Mode (experimental phase)
improves the heuristic update algorithm. (@Acdlite submitted in #18796)
Add the unstable_ prefix before the implementation API. (@acdlite submitted in #18825)
Remove unstable_discreteUpdates and unstable_flushDiscreteUpdates. (@Trueadm submitted #18825) The
timeoutMs parameter has been removed. (@Acdlite submitted #19703)
Disable <div hidden /> pre-rendering to support future APIs. (@Acdlite submitted in #18917)
Added unstable_expectedLoadTime to Suspense for CPU-bound tree. (@Acdlite submitted in #19936)
Added a realization of unstable_useOpaqueIdentifier Hook. (@Lunaruan submitted in #17322)
Added an experimental unstable_startTransition API. (@rickhanlonii submitted in #19696)
After using act in the test renderer, the Suspense fallback is not refreshed. (@Acdlite submitted in #18596)
Use the global rendering timeout for CPU Suspense. (@Sebmarkbage submitted in #19643)
Before mounting, clear the contents of the existing root directory. (@Bvaughn submitted #18730)
Fix bugs with incorrect boundaries. (@Acdlite submitted #18265)
Fixed a bug that caused the pending tree update to be lost. (@Acdlite submitted in #18384 and #18457)
Fix the bug that caused the rendering phase update to be lost. (@Acdlite submitted #18537)
Fix SuspenseList bug. (@Sebmarkbage submitted in #18412)
Fix the bug that caused Suspense fallback to be displayed too early. (@Acdlite submitted in #18411)
Fix the bug of abnormal use of class component in SuspenseList. (@Sebmarkbage submitted in #18448)
Fix the bug that the input content may be updated and discarded. (@Jddxf submitted in #18515 and @acdlite submitted in #18535)
Fixed the bug that stuck after suspending Suspense fallback. (@Acdlite submitted in #18663)
If the hydrate is in, don't cut off the tail of SuspenseList. (@Sebmarkbage submitted in #18854)
Fix a 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 external rendering and call setState before submitting, a warning will be issued. (@Sebmarkbage submitted in #18838)