React16版本更新的新特性
1、render方法的返回值类型:New render return types
之前的方式:
class App extends Component{ render(){ return ( <div>hello</div> ) } }
在react16版本中:返回值支持fragments and strings
//返回字符串的方式
class App extends Component{ render(){ return 'hello react!' } } //返回数组的方式 class App1 extends Component{ render(){ return [ <li key='A'>item1</li>, <li key='B'>item2</li>, <li key='C'>item3</li>, ] } }
2、更好的错误处理:Better error handling
核心是componentDidCatch周期函数。
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { // Display fallback UI this.setState({ hasError: true }); // You can also log the error to an error reporting service logErrorToMyService(error, info); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; } }
使用的时候,这样处理:
render(){
return (
<ErrorBoundary><User /></ErrorBoundary> ) }
这是一种错误处理的方式。
3、Portals,把一个组件挂载到界面的任意DOM上。
使用场景:给一个界面添加Modal层。
render() {
return ReactDOM.createPortal(
this.props.children,
domNode,
);
}
4、setState传入null时不会再触发更新
selectCity(e){
const newValue = e.target.value;
this.setState((state)=>{
if(state.city===newValue){ return null; } return {city:newValue} }) )
5、支持自定义DOM属性
在之前的版本中,React会忽略无法识别的HTML和SVG属性,自定义属性只能通过data-*形式添加,现在它会把这些属性直接传递给DOM(这个改动让React可以去掉属性白名单,从而减少了文件大小),不过有些写法仍然是无效的。如DOM传递的自定义属性是函数类型或event handler时,依然会被React忽略。
6、基于流模式的服务端渲染
React 16的SSR被完全重写,新的实现非常快,接近3倍性能于React 15,现在提供一种流模式streaming,可以更快地把渲染的字节发送到客户端。另外,React 16在hydrating(注:指在客户端基于服务器返回的HTML再次重新渲染)方面也表现的更好,React 16不再要求客户端的初始渲染完全和服务器返回的渲染结果一致,而是尽量重用已经存在的DOM元素。不会再有checksum(标记验证)!并对不一致发出警告。一般来说,在服务器和客户端渲染不同的内容是不建议的,但这样做在某些情况下也是有用的(比如,生成timestamp)。
7、新的打包策略
新的打包策略中去掉了process.env检查。
React 16的体积比上个版本减小了32%(30% post-gzip),文件尺寸的减小一部分要归功于打包方法的改变。
React 16采用了新的核心架构React Fiber。官方解释是“React Fiber是对核心算法的一次重新实现”,后续再深入学习。