React 16.6 发布，一大波新功带你看将来的 React 开发方式

最近（2018-10-23）React官方发布了16.6版本，开放了一堆新的功能，而这其中的一些新功能，表明这将来的React开发方式，让咱们来一块儿窥探将来吧。

lazy

最让人期待的功能确定就是lazy功能了，配合发布了一个Suspense组件，也就是最开始命名为Placeholder的组件，用来配合render方法内部的异步操做的，让咱们先来看一下lazy的用法

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense>
  );
}
复制代码

作过code-splitting的同窗能闻到熟悉的味道。之前咱们要用第三方包或者本身处理异步过程，如今，React原生支持啦，并且你能够把异步的过程直接扔到render方法里面，就跟写普通组件同样，并且能够方便得经过Suspense组件来提供fallback

然而这并不只仅Suspense的惟一用处，事实上此次React正式开放Suspense组件表明着全部异步的操做均可以在render方法里面作了，其实我很意外，我觉得正式开放确定要等到17版本

那么异步操做还能作啥？若是同窗们看过年初Dan在冰岛的分享，应该就知道，Suspense可以让咱们加载数据的操做变得异常简单。没看过的同窗能够看这里，如今npm上也有一个包提供数据加载的功能了，simple-cache-provider，可是如今还不要在正式环境使用他哦。

关于这部分如何实现的，我会在以后的源码分析上详细讲解，有兴趣的同窗能够关注我。

React.memo

ClassComponent能够经过继承类PureComponent或者实现shouldComponentUpdate来主动判断组件是否须要从新渲染，以此来提升性能，可是FunctionalComponent到目前为止没有相似的功能。

因此今天React发布了React.memo方法，来实现相似PureComponent的功能，即浅比较props是否有变化，若是没有变化，就不从新渲染当前组件

const FunctionalComponent = React.memo((props) => {
  // only render if props change
})
复制代码

static contextType

在React16.3中提供了咱们一个标准的用于替代老的context的API，也就是React.createContext，而后经过context.Provider和context.Consumer来传递值，这种方式消除了老的context API性能低下的问题，这个问题我在以前也有详细分析，感兴趣的同窗能够看这里，并且老的API代码量不少，因此下个大版本React会移除老的API。

可是在让生态插件升级到新的API的过程当中，有人提出在ClassComponent中用新的API很麻烦（？？？没感受啊），因此React提供了一种在ClassComponent中使用新API的方法

import React, { Component } from 'react';

const context = React.createContext('defaultValue')


const ProviderComp = ({ children }) => (
  <context.Provider value="provider"> {children} </context.Provider> ) class ConsumerComp extends Component { static contextType = context componentDidMount() { console.log(this.context) } render() { return ( <p>{this.context}</p> ) } } class App extends Component { render() { return ( <ProviderComp> <ConsumerComp /> </ProviderComp> ); } } 复制代码

经过声明static contextType = context，让ClassComponent能够订阅最近的一个context provider，注意这里contextType是固定声明，换成别的名字都不行。若是ConsumerComp不在Provider的子树中，那么会使用defaultValue

class App extends Component {
  render() {
    return (
      <> <ProviderComp /> <ConsumerComp /> // show default value </> ); } } 复制代码

这也是为了提升React的总体性能，移除老旧API作努力。

static getDerivedStateFromError()

在发布Error Boundaries的时候，React提供了一个新的生命周期方法componentDidCatch，在捕获到错误的时候会触发，你能够在里面修改state以显示错误提醒的UI，或者将错误信息发送给服务端进行log用于后期分析。可是这里有个问题，就是在捕获到错误的瞬间，React会在此次渲染周期中将这个组件渲染为null，这就有可能致使他的父组件设置他上面的ref得到null而致使一些问题，因此如今提供了这个方法。

这个方法跟getDerivedStateFromProps相似，惟一的区别是他只有在出现错误的时候才触发，他相对于componentDidCatch的优点是在当前的渲染周期中就能够修改state，以在当前渲染就能够出现错误的UI，而不须要一个null的中间态。

而这个方法的出现，也意味着之后出现错误的时候，修改state应该放在这里去作，然后续收集错误信息之类的放到componentDidCatch里面。

StrictMode下的新提醒

StrictMode是用来提醒开发者用了即将被废弃的API的，像componentWillMount这些声明周期都会提醒，此次新加了两个API的提醒，ReactDOM.findDOMNode()，和老的context api。

也表明着这两个下个大版本确定会被移除。因此兄弟们还不赶忙更新！

我是Jocky，一个专一于React技巧和深度分析的前端工程师，React绝对是一个越深刻学习，越能让你以为他的设计精巧，思想超前的框架。关注我获取最新的React动态，以及最深度的React学习。更多的文章看这里