React16 新特性

Posted ellenchen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React16 新特性相关的知识,希望对你有一定的参考价值。

一、使用Error Boundary处理错误组件

        React16之前:组件在运行期出错,会阻塞整个应用的渲染。

        React16之后:引入新的错误处理机制——Error Boundary【错误边界】,当某个组件发生错误时,可以通过Error Biundary提供的内容代替组件的错误。

class ErrorBoundary extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hasError: false
        }
    }
    componentDidCatch(err, info) {
        this.setState({ hasError: true })
    }
    render() {
        if (this.state.hasError) {
            return <div>Something went wrong!</div>
        }
        return this.props.children
    }
}

export { ErrorBoundary }

  Error Boundary可以看作是一种特殊的React组件,新增了componentDidCatch这个生命周期函数,它可以捕获自身及子树上错误并对错误做优雅处理【??:它并不能捕获runtime所有的错误,比如组件回调事件里的错误】

 

 

二、render方法返回新增数据类型

        React16之前:必须返回单个元素

        React16之后:支持2种新的返回类型【数组、字符串】

   

render(){
    return [
        <div>hello</div>,
        <div>world</div>
    ]
}

 

render(){
    return ‘hello,world‘
}

 

三、使用createProtal 将组件渲染到当前组件树之外

      【典型应用场景】渲染应用的全局弹窗,任意组件都可以将弹框组件渲染到跟节点上。

        通过使用createProtal可以将组件渲染到我们想要的任意DOM节点中,但该组件依然处在React的父组件之内。

render(){
    //child——可以被渲染的react节点
    //container——一个Dom元素,child将被挂载到这个DOM上
    return ReactDOM.createPortal(child,container)
}

 

四、自定义DOM属性

        React16之前:忽略无法识别的html和SVG属性,属性只能通过data-*形式添加

        React16之后:把不会识别的属性传递给DOM

 

五、setState传入null时不会再触发更新

        更新state时,如果值没有变化,返回null可以直接避免触发更新,不会引起重复渲染

   

setName(name){
    this.setState((state)=>{
        if(state.name ===name){
            return null
        }
        return {name}
    })
}

 

 

以上是关于React16 新特性的主要内容,如果未能解决你的问题,请参考以下文章

React16 新特性

React16版本的新特性

[react] React16新特性有哪些?

react16.2新特性

react16.3的新特性

react hook 新特性汇总