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學習。更多的文章看這裏