React.memo 和 JS 的 memorize 函数的区别
https://dmitripavlutin.com/use-react-memo-wisely/
使用 React.memo 进行组件记忆
React.memo是一个高阶组件。它很像 PureComponent，但 PureComponent 属于 Component 的类实现，而“memo”则用于创建函数组件。
这里与纯组件类似，如果输入props相同则跳过组件渲染，从而提升组件性能。
它会记忆上次某个输入 prop 的执行输出并提升应用性能。即使在这些组件中比较也是浅层的。
function MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
如果把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true，
否则返回 false
*/
}
export default React.memo(MyComponent, areEqual);
默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。这与shouldComponentUpdate方法的返回值相反。
你还可以为这个组件传递自定义比较逻辑。
用户可以用自定义逻辑深度对比（deep comparison）对象。如果比较函数返回 false 则重新渲染组件，否则就不会重新渲染。
function CustomisedComponent(props) {
return (
User name: {props.name}
User age: {props.age}
User designation: {props.designation}
)
}
// The component below is the optimised version for the Default Componenent
// The Component will not re-render if same props value for "name" property
var memoComponent = React.memo(CustomisedComponent);
上面的组件将对前后两个 props 的值进行浅层比较。
如果我们将对象引用作为 props 传递给 memo 组件，则需要一些自定义登录以进行比较。在这种情况下，我们可以将比较函数作为第二个参数传递给 React.memo 函数。
假设 props 值（user）是一个对象引用，包含特定用户的 name、age 和 designation。
这种情况下需要进行深入比较。我们可以创建一个自定义函数，查找前后两个 props 值的 name、age 和 designation 的值，如果它们不相同则返回 false。
这样，即使我们将参考数据作为 memo 组件的输入，组件也不会重新渲染。
// The following function takes "user" Object as input parameter in props
function CustomisedComponent(props) {
return (
User name: {props.user.name}
User age: {props.user.age}
User designation: {props.user.designation}
)
}
function userComparator(previosProps, nextProps) {
if(previosProps.user.name == nextProps.user.name ||
previosProps.user.age == nextProps.user.age ||
previosProps.user.designation == nextProps.user.designation) {
return false
} else {
return true;
}
}
var memoComponent = React.memo(CustomisedComponent, userComparator);