react 16的一些新特性

1.render 新的返回类型

React  16之前，render方法必须返回单个元素，现在，render方法支持两种新的返回类型：数组（由React元素组成）和字符串。

定义一个 ListComponent组件，它的render方法返回数组：

再定义一个StringComponent组件，它的render方法返回字符串

App组件的render方法渲染ListComponent和StringComponent：

2.错误处理

     React 16之前，组件在运行期间如果执行出错，就会阻塞整个应用的渲染，这时候只能刷新页面才能恢复应用。React 16引入了新的错误

处理机制，默认情况下，当组件中抛出错误时，这个组件会从组件树中卸载，从而避免整个应用的崩溃。这种方式比起之前的处理方式有所进

步，但用户体验依然不够友好。React 16还提供了一种更加友好的错误处理方式——错误边界（Error Boundaries）。错误边界是能够捕获子组件的错误并对其做优雅处理的组件。优雅的处理可以是输出错误日志、显示出错提示等，显然这比直接卸载组件要更加友好。

定义了componentDidCatch(error, info)这个方法的组件将成为一个错 误边界，现在我们创建一个组件ErrorBoundary：

在App中使用ErrorBoundary：

点击更新按钮后，Profile接收到的属性user为null，程序会抛出TypeError，这个错误会被ErrorBoundary捕获，并在界面上显示出错提

示。注意，使用create-react-app创建的项目，当程序发生错误时，create-react-app 会在页面上创建一个浮层显示错误信息，要观察ErrorBoundary的正确效果，需要先关闭错误浮层。

3. 自定义DOM属性

React 16之前会忽略不识别的HTML和SVG属性，现在React会把不识别的属性传递给DOM元素。例如，React 16之前，下面的React元素

<div custom-attribute="something" />

在浏览器中渲染出的DOM节点为：

<div />

而React 16渲染出的DOM节点为：

<div custom-attribute="something" />