ErrorBoundary (v16.0)
React v16 之前，如果渲染中出现错误，整个页面会直接崩掉。如果对 React 足够了解，可能会知道一个秘而不宣的API:unstable_handleError。此函数可用于捕获页面错误，然而由于文档没记录，知道的开发者也寥寥无几。现在我们有了新的、官方的、稳定的 API:componentDidCatch。就像try catch一样，可用于捕获render过程中的错误，常用于捕获错误并渲染不同的页面，避免整个页面崩溃。
Portal (v16.0)
API为ReactDOM.createPortal。可以简单的理解为“传送门”，即可以直接渲染在父组件以外的任意 DOM 节点，常用于弹出框、提示框等，并且支持事件冒泡，行为完全与子组件一致。demo 代码在src/Portal下。注意此方法并不能随心所欲调用，只有在组件的 render 方法调用，并作为合法element的代替返回。
Note: 新的 API 挂载在 react-dom 下，并不是 React 包内。
import React from 'react'
import { createPortal } from 'react-dom'
class Dialog extends React.Component {
render() { return createPortal(( <div></div> ), document.querySelector('#dialog'))
}
}
即使整个应用都在div#app下，createPortal 依然能在之外的div#poral下渲染 Element。
Fragment(v16.0) & StrictMode(v16.3)
这两个静态组件均挂载在 React 包下，通过React.Fragment和React.StrictMode可访问到。
Fragment静态组件，v16.0 推出，用于将多个 React render 返回值包裹成一个具有顶级元素的element。之前如果我们需要返回多个元素，一定要在外面包一层<div></div>或其他的元素，React 还会将其渲染成真实 DOM；或直接返回一个相应的数组（React v16.0支持），但是非常丑陋，并且必须附带key属性，即使用不到。
现在新的 Fragment 仅用于包裹，并不会生成对应 DOM 了，就像普通的jsx一样，也不需要key属性了，还是非常不错的新功能。官方文档：Fragments
StrictMode 于 v16.3 推出。顾名思义，即严格模式，可用于在开发环境下提醒组件内使用不推荐写法和即将废弃的 API（该版本废弃了三个生命周期钩子）。与 Fragment 相同，并不会被渲染成真实 DOM。官方文档严格模式里详细介绍了会在哪些情况下发出警告。对于我们开发者来说，及时弃用不被推荐的写法即可规避这些警告。
Fragment 和 StrictMode 代码示例在src/NewComponent下：
import React, {Fragment, StrictMode} from 'react'
const FragmentItem = props => new Array(5).fill(null).map((k, i) => (
<Fragment key={i}>
<p>这是第{i}项</p>
<p>{i} * {i} = {i * i}</p>
</Fragment>
))
class OldLifecycleProvider extends React.Component {
// 以下三个函数在 React v16.3 已不被推荐，未来的版本会废弃。
componentWillMount() {
console.log('componentWillMount')
}
componentWillUpdate() {
console.log('componentWillUpdate')
}
componentWillReceiveProps() {
console.log('componentWillReceiveProps')
}
render() {
return (
<FragmentItem></FragmentItem>
)
}
}
export default class NewComponent extends React.Component {
state = {
propFlag: 2
}
// 使 OldLifecycleProvider 进入 componentWillReceiveProps 函数
componentDidMount() {
this.setState({
propFlag: 1
})
}
render() {
return (
<StrictMode>
<OldLifecycleProvider propFlag={this.state.propFlag}></OldLifecycleProvider>
</StrictMode>
)
}
}
复制代码渲染层级为：NewComponent -> OldLifecycleProvider -> FragmentItem，可以看到在 React dev tool下依然可以看到多层结构（Fragment并没有显示，比较遗憾，希望 dev tool 新版本能修复这个问题），但渲染出的 DOM 层级还是扁平的，直接挂载在 div.view 下。
另外，由于故意在 StrictMode 下使用了三个即将废弃的API，打开 console ，可看到如下错误提醒：
Note: 项目可直接使用StrictMode，不必检测是否为开发环境，因为只在开发环境起作用。
如果非常注重项目代码未来的可升级性，甚至可以在最顶层用 StrictMode 包裹。但其实除此之外，如果项目稳定，开启此模式对开发人员没有一点好处，甚至还有额外的迁移工作，因此不建议在已开始项目使用；但对代码重构有非常大的好处，可随时提醒开发人员即将废弃的 API 以便迁移。相信在 React 生态中会与 JS 的 'use strict' 一样应用越来越广泛。
作者：fengkk
链接：https://juejin.im/post/5ad949e36fb9a07aa92544e4
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
