React 16版本后的新特性

ErrorBoundary (v16.0)

React v16 之前,如果渲染中出现错误,整个页面会直接崩掉。如果对 React 足够了解,可能会知道一个秘而不宣的API:unstable_handleError。此函数可用于捕获页面错误,然而由于文档没记录,知道的开发者也寥寥无几。现在我们有了新的、官方的、稳定的 API:componentDidCatch。就像try catch一样,可用于捕获render过程中的错误,常用于捕获错误并渲染不同的页面,避免整个页面崩溃。

Portal (v16.0)

API为ReactDOM.createPortal。可以简单的理解为“传送门”,即可以直接渲染在父组件以外的任意 DOM 节点,常用于弹出框、提示框等,并且支持事件冒泡,行为完全与子组件一致。demo 代码在src/Portal下。注意此方法并不能随心所欲调用,只有在组件的 render 方法调用,并作为合法element的代替返回。

Note: 新的 API 挂载在 react-dom 下,并不是 React 包内。

import React from 'react'

import { createPortal } from 'react-dom'

class Dialog extends React.Component {

    render() {  return createPortal((     

        ), document.querySelector('#dialog'))

    }

}

即使整个应用都在div#app下,createPortal 依然能在之外的div#poral下渲染 Element。

Fragment(v16.0) & StrictMode(v16.3)

这两个静态组件均挂载在 React 包下,通过React.Fragment和React.StrictMode可访问到。

Fragment静态组件,v16.0 推出,用于将多个 React render 返回值包裹成一个具有顶级元素的element。之前如果我们需要返回多个元素,一定要在外面包一层

或其他的元素,React 还会将其渲染成真实 DOM;或直接返回一个相应的数组(React v16.0支持),但是非常丑陋,并且必须附带key属性,即使用不到。

现在新的 Fragment 仅用于包裹,并不会生成对应 DOM 了,就像普通的jsx一样,也不需要key属性了,还是非常不错的新功能。官方文档:Fragments

StrictMode 于 v16.3 推出。顾名思义,即严格模式,可用于在开发环境下提醒组件内使用不推荐写法和即将废弃的 API(该版本废弃了三个生命周期钩子)。与 Fragment 相同,并不会被渲染成真实 DOM。官方文档严格模式里详细介绍了会在哪些情况下发出警告。对于我们开发者来说,及时弃用不被推荐的写法即可规避这些警告。

Fragment 和 StrictMode 代码示例在src/NewComponent下:

import React, {Fragment, StrictMode} from 'react'

const FragmentItem = props => new Array(5).fill(null).map((k, i) => (

   

       

这是第{i}项

       

{i} * {i} = {i * i}

   

))

class OldLifecycleProvider extends React.Component {

    // 以下三个函数在 React v16.3 已不被推荐,未来的版本会废弃。

    componentWillMount() {

        console.log('componentWillMount')

    }

    componentWillUpdate() {

        console.log('componentWillUpdate')

    }

    componentWillReceiveProps() {

        console.log('componentWillReceiveProps')

    }

    render() {

        return (

           

        )

    }

}

export default class NewComponent extends React.Component {

    state = {

        propFlag: 2

    }

    // 使 OldLifecycleProvider 进入 componentWillReceiveProps 函数

    componentDidMount() {

        this.setState({

            propFlag: 1

        })

    }

    render() {

        return (

           

               

           

        )

    }

}

复制代码渲染层级为:NewComponent -> OldLifecycleProvider -> FragmentItem,可以看到在 React dev tool下依然可以看到多层结构(Fragment并没有显示,比较遗憾,希望 dev tool 新版本能修复这个问题),但渲染出的 DOM 层级还是扁平的,直接挂载在 div.view 下。

另外,由于故意在 StrictMode 下使用了三个即将废弃的API,打开 console ,可看到如下错误提醒:

Note: 项目可直接使用StrictMode,不必检测是否为开发环境,因为只在开发环境起作用。

如果非常注重项目代码未来的可升级性,甚至可以在最顶层用 StrictMode 包裹。但其实除此之外,如果项目稳定,开启此模式对开发人员没有一点好处,甚至还有额外的迁移工作,因此不建议在已开始项目使用;但对代码重构有非常大的好处,可随时提醒开发人员即将废弃的 API 以便迁移。相信在 React 生态中会与 JS 的 'use strict' 一样应用越来越广泛。

作者:fengkk

链接:https://juejin.im/post/5ad949e36fb9a07aa92544e4

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(React 16版本后的新特性)