一、使用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 
       
        Something went wrong!
       
 } return this.props.children } } export { ErrorBoundary }

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

 

 

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

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

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

 　　

render(){    return [        
       
        hello
       
,        
       
        world
       
    ]}

 

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}    })}