五个特性，让你升级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。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。