1. 首页
  2. IT资讯

「React 手册」React 16 中值得你关注的新特性

“u003Cdivu003Eu003Cpu003E本系列的上篇文章里,u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6735716224618988043u002F?group_id=6735716224618988043″ target=”_blank”u003E「React 手册」在 React 项目中使用 ES6,你需要了解这些(一)u003Cu002Fau003E ,我给大家介绍了 ES6 在 React 的常见用法,本篇文章将会大家简单的介绍下,在 React 16 版本中,有哪些新的特性是值得我们关注的。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fa7a0e91486584f729a50868a9b27b8ff” img_width=”705″ img_height=”397″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E1、 组件的 return 方法里可以是数组和字符串u003Cu002Fh1u003Eu003Cpu003E比较熟悉 React 的小伙伴们,应该有比较深的印象,以前我们在 return 方法里最外层一定要包裹闭合的标签,例如:u003Cu002Fpu003Eu003Cpreu003E<div>u003Cbru003E…u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E现在可以不这么做了,我们可以直接以数组内容返回或者字符串。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F18a31f1051954261aa7c63ceb69974eb” img_width=”1848″ img_height=”1468″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E直接返回字符串。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F9232bd22258541d6a165fd302424696d” img_width=”1476″ img_height=”844″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E2、使用 Fragmentu003Cu002Fh1u003Eu003Cpu003E在react中,渲染的元素都必须被一个根标签包裹。但有的时候,我们并不想页面多出来这么一个父元素,这个时候Fragment就发挥作用了。这个小家伙可以看做是-占位符,能够使最外层的包裹元素隐藏。代码示意如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F1a646c3dcc2940aba9b4d532b1076ef4″ img_width=”1948″ img_height=”3508″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E3、Error Boundariesu003Cu002Fh1u003Eu003Cpu003E在之前的React版本中规定,如果在组件中javascript报错,那么会在下一次的render中阻断,并且显示空白页。React之前没有提供一种合适的处理组件错误的方法,而 React16.0 中通过Error Boundaries 来处理组件内部的错误,从而可以修正错误组件。u003Cu002Fpu003Eu003Cpu003E那什么是 Error Boundaries?首先我们看看官网的英文解释:u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003EError 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.u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E这段话大概的意思就是:错误边界是一个组件,这个组件可以用来捕获它的子组件中产生的错误,记录错误日志并在错误发生的是,展示一个“回退”或者说是一个错误信息页面,以避免因为局部组件错误而导致的整个组件树崩溃。错误边界可以在捕获其 其子组件的渲染、生命周期函数以及构造函数内的错误。u003Cu002Fpu003Eu003Cpu003E介绍完了,我们来通过下一段代码来学习下如何使用:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F5a222266467b4f44ae8b6a64fc15583e” img_width=”2284″ img_height=”3076″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E4、更好的服务端渲染模块u003Cu002Fh1u003Eu003Cpu003E官方几乎对这个模块进行了重写,服务端渲染速度更快,最大的特点支持流,渲染流可以减小第一个字节(TTFB)渲染时间,在文档的下一个部分生成之前,将文档的开头向下发送到浏览器。所有主流浏览器都会在服务器以这种方式流出内容时开始解析和呈现文档。从呈现流中获得的另一个很棒的东西是响应的能力。这意味着,在实践中如果网络支持,不能接受更多的字节,渲染得到的信号与停顿渲染到堵塞清理。这意味着服务器使用更少的内存,对Iu002FO条件更敏感,这两种情况都可以帮助服务器在充满挑战的条件下保持正常工作。在接下来的文章里我会详细的进行介绍。u003Cu002Fpu003Eu003Ch1u003E5、react hooku003Cu002Fh1u003Eu003Cpu003Ereact hook是react中引入新特性,它可以让react函数组件也拥有状态;通过自定义hook可以实现在组件间公用状态操作;react提供了useState、useEffect两个hook函数,来创建stack hook和effect hook。首先呢我们来看一个简单的示例快速了解下,。在接下来的文章里我会详细的进行介绍。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F95b1041e2fa440249c424015a391c371″ img_width=”2656″ img_height=”1828″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小节u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002Fd8530304-c980-40c9-b297-81053fde21fb” img_width=”1200″ img_height=”856″ alt=”「React 手册」React 16 中值得你关注的新特性” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E好了,今天的内容就和大家分享到这里,下一篇问文章将给大家介绍如何在windows下更好的使用React。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「React 手册」React 16 中值得你关注的新特性

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10702.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code