前端之家收集整理的这篇文章主要介绍了
十分钟带你快速了解React16新特性，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前段时间React的16版本发布了，采用了MIT开源许可证，新增了一些新的特性。
- Error Boundary
- render方法新增返回类型
- Portals
- 支持自定义DOM属性
- setState传入null时不会再触发更新
- 更好的服务器端渲染
- 新的打包策略
- ...
1. 使用Error Boundary处理错误组件
之前，一旦某个组件发生错误，整个组件树将会从根节点被unmount下来。React 16修复了这一点，引入了Error Boundary的概念，中文译为“错误边界”，当某个组件发生错误时，我们可以通过Error Boundary捕获到错误并对错误做优雅处理，如使用Error Boundary提供的内容替代错误组件。Error Boundary可以看作是一种特殊的React组件，新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）
import React,{ Component } from 'react'
export default class ErrorBoundary extends Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch(err,info) {
this.setState({ hasError: true })
//sendErrorReport(err,info)
}
render(){
if(this.state.hasError){
return
Something went wrong!
}
return this.props.children
}
}
我们可以在容易出错的组件外使用ErrorBoundary将它包裹起来，如下
)
}
//number
render(){
return 12345
}
//boolean
render(){
return isTrue?true:false
}
//null
render(){
return null
}
//fragments，未加key标识符，控制台会出现warning
render(){
return [
hello
,
world,
oh
]
}
以上各种类型现在均可以直接在render中返回，不需要再在外层包裹一层容器元素，不过在返回的数组类型中，需要在每个元素上加一个唯一且不变的key值，否则控制台会报一个warning。
Portals机制提供了一种最直接的方式可以把一个子组件渲染到父组件渲染的DOM树之外。默认情况下，React组件树和DOM树是完全对应的，因此对于一些Modal,Overlay之类的组件，通常是将它们放在顶层，但逻辑上它们可能只是属于某个子组件，不利于组件的代码组织。通过使用createPortal，我们可以将组件渲染到我们想要的任意DOM节点中，但该组件依然处在React的父组件之内。带来的一个特性就是，在子组件产生的event依然可以被React父组件捕获，但在DOM结构中，它却不是你的父组件。对于组件组织，代码切割来说，这是一个很好的属性。
效果，抽象出一个通用的Overlay组件
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
export default class Overlay extends Component {
constructor(props) {
super(props);
this.container = document.createElement('div');
document.body.appendChild(this.container);
}
componentWillUnmount() {
document.body.removeChild(this.container);
}
render() {
return ReactDOM.createPortal(
×
{this.props.children}
,this.container
)
}
}
//该组件对应的样式如下
.overlay{
Box-sizing:border-
Box;
position: fixed;
top:50%;
left:50%;
width:260px;
height:200px;
margin-left:-130px;
margin-top:-100px;
padding:10px;
background-color: #fff;
outline: rgba(0,.5) solid 9999px;
}
.overlay-close{
position: absolute;
top:10px;
right:10px;
color:red;
cursor: pointer;
}
SEOverlay = this.clo
SEOverlay.bind(this);
this.showOverlay = this.showOverlay.bind(this);
}
clo
SEOverlay() {
this.setState({ overlayActive: false })
}
showOverlay() {
this.setState({ overlayActive: true })
}
render() {
return (
hello world!
{this.state.overlayActive &&
overlay content}
