以上就是一些基本使用，關於實際例子的演示，還挺多的，可以單獨寫一篇文章了。 有時間的話在給大家介紹。

v16.6

memo

React 15：如果你想阻止組件的重複渲染，在class component裏可以使用PureComponent, shouldComponentUpdate來幫助你。但是如果你是function component，對不起，沒有這個功能， 只能每次都重新渲染。

React 16：為了全面擁抱function component,React團隊寫了memo來幫助function component實現這個阻止重複渲染的功能。

demo

在這個demo可以看到，如果沒有memo，每次點擊button控制檯都會列印render表示重新渲染。但是加了 memo之後，就不會了。

lazy、suspense

lazy需要跟Suspence配合使用，所以這裡放在一起介紹。

lazy實際上是幫助我們實現代碼分割的功能，使用過webpack的同學都知道，webpack也有這個功能。 那為什麼他們都要做這個功能呢？

其實是這樣的：由於有些內容，我們並不一定要在首屏展示，所以這些資源我們沒有必要一開始就要去獲取，那麼這些資源就可以動態獲取。這樣的話，相當於把不需要首屏展示的代碼分割出來，減少首屏代碼的體積，提升性能。

demo

在這個demo中，有3個tab。但是我們的首屏只需要先展示一個，所以其他的可以動態引入。 這裡以動態引入B為例：

<!--import B from "./B";-->

// 需要用到的時候才載入進來，當然還有預載入更好
const B = lazy(() => import("./B"));

但是這樣的話，一開始就可以點擊 B，會報錯。 因為需要當組件還在載入渲染的時候，需要一個place holder防止組件還沒載入完畢的時候可以有東西顯示給用戶。

這時候Suspence得作用就出來了。 Suspence 很像Error Boundary，不同的是Error Boundary是用來捕獲錯誤，顯示相應的callback組件。而Suspence是用來捕獲還沒有載入好的組件，並暫停渲染，顯示相應的callback。

我們給B加上Suspense 就搞定了。

<Suspense fallback={<div>Loading...</div>}>
<TabPanel>
<B />
</TabPanel>
</Suspense>


跟Error Boundary一樣，Suspence也有一個放置位置的問題，是整個包裹在App外，還是隻是給單獨的組件包裹？

我的選擇與Error Boundary依舊一致，應該將其包裹在子組件外面，因為這樣當某個組件沒有載入好的時候，不會影響到整個App都顯示一個loading的標識。

注意：

1. SSR不支持lazy這個特性。
2. Lazy 必須搭配Suspence使用，否則會報錯

進一步優化：

這裡我們在進一步思考一個點，目前我們的B組件是需要用到的時候才載入。萬一這個組件需要獲取數據，使得他顯示比較慢，就會顯示loading，導致我們用戶體驗比較差呢。所以我們可否在瀏覽器閑著的時候預載入這些即將要用到資源？

答案是可以的，React團隊也在做這件事情。 但是這個API目前為止還沒有Ready，大家先知道這個事情好了~

簡化static contextType

簡化獲取context的方式，之前需要用一個在外層包裹一個<Consumer>,如下：

// Theme context, default to light theme
const ThemeContext = React.createContext(light);

// Signed-in user context
const UserContext = React.createContext({
name: Guest,
});

class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;

// App component that provides initial context values
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}

function Layout() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}

// A component may consume multiple contexts
// 同時如果是function component 用Consumer
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

現在可以直接通過this.context獲取。

class MyClass extends React.Component {
static contextType = MyContext;
componentDidMount() {
let value = this.context;
/* perform a side-effect at mount using the value of MyContext */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* render something based on the value of MyContext */
}
}
MyClass.contextType = MyContext;


新增static getDerivedStateFromError

v16.3這個版本里，React 除了Error Boundaries來捕獲錯誤，裡面主要是使用了componentDidCatch來捕獲 錯誤。但是它是在錯誤已經發生之後並且render函數被調用之後，才會被調用。 也就是說如果一個組件出現的錯誤，在調用 componentDidCatch之前只能返回null給用戶。

注意事項： componentDidCatch,getDerivedStateFromError都無法捕獲服務端的錯誤，但是React團隊正在努力支持SSR。

改進前的ErrorBoundary:

class ErrorBoundary extends React.Component {
state = { hasError: false };

componentDidCatch(error, info) {
this.setState({ hasError: false })
logErrorToMyService(error, info);
}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}

return this.props.children;
}

改進後的ErrorBoundary（推薦寫法）：

class ErrorBoundary extends React.Component {
state = { hasError: false };

static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
// 更新state所以下次render可以立刻顯示fallback UI
return { hasError: true };
}

componentDidCatch(error, info) {
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}

return this.props.children;
}

以上就是v16.4 ~ v16.6的全部內容，考慮到大家應該比較累了，Hooks又是比較大的特性，所以還是分到下一篇吧~

本文對你有幫助的話，點個贊吧~

推薦閱讀：