五个特性，让你升级React

前端林子 • 2023-01-03 • 云技术社区 • 265 阅读

本系列文章主要将总结React从15.x升级到v16.x所需要注意的内容，本文则主要总结为什么要升级到v16.x，v16.x的一些新特性，主要内容包括：

1.文件体积基本上更小

笔者分别对比了v15.4.2和v16.8.6两个版本的文件大小。除了react-dom.development.js，其他的文件v16.8.6的体积更小。

文件名	v15.4.2	v16.8.6
react.js	125KB	101KB
react.min.js	21KB	13KB
react-dom.js	606KB	774KB
react-dom.min.js	121KB	106KB

了解更多，可点击

2.错误处理 Error boundaries

(1)React v16引入

(2)错误边界Error boundaries是什么呢？

Error boundaries是 React 组件，只有class类组件才可以成为错误边界组件。它会在其子组件树中的任何位置捕获 js错误，并记录这些错误，展示降级 UI 而不是崩溃的组件树。Error boundaries 组件会捕获在渲染期间，在生命周期方法以及其整个树的构造函数中发生的错误。

如果一个类组件定义了static getDerivedStateFromError()或者是componentDidCatch()中的任何一个(或两个)，那么这个类组件就变成一个错误边界Error boundaries。

当抛出错误后，使用static getDerivedStateFromError(error) 渲染备用 UI ，使用 componentDidCatch(error,info) 打印错误信息。

(3)错误边界无法捕获下面场景中产生的错误：

事件处理
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
服务端渲染
错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误。

3 render()返回新类型

render()用作渲染，在v16中渲染时可以不用再把组件包装到一个div中了。render()目前可返回以下几种类型：

react元素
布尔值或null：什么都不渲染
数组（v16.0.0新增）和Fragments片段（v16.2.0新增）：返回多个元素
字符串或数字（v16.0.0新增）：会被渲染为文本节点
Portals插槽（v16.0.0新增）：可渲染子节点到父组件之外

下面分别来看下新增的返回

3.1数组--v16.0.0新增

render() {
    // 不需要将清单项包装在额外的元素中
    // 要分配不同的键
    return [
        <li key="A">First item</li>,
        <li key="B">Second item</li>,
        <li key="C">Third item</li>,
    ];
}

3.2Fragments片段--v16.2.0新增

render() {
    return (
        <React.Fragment>
            <ChildA />
            <ChildB />
            <ChildC />
        </React.Fragment>
    );
}

引入Fragments可以将子列表分组，且不需要向DOM添加额外节点。这个额外节点的产生就是由于渲染时要把组件包到一个div里，这样可能会导致生成的HTML无效。

另外，目前唯一可以传给Fragments的属性是key。

3.3字符串--v16.0.0新增

render(){
    return "hello!"
}

有时需要将子组件插入到其他位置的DOM节点：

render() {
    // React 并没有创建一个新的 div。它只是把子元素渲染到 domNode中。
    // 第一个元素是任何可渲染的 React 子元素
    // 第二个元素domNode是一个可以在任何位置的有效 DOM 节点。
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    );
}

一个Portal的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。

最后，render()里不要使用setState。

4.可自定义DOM属性

如果在React v15中自定义属性，React v15会忽略它们。而在v16中，任何标准的或者自定义的DOM属性都是完全支持的，可以显示出来。React的属性采用了小驼峰命名的方式，例如：className 。

不过要注意，如果要使用自定义属性，则属性名全都为小写，例如：mycustomattribute。

// 自定义属性:
<div mycustomattribute="doSomething" />
// React v15输出:
<div />
// React v16输出:
<div mycustomattribute="doSomething" />/

5.增加Hooks

(1)Hooks在React 16.8.0中正式发布；

(2)Hooks是什么呢？

Hooks本质就是一类特殊的js函数，可以让本来无状态的函数组件变成有状态的，在函数组件内部hook组件的state和lifecycle。

Hooks特性是可选用的，并且向后兼容。

(3)使用

这里以useState（useState就是一个Hook）为例：

import React, { useState } from 'react';

function Example() {
    // 声明一个名为count的state变量。
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

(4)Hooks使用规则

Hooks只能在函数组件的顶级代码块中（或者自定义的 Hook 中）被调用，不能在if中、循环语句、子函数中使用；

可以使用一个linter插件eslint-plugin-react-hooks，这个插件会让你遵守这些规则。

其他好文章可以微信公众号搜索前端技术总结。