最近（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學習。更多的文章看這裡
作者：Jokcy
連結：https://juejin.im/post/5bd68c446fb9a05d25682654
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
![對React Hooks的一些思考[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)