react16新特性

1. 用 Error Boundary 处理错误

react 组件类中新增了一个componentDidCatch(err, info){}生命周期函数,这个钩子在组件以及子组件中捕捉到错误时会触发.因其会捕捉子组件的错我, 所以可以写一个ErrorBoundary组件, 来按需纠错:

class ErrorBoundary extends PureComponent { 
  constructor(...arg) {
    super(...arg);
    this.state = { hasError: false };
  }
  componentDidCatch(err, info) {
    this.setState({ hasError: true });
  }
  render() {
    if(this.state.hasError) return <div>组件出错了</div>
    return this.props.children
 }
}

2. 在 render 中返回没有容器元素的多个元素

render()方法中可以返回数组 []

3. 用 Text Only Component 减少 DOM 层级

组件可以返回纯文本, 不需要写另写一个dom节点

4. 用 createPortal 把组件渲染到当前组件树之外

reactDOM中的新房 portal(), 可以另起一个dom树, 适合做页面蒙版

5. 更加自由的 DOM 属性

支持自定义属性