专栏首页前端技术总结五个特性,让你升级React
原创

五个特性,让你升级React

本系列文章主要将总结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,这个插件会让你遵守这些规则。

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

6.小结

本文主要总结了React升级到16.8后能带来的一些优势和新的变化,由于篇幅原因,很多内容和细节并没有完全涉及,敬请理解。在下一篇React系列总结中,会详细介绍如何把一个旧项目从React v15升级到当前最新的React v16.8。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小结React(三):state、props、Refs

    在React中state、props、Refs都是最基础的概念,本文将同时梳理下这三个知识点,主要内容包括:

    前端林子
  • 前端技术月刊2019年5月(上)

    分别介绍了XSS、CSRF、点击劫持、URL跳转漏洞、SQL注入、OS命令注入攻击的原理和防御方式。

    前端林子
  • CSS基础:block,inline和inline-block

    css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

    前端林子
  • [干货分享]三大前端技术(React,Vue,Angular)探密

    前段时间写过一篇关于前端技术的概括性文章《前端技术的选择]》(http://3ms.huawei.com/km/blogs/details/7971337),本...

    Try425
  • 线性代数--MIT18.06(二十五)

    是秩 1 矩阵,因此秩为 1 ,也就说明在零空间是二维平面,即有两个特征值为 0 ,根据迹即为特征值相加之和,即可得到另一个特征值为 1 。其特征向量就是

    fireWang
  • Lambda的诞生

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    bering
  • 富文本编辑器 tinymce 的使用

    一款简洁表格功能齐全的富文本编辑器,表格编辑有比较强大的功能,支持获取html,设置只读功能

    tianyawhl
  • 微信小程序flex布局

    https://www.cnblogs.com/sun8134/p/6395947.html

    似水的流年
  • Kubernetes中Pod间共享内存方案

    自研的公共基础组件,比如服务路由组件、安全组件等,通常以进程方式部署在Node上并同时为Node上所有的业务提供服务,微服务及容器化之后,服务数量成百上千的增长...

    Walton
  • 数学--数论--欧几里得定理和拓展欧几里得定理

    证明: 我们首先约定:m = gcd(a,b) , n = gcd(b, q) , a = b*p +q。(这里的gcd含义跟上面一样,q的含义跟后面式子同)...

    风骨散人Chiam

扫码关注云+社区

领取腾讯云代金券