Pay attention to our

Wechat search “mark Chinese” public number, will bring you the most cutting-edge front-end information.

React 17 is now available in the official version of React 17, following two blog posts on React 17 RC. There are few changes to React 17, but this means it’s ready for production.

Today, we’re announcing React 17! Previously, we covered the implications of the React 17 release and the changes included in the React 17 RC blog post. This post is a brief summary of that post, so skip it if you’ve read it.

No new features

The React V17 release is unusual because it doesn’t add any new features for developers. However, this version will make upgrading React itself much easier.

In particular, React V17 serves as the “cornerstone” for subsequent releases, making it easier for different versions of React to nest with each other.

In addition, React will make it easier to embed into applications built with other technologies.

Incremental upgrade

**React V17 opens a new chapter in React incremental upgrades. ** When you upgrade from React 15 to 16 (or, for that matter, from 16 to 17), you usually upgrade the entire application at once, which works fine for most applications. However, if the code base was written years ago and not maintained and upgraded in a timely manner, this can make the upgrade more and more expensive. Also, before React 17, using different versions of React on the same page (which is possible, but risky) could cause event problems, with some unknown risks.

We are fixing a number of issues in React V17. That means you’ll have a lot more options when React 18 or a future version comes along. Preferred, of course, is to upgrade the entire app at once; But you have an option, which is to gradually upgrade your app. For example, you might upgrade most of the functionality to React V18, but leave some lazily loaded dialogs or subroutes in React V17.

But that doesn’t mean you have to upgrade incrementally. For most applications, a one-time upgrade is still a better option. Loading two versions of React is still not ideal — even if one version is loaded on demand. But it makes a lot of sense for large apps that haven’t been maintained for a long time, and React V17 starts to make them more viable.

We’ve prepared a sample repository that demonstrates how to lazily load older versions of React if necessary. This example was built by the Create React App, and other tools can be used to achieve the same effect. Those who use other tools are welcome to provide Demo through PR.

Pay attention to

We delayed other features until after React V17. The goal of this release is to achieve incremental upgrades. If upgrading to 17 is difficult, it defeats the purpose of this release.

Changes to the event delegate

To implement incremental upgrades, we need to make changes to the React event system. React 17 is an important release because of the potential for disruptive changes. For more information about the release, please refer to the release FAQ to understand our commitment to release stability.

In React V17, React no longer adds event handling to the document. Instead, React adds event handling to the root DOM container that renders the React tree:

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
Copy the code

Before the React and 16 version, will React to the document. Most of the events addEventListener () operation. The React v17 will start by calling the rootNode. AddEventListener () instead.

It has been verified that many of the issues reported on the Issue tracker over the years have been resolved by new features, most of which relate to integrating React with non-React code.

If you are having problems upgrading, look at this common solution.

Other disruptive Changes

The React V17 RC blog post describes other disruptive changes in React V17.

We only changed less than 20 components in the Facebook project code to update 10W + components, so ** we’re guessing that most apps won’t have a major problem with v17. ** If you encounter any problems, please let us know.

Brand new JSX transformation

React V17 supports all new JSX transformations. React 16.14.0, React 15.7.0, and React 0.14.0 are compatible. Please note that this feature is completely optional and not required. The previous JSX transformation will continue to be maintained, and there are no plans to stop supporting it.

React Native

React Native will have a separate release schedule. Currently, we expect React V17 support to arrive in React Native 0.65, but there may be some changes. You can participate in the discussion on the React Native community’s release Issue Tracker.

The installation

Install React V17 with NPM:

NPM install [email protected] [email protected]Copy the code

Install React V17 using YARN:

Yarn add [email protected] [email protected]Copy the code

We also provide a version of CDN built by UMD:

<script crossorigin 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>
Copy the code

Refer to the documentation for detailed installation instructions.

Change log

