React v16.0 will be released on 叒. The agreement has been updated… Take a look at some of the other changes. I watch it by myself. Looking forward to the update of the official Chinese document.

React V16.0

We are happy to announce React V16.0! Some of the changes are long-standing feature requests, including fragments, boundary errors, portals, support for custom DOM attributes, better server-side rendering, and reduced file sizes.

The new render() return type

You can now return an array of elements in the Render method of a component. Just like any array, you need to add a key to each element of the array to avoid a key warning.



render() {
  // There is no need to include list items in an extra element
  return [
    // don't forget to add key :)
    <li key="A">First item</li>, 
  • Second item</
    • li>,
    <li key="C">Third item</li>, ]; }Copy the code

    In the future we might add a special fragment to JSX that doesn’t require a key attribute.

    We also enable Render to return a string:



    render() {
  return 'Hello React 16! ';
}Copy the code

    Better error handling

    Previously, React could crash with a runtime error during rendering, resulting in hidden error messages that required a page refresh to recover. To address this, React 16 uses a more flexible error handling mechanism. By default, if an error is thrown in a component’s render or other method of its lifecycle, the entire component tree is unloaded from the root. This is done to prevent the display of corrupted data. However, this may not be the optimal user experience.

    Every time an error occurs, the entire app is not uninstalled and you can see error boundaries. Error boundaries are a special component that can catch errors within a subtree and display a displayable fallback version UI. You can think of an error boundary as a try-catch statement for React.

    For more information, see this: Previous Post on Error handling in React 16

    Portals

    Portals provide an elegant way to render a child node into a DOM node other than its parent.



    render() {
  React will not create a new div. It will render the child components as in 'donNode'.
  // 'domNode' is any valid DOM node, no matter where it is in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}Copy the code

    See documentation for Portals for a more comprehensive example.

    Better server-side rendering

    React 16 includes a completely rewritten server renderer (Randerer). It’s really fast because it supports streaming, so you can send bytes to the client faster.

    Support for custom DOM attributes

    Previously, we ignored unrecognized HTML and SVG attributes. In the new version, React now passes them to the DOM. As an added bonus, the React property whitelist is removed, which reduces the file size.

    Reduce file size

    Despite these new features, React 16 is actually smaller than 15.6.1!

    • reactIs 5.3 KB (Gzip: 2.2 KB), previously 20.7 KB (Gzip: 6.9 KB)
    • react-domIs 103.7KB (gzip: 32.6KB), up from 141KB (gzip: 42.9KB)
    • react + react-domIs 109KB (gzip: 34.8KB), up from 161.7KB (GZIP: 49.8KB)

    It is 32% smaller than the previous version (30% smaller after gzip).

    MIT agreement

    The React 16 protocol is already MIT protocol, and of course, it also changes the release of page 15.6.2 to MIT protocol.