Typecho合集站

一个喜欢Typecho站长搭建的站点,为能服务更多typecho用户

微信授权扫码点餐新特性React16

react16的新特性主要在以下四个方面:

download:网易云课堂微信授权扫码点餐-新特性React16

  新的生命周期

  新的语法

  优化

  hook

新的生命周期

在react16中,不建议使用以下生命周期函数:

  componentWillMount()

  componentWillReceiveProps(nextProps, nextState)

  componentWillUpdate()

新增了以下生命周期函数:

  static getDerivedStateFromProps(nextProps, prevState)

  getSnapshotBeforeUpdate(prevProps, prevState)

  componentDidCatch(error, info)

static getDerivedStateFromProps(nextProps, prevState)

在组件实例内无法调用静态方法,静态方法中也无法通过this使用实例中的其他属性或方法。可以防止对组件实例的错误操作。

主要用来在组件实例后、接受到新的prop后,进行调用。此方法返回一个对象,这个对象会被更新到实例的state中;如果返回为空,则不会更新。

getSnapshotBeforeUpdate(prevProps, prevState)

在DOM更新前调用,返回值将被传给componentDidUpdate

componentDidCatch(error, info)

在之前,只要某个组件中出现错误,整个应用就会崩溃。通过此函数,在发生错误的组件的父组件中进行错误捕获。如果组件的父组件中未处理,则去父组件的父组件中进行查看是否有处理函数,层层递归。

新的语法

在之前,ref是通过在元素上指定ref值进行使用,并通过this.refs.xxx进行获取,在react16中,新增了以下两个定义方式:

// 第一种方式constructor(){   this.inputRef = React.createRef()
}render(){   return (      <input ref={this.inputRef} />
   )
}// 第二种方式render(){   return (      <input ref={(ref) => {this.inputRef = ref}} />
   )
}

如果是需要层层传递的props,可以通过React.createContext避免嵌套。

性能方面的优化

fragment

react要求jsx元素是树结构,但每次需要在最外层包裹一个容器会造成浪费。react提供了fragment,让我们在实现元素列表时,无需增加额外节点

render(){   return (      <> // 也可以用<React.Fragments>
        <tr><td></td></tr>
        <tr><td></td></tr>
      </> //也可以用</React.Fragments>
   )
}

React.memo()

用来控制组件何时重新渲染。在之前,只要有更新就会引起该组件及其所有子组件重新渲染。使用memo就可以实现仅仅部分组件渲染。类似之前的pureComponent,但可以在函数组件中使用。

React.lazy & React.Suspens

实现React的Code Spliting对React代码进行拆包,有效的减少一次性加载太多代码的问题。

用法:

const IconDemo = lazy(() => import('./icon'));<Suspense fallback={<div className="loading">Loading...</div>}>    <Route path="/" component={Home} exact />
    <Route path="/icon" component={IconDemo} /></Suspense>

hook

实现了在函数组件中使用state,详解参考官网



上一篇 : HTML入门
下一篇 : OSI七层模型与TCP协议

发表新评论