「React 基础」React 16 中的这几个新特性值得你关注（文末送漂亮的 React Redux 后台模板源码）...

最新推荐文章于 2024-08-19 11:40:12 发布

前端达人

最新推荐文章于 2024-08-19 11:40:12 发布

阅读量223

点赞数

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/102713647

版权

关注前端达人，与你共同进步

文末送高品质React Redux Admin 后台源码，不容错过哦！

本系列的上篇文章里，

640?wx_fmt=jpeg

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

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

<div>
...
</div>

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

640?wx_fmt=jpeg

直接返回字符串。

640?wx_fmt=jpeg

2、使用 Fragment

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

640?wx_fmt=jpeg

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.

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

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

640?wx_fmt=jpeg

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

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

5、react hook

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

640?wx_fmt=jpeg