React 16新特性

react 16新特性

3.1 render 新的返回类型

数组和字符串

react 16版本以前只能返回一个根元素

react 16以后版本支持返回 一个数组(Array) 或者 字符串(String)

3.2 错误处理

通过定义错误检验组件（ErrorBoundary）中使用componentDidCatch (error, info ) 生命周期函数

显示错误的元素

同时输出错误log

3.3 Portals

React 16的Portals的特性让我们可以把组件渲染到当前组件树以外的dom节点上

应用场景：渲染全局的全局弹框 使用Portals后，任意组件都可以将弹框组件渲染到根节点上，以方便弹框的显示

ReactDom.createPortals( child , container )

constructor(props){
    super(props)
    
    this.container = document.createElement('div');
    document.body.appendChild(this.container);
}

componentWillUnMount(){
    document.removeChild(this.container)
}

render(){
    return ReactDom.createPortals(
        <Modals/>
        {this.container}
    )
}

3.4 ReactDom 自定义的属性

custom-attribute

render(){
    return {
        <div custom-attribute="info">
    }
}

转载于:https://www.cnblogs.com/Jasonpub/p/10748502.html