React.memo和useMemo挂钩都允许通过减少重新计算和重新渲染来进行性能优化。然而，它们的工作原理是React.memo用于封装函数组件，useMemo钩子几乎可以用于任何函数，甚至是纯计算。更重要的是，useMemo通常从父组件调用到子组件，而React.memo通常在子组件本身的声明中调用。
虽然两者都有不同的优点，但React.memo的一个优点是它不必从每个父子关系中调用。然而，随着钩子的发布，React的开发显然希望转向使用钩子来处理状态、副作用事件和其他影响的功能组件。虽然我不认为React开发团队会有勇气或无视他们的用户群在未来两年的任何时候删除React.memo，但这让我怀疑他们是否希望最终用户出于风格原因停止使用React.memo。正如他们有点被动地积极地远离类组件，转而使用带钩子的功能组件一样。
当使用带钩子的功能组件时，react框架是否正在远离React.memo？如果将来想跟上React的最佳实践，习惯使用hook版本会更好吗？
简短的回答是否定的。
两者都用于优化性能，以减少不必要的重新渲染，但React.memo和useMemo用于两种不同的场景。。。
React.moom是一个HOOC，通知React对传入的道具进行浅层比较，以确定是否重新渲染。
https://reactjs.org/docs/react-api.html#reactmemo
示例：
export const Component = React.memo(({name}) => `Hello ${name}`)
在这里，将对浅层比较作出反应，并且只有在名称发生更改时才会重新渲染。
useMemo是一个钩子，用于存储值。React只有在依赖项(useMemo的第二个参数(发生变化时才会重新评估该值。应该遵守钩子的使用规则。
https://reactjs.org/docs/hooks-reference.html#usememo
示例：
export const MyComponent = ({firstName, lastName, age}) => {
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);
return <Profile fullName={fullName} />
}
你可以破解useMemo来做一些类似React.memo的事情，但它不打算这样使用。
useCallback还有一个经常与React.memo一起使用的useCallback钩子。
如果父组件将回调传递给封装在React.memo中的子组件，最好使用useCallback创建回调，否则子组件无论如何都会重新渲染，因为每次父组件重新渲染时都会重新创建回调。
CCD_ 16还采用类似于CCD_ 17的依赖性数组，以便在依赖性发生变化时可以重新创建它。
https://reactjs.org/docs/hooks-reference.html#usecallback
示例：
export const MyComponent = ({firstName, lastName, age}) => {
const handleClick = useCallback((e) => {
e.preventDefault();
// doSomething
}, []);
return <Profile onClick={handleClick} />
}
const Profile = React.memo((onClick) => (
<button onClick={onClick)>Click me!</button>
));