React

  • For the newJSX converteraddreact/jsx-runtime 和 react/jsx-dev-runtime. (@lunaruanTo submit to# 18299)
  • Build the component call stack from the native framework. (Submitted by @sebmarkbage at #18561)
  • You can set it in contextdisplayNameTo improve call stack information. (@eps1lonTo submit to# 18224)
  • To prevent'use strict'Leaked from UMD bundles. (@koba04To submit to# 19614)
  • Stop usingfb.meRedirection. (@cylimTo submit to# 19598)

React DOM

  • Delegate events fromdocumentSwitch to root. (@trueadmTo submit to# 18195 及other)
  • Clean up all side effects before running the next side effect. (Submitted by @bvaughn at #17947)
  • Asynchronous operationuseEffectCleanup function. (@bvaughnTo submit to# 17925)
  • browser-basedfocusin 和 focusoutreplaceonFocus 和 onBlurThe underlying implementation of. (@trueadmTo submit to# 19186)
  • Will allCaptureEvents are implemented using the browser’s capture phase. (@trueadmTo submit to# 19221)
  • A ban ononScrollBubbling during the event. (@gaearonTo submit to# 19464)
  • ifforwardRef 或 memoThe return value of the component isundefined, throws an exception. (@gaearonTo submit to# 19550)
  • Remove the event pool. (submitted to #18969 by @trueadm)
  • Remove unnecessary internal components from the React Native Web. (Submitted by @necolas to #18483)
  • When root is mounted, attach all known event listeners. (submitted by @gaearon on #19659)
  • Disable the second rendering process in Dev modeconsole. (@sebmarkbageTo submit to# 18547)
  • Deprecated as documented and misleadingReactTestUtils.SimulateNativeAPI. (@gaearonTo submit to# 13407)
  • Rename private fields used internally (submitted by @gaearon in #18377)
  • The User Timing API is not invoked in the development environment. (submitted by @gaearon at #18417)
  • Disable Console during repeated rendering in strict mode. (Submitted by @sebmarkbage at #18547)
  • In strict mode, secondary rendering components also do not use hooks. (submitted by @eps1LON at #18430)
  • Allows calls in lifecycle functionsReactDOM.flushSync(But with a warning). (@sebmarkbageTo submit to# 18759)
  • willcodeProperty to the keyboard event object. (@bl00mberTo submit to# 18287)
  • forvideoElement to adddisableRemotePlaybackProperties. (@tombrowndevTo submit to# 18619)
  • forinputElement to addenterKeyHintProperties. (@eps1lonTo submit to# 18634)
  • When there is no give<Context.Provider>A warning is issued when any value is provided. (@charlie1404To submit to# 19054)
  • ifforwardRef 或 memoThe return value of the component isundefined, throws a warning. (@bvaughnTo submit to# 19550)
  • Improved error messages for invalid updates. (Submitted by @jovidecroock to #18316)
  • Ignore the forwardRef and Memo from the call stack information. (Submitted by @sebmarkbage at #18559)
  • Improved error messages when switching between controlled and uncontrolled inputs. (submitted by @vCarl at #17070)
  • keeponTouchStart,onTouchMove 和 onWheelThe default is passive. (@gaearonTo submit to# 19654)
  • Fixed iframe shutdown in Development modesetStateThe problem of hanging. (@gaearonTo submit to# 19220)
  • usedefaultPropsFixed an issue with the pull shelf component when rendering. (@jddxfTo submit to# 18539)
  • Repair whendangerouslySetInnerHTML 为 undefinedWhen, the false alarm warning problem. (@eps1lonTo submit to# 18676)
  • Of the royalty standardrequireImplementation to fix Test Utils. (@just-borisTo submit to# 18632)
  • repaironBeforeInputerror-reportingevent.type. (@eps1lonTo submit to# 19561)
  • Repair the Firefoxevent.relatedTargetThe output isundefinedThe problem. (@claytercekTo submit to# 19607)
  • Fix unspecified Error in Internet Explorer 11. (Submitted by @Hemakshis at #19664)
  • Fixed rendering issues in Shadow Root. (Submitted by @Jack-works at #15894)
  • Fix using event capturemovementX/YPolyfill problem. (@gaearonTo submit to# 19672)
  • Using delegate processingonSubmit 和 onResetEvents. (@gaearonTo submit to# 19333)
  • Improve memory usage. (submitted to #18970 by @trueadm)

React DOM Server

  • Rendered using the server sideuseCallback 与 useMemoConsistent. (@alexmckenleyTo submit to# 18783)
  • Fixed state leakage when a function component throws an exception. (Submitted by @pmaccart at #19212)

React Test Renderer

  • To improve thefindByTypeError message. (@henryqdineenTo submit to# 17439)

Concurrent Mode (experimental phase)

  • Improved heuristic update algorithm. (submitted by @acdLite at #18796)
  • Added before the implementation APIunstable_Prefix. (@acdliteTo submit to# 18825)
  • removeunstable_discreteUpdates 和 unstable_flushDiscreteUpdates. (@trueadmTo submit to# 18825)
  • removedtimeoutMsParameters. (@acdliteTo submit to# 19703)
  • disable<div hidden />Pre-render to support future apis. (@acdliteTo submit to# 18917)
  • Suspense addedunstable_expectedLoadTimeFor the CPU-bound tree. (@acdliteTo submit to# 19936)
  • Added an implementativeunstable_useOpaqueIdentifierThe hooks. (@lunaruanTo submit to# 17322)
  • Added an experimentalunstable_startTransition API. (@rickhanloniiTo submit to# 19696)
  • Used in the test rendereractAfter that, don’t refresh Suspense fallback. (@acdliteTo submit to# 18596)
  • Use timeout for global rendering for CPU Suspense. (Submitted by @sebmarkbage at #19643)
  • Before mounting, clear the contents of the existing root directory. (Submitted by @bvaughn at #18730)
  • Fix bugs with wrong boundaries. (submitted by @acdLite at #18265)
  • Fixed a bug causing suspended tree updates to be lost. (submitted by @acdLite at #18384 and #18457)
  • Fixed a bug that caused the render phase update to be lost. (submitted by @acdLite to #18537)
  • Fix SuspenseList bug. (Submitted by @sebmarkbage at #18412)
  • Bug fixed causing Suspense Fallback to show up too early (submitted by @acdLite at #18411)
  • Fix a bug in SuspenseList using the class component exception. (Submitted by @sebmarkbage at #18448)
  • Fixed bug where input may be updated and discarded. (submitted by @jDDXF at #18515 and @acdLite at #18535)
  • Bug Fixed bug where Suspense fallback gets stuck. (submitted by @acdLite at #18663)
  • Do not sever the end of the SuspenseList if hydrate is present. (Submitted by @sebmarkbage at #18854)
  • repairuseMutableSourceThis bug may exist ingetSnapshotOccurs when changes are made. (@bvaughnTo submit to# 18297)
  • repairuseMutableSourceDisgusting bug. (@bvaughnTo submit to# 18912)
  • If external render and commit before callingsetState, will issue a warning. (@sebmarkbageTo submit to# 18838)