見識越廣，計較越少男应，經(jīng)歷越多，抱怨越少娱仔，越閑沐飘，越矯情。
React.memo()
React 16.6.0 正式發(fā)布了！這次主要更新了兩個新的重要功能：
- React.memo()
- React.lazy(): 使用 React Suspense 進行代碼拆分和懶加載
今天我們會重點介紹 React.memo()耐朴，后續(xù)會介紹 React.lazy() 和 Suspense借卧。
React.memo() 是什么？
React.memo() 和 PureComponent 很相似筛峭，它幫助我們控制何時重新渲染組件铐刘。
組件僅在它的 props 發(fā)生改變的時候進行重新渲染。通常來說影晓，在組件樹中 React 組件镰吵，只要有變化就會走一遍渲染流程。但是通過 PureComponent 和 React.memo()挂签，我們可以僅僅讓某些組件進行渲染疤祭。
const ToBeBetterComponent = React.memo(function MyComponent(props) {
// only renders if props have changed
})
由于只有需要被渲染的組件被渲染了，所以這是一個性能提升饵婆。
PureComponent 要依靠 class 才能使用勺馆。而 React.memo() 可以和 functional component 一起使用。
import React from 'react';
const MySnowyComponent = React.memo(function MyComponent(props) {
// only renders if props have changed!
});
// can also be an es6 arrow function
const OtherSnowy = React.memo(props => {
return <div>my memoized component</div>;
});
// and even shorter with implicit return
const ImplicitSnowy = React.memo(props => (
<div>implicit memoized component</div>
));
包裹已有的組件
由于 React.memo() 是一個高階組件侨核，你可以使用它來包裹一個已有的 functional component：
const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;
// create a version that only renders on prop changes
const MemoizedRocketComponent = React.memo(RocketComponent);
為什么它被稱作 memo谓传？
在維基百科上是這么說的：
在計算機領域，記憶化是一種主要用來提升計算機程序速度的優(yōu)化技術方案芹关。它將開銷較大的函數(shù)調(diào)用的返回結(jié)果存儲起來续挟，當同樣的輸入再次發(fā)生時，則返回緩存好的數(shù)據(jù)侥衬，以此提升運算效率诗祸。
注: 在 《JavaScript 忍者秘籍》的 3.2.2 節(jié)中「自記憶函數(shù)」中有這樣的介紹：記憶化是一種構(gòu)建函數(shù)的處理過程，能夠記住上次計算結(jié)果轴总。在這個果殼里直颅，當函數(shù)計算得到結(jié)果時就將該結(jié)果按照參數(shù)存儲起來。采用這種方式時怀樟，如果另外一個調(diào)用也使用相同的參數(shù)功偿，我們則可以直接返回上次存儲的結(jié)果而不是再計算一遍。像這樣避免既重復又復雜的計算可以顯著地提高性能往堡。
這就是 React.memo() 所做的事情械荷，所以叫做 memo 也很說得通。它會檢查接下來的渲染是否與前一次的渲染相同虑灰，如果兩者是一樣的吨瞎，那么就會保留上一次的渲染結(jié)果。
也有人在 Twitter 上問了 Dan 這個問題穆咐，Dan 解釋了為什么它叫做 memo 而不是像 PureComponent 那樣颤诀，被叫做 memo：
Memoized component. There was a lot of feedback on the RFC which we agree with — "pure" naming is confusing because memoization (which is what memo does) has nothing to do with function "purity".
結(jié)論
這是一個對于 React 非常有用的新功能字旭，因為我們之前只能使用 class component 來利用 PureComponent 帶來的性能優(yōu)勢。而現(xiàn)在崖叫，我們有了 React.memo()遗淳，就可以使用 functional component 了！
絮絮叨叨
最近對好多事情都提不起勁心傀，整個人都非常的不積極洲脂，這狀態(tài)真的很差勁。我覺得還是我把自己弄得太閑了剧包，很多事情擱置著恐锦，也沒有去做，需要讓自己忙起來疆液，多看書一铅，多看英語，多寫寫代碼堕油，應該就好了潘飘。嗯，醒醒掉缺。
