react 16新特性

3.1 render 新的返回类型

数组和字符串

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

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">
    }
}
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