【Day 26】渲染备忘：Memo

React.memo

React.memo 主要的作用是性能优化，
使用 memo 後，程序会将 render 结果存在快取内，
并在 render 时比较前後两次的 props 是否变化，
来判定是否需要 re-render。
如果没有变化时就使用上一次 render 的结果，
以避免重新渲染没有更新的元件造成不必要消耗。

但如果是父元件重新渲染，
由於父元件宣告的 Object 都会被重新分配记忆体位址，
因此使用 React.memo 防止重新渲染将会失效。

另外，memo 的功能是优化效能，
不应用来避免 render。

关於 Memo

本身是一个高阶元件（HOC，higher order component）
只能包裹函式元件（function component）
仅判断 props 的改变，不会追踪 state 的变化。
使用浅比较（shallow compare）

shallow compare 是指遍历物件的所有 key 值，如果 key 值都一样就返回 true。也就是严格比较基本型别（number、string 等），但对物件仅比较是否指向同一个参考。

使用范例

const MyComponent = React.memo(function MyComponent(props) {
	return(
	<div>
		{ props.name }
	</div>
	)
});

也允许箭头函式

const MyComponent = React.memo(props=>{
	return(
	<div>
		{ props.name }
	</div>
	)
})

React.memo 的第二参数

自订比较 props 的方法，
可以让 Object 不只是比较记忆体位置

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

除了加入 React.memo 的第二参数之外，
也可以利用 useCallback 来避免重新渲染。