专栏首页前端技术总结五个特性,让你升级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 18探秘(上)

    React 17 那篇没有任何新特性的博客还历历在目,半年多后,终于等来了 17 铺路许久的 18 发布计划,本来想赶紧看看都有些啥,无奈事情略多,一直拖到现在...

    Teobler
  • React的Hook让函数组件拥有class组件的特性!

    Hook 是以 use 开头的特殊函数(useState、useEffect等),只能在 函数组件 内部使用。它可以让你在不编写 class 的情况下使用...

    Learn-anything.cn
  • React Native 的未来与React Hooks

    近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想...

    GSYTech
  • 一起走进React核心团队

    表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。

    公众号@魔术师卡颂
  • React 18不再依赖Concurrent Mode开启并发更新了

    大家好,我卡颂。 相信很多关注React进展的朋友都了解Concurrent Mode,他是「渐进升级」策略的产物。

    公众号@魔术师卡颂
  • React的操作系统梦,任重道远

    React Core Team从16年开始改造React的核心模块Reconciler(diff算法会在该模块执行)。

    公众号@魔术师卡颂
  • React 16 新特性全解(上)

    本次系列分上下两篇文章,上主要介绍从v16.0~ 16.4的新特性,下主要介绍16.5~16.8。下面就开始吧~

    前端迷
  • React v17.0 正式发布!

    今天,我们宣布 React 17 正式发布!在此之前,我们在 React 17 RC 的博文中已经介绍了 React 17 发布的意义以及包含的变化。此文是针对...

    公众号@魔术师卡颂
  • React Router3到5 升级小记

    不光是你在用,我们很多项目也在用,懒得升级,感觉改动太大,升级了后谁知道会出什么问题,别没事找事。

    zz_jesse
  • React 17 RC 版发布:无新特性,却有新期待!

    React 17 版本很特别,因为它并没有任何面向开发者的新功能,而是专注在了如何更轻松地升级 React 本身。

    zz_jesse
  • React VS Vue:2020年应该选哪个?[每日前端夜话0xD3]

    Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。2020 年将会是为你的 Web 项目选择正确的 javas...

    疯狂的技术宅
  • 如何选择前端框架:ANGULAR VS EMBER VS REACT

    最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架。Ember2.0在2个月之前已经发布,从1.0升...

    葡萄城控件
  • React v16.0正式版发布

    我们很高兴的宣布React v16.0发布了,这次版本的新增了一些呼声很高的特性,包括支持render返回数组和字符串、错误处理、portals、自定义DOM属...

    疯狂的技术宅
  • [问答] 为什么要用vue-cli3?

    其实这个问题主要是想了解vue-cli3与vue-cli2相比是否存在一些不得不升级的好处和优点?

    _sx_
  • React Native 架构演进

    上一篇(React Native 架构一览)从设计、线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React N...

    ayqy贾杰
  • React 16 Roadmap

    其中,Concurrent Mode(之前叫Async Rendering)无疑是最值得期待的东西,或将引领变革(合作式调度机制可能泛化成为浏览器能力)

    ayqy贾杰
  • React 17.0.0-rc.2带来全新的JSX转换

    北京时间 9 月 23 日凌晨,React 团队发布了关于全新 JSX 转换的博客,同时发布了 React 17.0.0-rc.2 版本,新的 JSX 转换不再...

    公众号@魔术师卡颂
  • React 16 加载性能优化指南(下)

    | 导语 本篇干货是接本周三React 16 加载性能优化指南(上)推文。 关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一...

    腾讯NEXT学位
  • 写给初中级前端的高级进阶指南(JS、TS、Vue、React、性能、学习规划)

    我曾经一度很迷茫,在学了Vue、React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题...

    ssh_晨曦时梦见兮

扫码关注云+社区

领取腾讯云代金券