「React 基础」React 16 中的这几个新特性值得你关注

本系列的上篇文章里,「React 基础」在 React 项目中使用 ES6,你需要了解这些 ,我给大家介绍了 ES6 在 React 的常见用法,本篇文章将会大家简单的介绍下,在 React 16 版本中,有哪些新的特性是值得我们关注的。

1、 组件的 return 方法里可以是数组和字符串

比较熟悉 React 的小伙伴们,应该有比较深的印象,以前我们在 return 方法里最外层一定要包裹闭合的标签,例如:

<div>
...
</div>

现在可以不这么做了,我们可以直接以数组内容返回或者字符串。

直接返回字符串。

2、使用 Fragment

在react中,渲染的元素都必须被一个根标签包裹。但有的时候,我们并不想页面多出来这么一个父元素,这个时候Fragment就发挥作用了。这个小家伙可以看做是-占位符,能够使最外层的包裹元素隐藏。代码示意如下:

3、Error Boundaries

在之前的React版本中规定,如果在组件中javascript报错,那么会在下一次的render中阻断,并且显示空白页。React之前没有提供一种合适的处理组件错误的方法,而 React16.0 中通过Error Boundaries 来处理组件内部的错误,从而可以修正错误组件。

那什么是 Error Boundaries?首先我们看看官网的英文解释:

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

这段话大概的意思就是:错误边界是一个组件,这个组件可以用来捕获它的子组件中产生的错误,记录错误日志并在错误发生的位置展示一个“回退”或者说是一个错误信息页面,以避免因为局部组件错误而导致的整个组件树崩溃。错误边界可以在捕获其其子组件的渲染、生命周期函数以及构造函数内的错误。

介绍完了,我们来通过下一段代码来学习下如何使用:

4、更好的服务端渲染模块

官方几乎对这个模块进行了重写,服务端渲染速度更快,最大的特点支持流,渲染流可以减小第一个字节(TTFB)渲染时间,在文档的下一个部分生成之前,将文档的开头向下发送到浏览器。所有主流浏览器都会在服务器以这种方式流出内容时开始解析和呈现文档。从呈现流中获得的另一个很棒的东西是响应的能力。这意味着,在实践中如果网络支持,不能接受更多的字节,渲染得到的信号与停顿渲染到堵塞清理。这意味着服务器使用更少的内存,对I/O条件更敏感,这两种情况都可以帮助服务器在充满挑战的条件下保持正常工作。在接下来的文章里我会详细的进行介绍。

5、react hook

react hook是react中引入新特性,它可以让react函数组件也拥有状态;通过自定义hook可以实现在组件间公用状态操作;react提供了useState、useEffect两个hook函数,来创建stack hook和effect hook。首先呢我们来看一个简单的示例快速了解下,在接下来的文章里我会详细的进行介绍。

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跨平台全栈俱乐部

100行JavaScript代码在React中优雅的实现简单组件keep-Alive

移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项...

9610
来自专栏编程沉思录

muduo源码分析

muduo是陈硕大神个人开发的C++的TCP网络编程库。muduo基于Reactor模式实现。Reactor模式也是目前大多数Linux端高性能网络编程框架和网...

23550
来自专栏code秘密花园

大前端时代,浅谈JavaScript开发重型跨平台应用以及架构

https://juejin.im/post/5d8f3062e51d45782632e363

10330
来自专栏进击的全栈

React v16.8: The One With Hooks

Hook 可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,你也可以自定义 Hook 来在组件之间共享可重用的状态逻辑。

7000
来自专栏码匠的流水账

聊聊NacosNamingService的registerInstance

本文主要研究一下NacosNamingService的registerInstance

3200
来自专栏前端干货和生活感悟

React源码解析之requestHostCallback

前言: 在React源码解析之scheduleWork(下)中,我们讲到了unstable_scheduleCallback,其中在「按计划插入调度任务」后,会...

11720
来自专栏前端干货和生活感悟

前端小知识10点(2019.9.29)

1、获取指定日期的上一周或上上周(moment.js) 比如获取2019-01-01的上一周的起始日期或者是上N周的起始日期

10310
来自专栏码匠的流水账

聊聊NacosNamingService的deregisterInstance

本文主要研究一下NacosNamingService的deregisterInstance

4000
来自专栏Jerry的SAP技术分享

如何使用JavaScript开发AR(增强现实)移动应用 (一)

所谓AR(Augmented Reality), 即增强现实,是一种将通过计算机渲染出的虚拟图像与真实世界巧妙融合的手段,背后广泛运用了多媒体、三维建模、实时跟...

3500
来自专栏code秘密花园

透过现象看本质: 常见的前端架构风格和案例

没多少人能记住上面的定义,需要注意的是本文不是专业讨论系统架构的文章,笔者也还没到那个水平. 所以暂时没必要纠结于什么是架构模式、什么是架构风格。在这里尚且把它...

11610

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励