上QQ阅读APP看书，第一时间看更新
How to do it...
Let's see the new updates:
- Components can now return arrays and strings from render: Before, React forced you to return an element wrapped with a <div> or any other tag; now it is possible to return an array or string directly:
// Example 1: Returning an array of elements.
render() {
// Now you don't need to wrap list items in an extra element
return [
<li key="1">First item</li>,
<li key="2">Second item</li>,
<li key="3">Third item</li>,
];
}
// Example 2: Returning a string
render() {
return 'Hello World!';
}
- Also, React now has a new feature called Fragment, which also works as a special wrapper for elements. It can be specified with empty tags (<></>) or directly using React.Fragment:
// Example 1: Using empty tags <></>
render() {
return (
<>
<ComponentA />
<ComponentB />
<ComponentC />
</>
);
}
// Example 2: Using React.Fragment
render() {
return (
<React.Fragment>
<h1>An h1 heading</h1>
Some text here.
<h2>An h2 heading</h2>
More text here.
Even more text here.
</React.Fragment>
);
}
// Example 3: Importing Fragment
import React, { Fragment } from 'react';
...
render() {
return (
<Fragment>
<h1>An h1 heading</h1>
Some text here.
<h2>An h2 heading</h2>
More text here.
Even more text here.
</Fragment>
);
}
- Error boundaries with from the official website:
A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an "error boundary". Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info).
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false
};
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({
hasError: true
});
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Then you can use it as a regular component:
render() {
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
}
- Better server-side rendering with from the official site:
React 16 includes a completely rewritten server renderer. It's really fast. It supports streaming, so you can start sending bytes to the client faster. And thanks to a new packaging strategy that compiles away process.env checks (Believe it or not, reading process.env in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.
- Reduced file size with from the official site: "Despite all these additions, React 16 is actually smaller compared to 15.6.1.
- react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped)
- react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped)
- react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped)
That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip)."
If you want to check the latest updates on React, you can visit the official React blog: https://reactjs.org/blog.