React v16.6 新特性介紹
更多技術文章，可以瀏覽我的github地址，ofollow,noindex">github.com/HuYuee/blog
10月23日，React釋出了16.6版本，在此版本中帶來了一些非常有用的新特性。主要的新特性包括:
-
React.memo()
-
React.lazy()
-
static contextType()
-
static getDerivedStateFromError()
React.memo()
React.memo() 是能作用在簡單的函式元件，類似於React.PureComponent對於class元件的作用。它本質上是一個高階函式，達到的效果就是，自動幫元件執行shouldComponentUpdate() , 但是隻是執行淺比較
Using memo()
使用方式就像高階函式一樣，包裝了一層，如下：
const MemoizedComponent = React.memo(function MyComponent(props) {
//_ only rerenders if props change_
});
// for arrow functions
const OtherMemoized = React.memo(props => {
return <div> Memoized Component </div>
}
複製程式碼
也能包裝已經存在的函式，如下：
const MyComponent = props => <div> This is memorable!! </div> const Memoized = React.memo(MyComponent) 複製程式碼
官網在最後明確提到了一句：
This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs。---- React官網
意思就是說：這個高階函式存在是作為一種效能優化的方式。不要使用它去純粹地阻止渲染，否則可能會導致出現bug
React.lazy() and Suspense
通過這個API，我們就可以達到程式碼分割的效果。程式碼分割是允許我們去延遲載入我們的import，意味著我們在渲染當前頁面的時候去提升當前頁面的效能，提高渲染速度。
React.lazy() 和 Suspense 現在暫時還不支援伺服器端渲染。如果你想要在伺服器端做程式碼分割，我們仍然推薦使用React Loadable。---- React官網
React.lazy()
React.lazy()允許我們去動態的載入元件。
普通方式引入：
import OtherComponent from './OtherComponent';
import AnotherComponent from './AnotherComponent';
function MyComponent(bool) {
return (
<div>
{bool?<OtherComponent />:<AnotherComponent />}
</div>
);
}
複製程式碼
動態的載入元件方式：
function MyComponent(bool) {
let Component;
if(bool){
Component = React.lazy(() => import('./OtherComponent'));
}else{
Component = React.lazy(() => import('./AnotherComponent'));
}
return (
<div>
<Component />
</div>
);
}
複製程式碼
Suspense
如果OtherComponent沒有被載入成功，我可以通過使用Suspense這個元件的引數fallback
引數來顯示一些類似於載入中的提示內容。如下：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
複製程式碼
最主要的是，Suspense
元件中可以包裹多個動態載入的元件，這樣統一管理，非常的方便。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
複製程式碼
關於動態載入元件的更加詳細的用法，包括路由裡面使用場景，可以參考地址
static contextType
在class中增加了該contextType屬性，這個屬性可以讓你在任何一個生命週期函式中都能通過this.context來使用到通過React.createContext()
建立的Context物件。在下面我會用兩個例子來對比這個屬性的好處。
使用contextType：
import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component {
render() {
let props = this.props;
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;
複製程式碼
未使用contextType：
import {ThemeContext} from './theme-context';
function ThemedButton(props) {
return (
<ThemeContext.Consumer>
{theme => (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
)}
</ThemeContext.Consumer>
);
}
export default ThemedButton;
複製程式碼
是不是發現方便了很多，不需要再包一層Consumer元件。但是這個現在支援class元件，函式元件還不支援。
static getDerivedStateFromError()
這個生命週期函式會在子元件丟擲一個錯誤之後被呼叫。它會接收到這個throw出來的引數，然後去return
一個值去更新state來處理這個錯誤。設定錯誤邊界可以讓程式碼在出錯的情況下，也能將錯誤顯示到頁面中，而不是出現空白頁面。demo
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
複製程式碼
一般使用static getDerivedStateFromError() 來渲染一個提示錯誤的UI，使用componentDidCatch() 來記錄一些error的詳細資訊，錯誤呼叫棧等等
更多技術文章，可以瀏覽我的github地址，github.com/HuYuee/blog