您的位置:首页 > 博客中心 > 互联网 >

React16版本的新特性

时间:2022-05-05 17:56

React16版本更新的新特性

2018年05月03日 21:27:56 阅读数:188

1、render方法的返回值类型:New render return types 
之前的方式:

class App extends Component{
    render(){
        return ( 
            
hello
) } }

 

在react16版本中:返回值支持fragments and strings

//返回字符串的方式
class App extends Component{
    render(){
        return ‘hello react!‘
    }
}
//返回数组的方式
class App1 extends Component{
    render(){
        return [ 
            
  • item1
  • ,
  • item2
  • ,
  • item3
  • , ] } }

    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 

    Something went wrong.

    ; } return this.props.children; } }

    使用的时候,这样处理:

    render(){
        return ( 
            
        )
    }

    这是一种错误处理的方式。

    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是对核心算法的一次重新实现”,后续再深入学习。

    热门排行

    今日推荐

    热门手游