Geekly Articles each Day
📜 ⬆️ ⬇️

React v16.0 released

This is a translation of the post by Andrew Clarke on the release of the much-awaited version of React. Original React blog post .


We are pleased to announce the release of React v16.0! Among the changes are some long-awaited innovations, such as fragments , error handling (error boundaries) , portals , support for arbitrary DOM attributes , improvements in the server render , and a reduced file size .


New types for render: fragments and lines


Now you can return an array of elements from the component's render method. As with other arrays, you need to add a key to each element so that the reactor does not curse by varying:


 render() { //      ! return [ //     :) <li key="A"> </li>, <li key="B"> </li>, <li key="C"> </li>, ]; }

In the future, we will probably add a special syntax for fragments output, which will not require explicit key specifying.


We added support for returning rows:


 render() { return ', ,   !'; }

Full list of supported types .


Improved error handling


Previously, rendering errors during execution could completely break your application, and the error description was often uninformative, and the only way out was to reload the page. To solve this problem, React 16 uses a more reliable approach. By default, if an error appears inside the component render or in the lifecycle method, the entire component tree is unmounted from the root node. This avoids the display of incorrect data. However, this is not a very user friendly option.


Instead of unmounting the entire application with every error, you can use error boundaries . These are special components that intercept errors in their subtree and allow you to display a backup UI. Think of them as try-catch statements, but for React components.


For more information, check out our recent post about error handling in React 16 .


Portals


Portals provide a convenient way to render child components to a DOM node, which is outside the tree of the parent component.


 render() { // React    .      domNode. // domNode -    DOM-, //       DOM-. return ReactDOM.createPortal( this.props.children, domNode, ); }

A full example is in the documentation for portals .


Improved server rendering


React 16 contains a completely rewritten server renderer, and it is really fast. It supports streaming , so you can quickly start sending bytes to the client. And thanks to the new build strategy that removes the process.env access code (believe it or not, but reading process.env in Node is very slow!), You no longer need to react the bundle to get good server rendering performance.


Key developer Sasha Aikin wrote a wonderful article about the SSR improvements in React 16 . According to Sasha's benchmarks, server rendering in React 16 is about 3 times faster than in React 15. Comparing with the render in React 15 with the code removed from process.env code, the acceleration is 2.4 times in Node 4, about 3 times in Node 6 and already 3.8 times in Node 8.4. And if you compare with React 15 without compiling (without the process.env removed,), React 16 is an order of magnitude faster in the latest version of Node! (As Sasha pointed out, these synthetic benchmarks should be treated with caution, as they may not reflect the performance of real applications).


Moreover, React 16 is better in recovering HTML rendered on the server when it comes to the browser. The initial render used to verify the results from the server is no longer required. Instead, it will try to reuse as much of the existing DOM as possible. No more checksums will be used! In general, we do not recommend rendering content different from the server on the client, but this can be useful in some scenarios (for example, displaying time stamps).


See the ReactDOMServer documentation for more .


Support for arbitrary DOM attributes


Instead of ignoring unknown HTML and SVG attributes, now React will simply pass them to the DOM . In addition, this allows us to discard long lists of allowed attributes, which reduces the size of the bundle.


Reduced file size


Despite all these innovations, React 16 is smaller than React 15.6.1!



In total, the size has decreased by 32% compared with the previous version (30% after gzip compression).


The size reduction is partially affected by changes in the assembly. React now uses Rollup to create "flat" bundles ( apparently Andrew Clark meant "scope hoisting", which was long ago in the Rollup, but appeared in the Webpack only in the third version ) of all supported formats, which resulted in a gain and in the speed of work. Also, the flat format of the bundle leads to the fact that the impact of React on the application bundle remains the same, regardless of how you deliver your code to end users, for example. using Webpack, Browserify, already assembled UMD-modules or any other method.


MIT license


If you suddenly missed , React 16 is now available under the MIT license. And for those who can not upgrade immediately, we have laid out a version of React 15.6.2 under MIT.


New core architecture


React 16 is the first version of React, built on the basis of a new architecture called Fiber. You can read all about this project in the engineering blog Facebook . (Spoiler: we completely rewrote React!)


Fiber affects most new features in React 16, such as error boundaries or fragments. Through several releases you will see several new features, as we will gradually reveal the potential of React.


Probably the most impressive innovation we are working on is asynchronous rendering , which allows components to use cooperative multitasking within the framework of the rendering through periodic transfer of control to the browser. The bottom line is that asynchronous rendering applications are more responsive, since React does not block the main thread.


The following demo gives us a look at the essence of the problem solved by asynchronous rendering (hint: pay attention to the spinning black square).


Ever wonder what "async rendering" means? React tree with non-React work https://t.co/3snoahB3uV pic.twitter.com/egQ988gBjR


- Andrew Clark (@acdlite) September 18, 2017

We think asynchronous rendering is a very important thing moving React into the future. To make the transition to v16.0 as painless as possible, we have not yet included any asynchronous features, but we are happy to roll them out in the coming months. Stay tuned!


Installation


React v16.0.0 is available in the npm repository.


To install React 16 using Yarn:


 yarn add react@^16.0.0 react-dom@^16.0.0

To install React 16 using npm:


 npm install --save react@^16.0.0 react-dom@^16.0.0

We also provide a UMD version laid out on CDN:


 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Link to documentation for detailed installation instructions .


Switch from the old version


Although React 16 includes significant internal changes, in the event of an update, you can treat this release like any regular major release of React. We have been using React 16 on Facebook and Messenger.com since the beginning of this year, we rolled out several beta versions and release candidates to eliminate possible problems as much as possible. If you do not take into account some of the nuances, then your application should work with the 16th version, if from 15.6 it worked without any options .


Outdated methods


Recovering the server-rendered code now has an explicit API. To recover HTML you need to use ReactDOM.hydrate instead of ReactDOM.render . Continue using ReactDOM.render if you render only on the client side.


React Addons


As previously announced, we will stop supporting React Addons . We expect that the latest version of each add-on (except react-addons-perf ; see below) will work in the near future, but we will not publish new updates.


The link has previously published proposals for migration .


And react-addons-perf will not work at all in React 16. Most likely we will release a new version of this tool in the future. In the meantime, you can use browser tools to measure performance .


Incompatible changes


React 16 includes several small changes without backward compatibility. They affect rarely used scripts and will affect a small portion of applications.



Assembly



Requirements for the JavaScript environment:


React 16 depends on the Map and Set collections. If you support older browsers and devices that do not have this native (eg IE <11), use polyfills, such as core-js or babel-polyfill .


An environment with polyfiles for React 16 using core-js to support older browsers might look something like this:


 import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );

React also requires a requestAnimationFrame (even in test environments). A simple stub for test environments might look like this:


 global.requestAnimationFrame = function(callback) { setTimeout(callback, 0); };

Thanks


As usual, this release would not have been possible without our volunteer contributors (open source contributors). Thanks to everyone who started up bugs, opened pull requests, answered in tickets, wrote documentation.


Special thanks to our root contributors, especially for their heroic efforts over the past few weeks of the pre-release cycle: Brandon Dail , Jason Quense , Nathan Hunzaker , and Sasha Aickin .


')

Source: https://habr.com/ru/post/338932/

More articles:


All Articles