React新特性(memo、lazy、suspense、hooks)
react 16给我们带来的一些列重要变化
render/纯组件能够return任何数据结构,以及CreatePortal Api- 新的
context api,尝试代替一部分redux的职责 babel的<>操作符,方便用户返回数组- 异步渲染/时间切片(time slicing),成倍提高性能
componentDidCatch,错误边界,框架层面上提高用户debug的能力- 未来的
Suspense,优雅处理异步副作用 - 未来的
hooks
# 一、memo
React v16.6.0出了一些新的包装函数(wrapped functions),一种用于函数组件PureComponent/shouldComponentUpdate形式的React.memo()
React.memo()是一个高阶函数,它与React.PureComponent类似,但是一个函数组件而非一个类
现在有一个显示时间的组件,每一秒都会重新渲染一次,对于
Child组件我们肯定不希望也跟着渲染,所有需要用到PureComponent
import React from 'react';
export default class extends React.Component {
constructor(props){
super(props);
this.state = {
date : new Date()
}
}
componentDidMount(){
setInterval(()=>{
this.setState({
date:new Date()
})
},1000)
}
render(){
return (
<div>
<Child seconds={1}/>
<div>{this.state.date.toString()}</div>
</div>
)
}
}
@前端进阶之旅: 代码已经复制到剪贴板
PureComponent
class Child extends React.PureComponent {
render(){
console.log('I am rendering');
return (
<div>I am update every {this.props.seconds} seconds</div>
)
}
}