本文轉自 FEPulse 公眾號(微信搜尋 FEPulse,精選國內外最新前端資訊,為你把握前端脈搏)。
React v16.6 釋出,包含一些便捷的功能,我們對此進行梳理。
React.memo
React.memo 是一個高階元件,類似於 React.PureComponent,但引數是函式元件而不是類元件。
純函式的意思是傳入同樣的輸入應該得到同樣的輸出,對應的,對於一個函式元件而言,如果傳入同樣的 props,渲染結果也應該一樣的話,那麼使用 React.memo 包裹這個函式元件則可以獲得較大的效能提升。
原理是 React 會對傳入的 props 進行淺比較,如果 props 沒有變化,則直接返回上一次渲染結果,避免重複渲染。你也可以在 React.memo 的第二個引數中定製自己的比較邏輯。
這裡有個小插曲,在起名上,有人問為啥不叫 React.pure,而叫 React.memo 呢?對此,React 的作者 Dan 對此迴應:React.memo 中的 memo 是 memoization,即快取的意思,React.memo 賦予了函式元件快取的能力,並且 memoization 太難拼寫,因此這個方法最終被稱為 React.memo。
React.lazy: Code-Splitting with Suspense
Suspense 最初是由 Dan 在今年 3 月份的 JSConf Iceland 2018 中提出,我們對此也做了詳細介紹: 【前端資訊】React 的未來:Time Slicing 和 Suspense
從 v16.6 開始,你可以使用 Suspense 元件和 React.lazy 方法做 Code Splitting。
需要注意的是,這種使用方式還不支援 SSR。
static contextType
從 v16.3 開始,React 引進了 new Context API,但釋出之後反饋不太理想,使用起來比較困難,因此從 v16.6 開始新增了一個便利的 API 來使用類元件中的 context value。
static getDerivedStateFromError()
React v16 引入了 Error Boundaries 來處理渲染時丟擲的錯誤,同時錯誤發生時也會觸發 componentDidCatch。在觸發之前,錯誤的元件將被當做 null 處理,但這可能不符合父元件的 ref 不能為 null 的預期。同時,它也無法從伺服器上的錯誤中恢復,因為 Did 開頭的生命週期方法在伺服器端並不會觸發。
因此,React v16.6 新增了 static getDerivedStateFromError(error) 方法,允許開發者在 render 完成之前渲染 Fallback UI。這個生命週期函式觸發的條件是子元件丟擲錯誤,然後 getDerivedStateFromError 接收這個錯誤引數後更新 state。
Deprecations in StrictMode
棄用了 StrictMode 中的兩個 API:ReactDOM.findDOMNode() 和 Legacy Context。