是否反应从React.memo转向了useMemo？

Question

React.memo和useMemo钩子都允许通过减少重新计算和重命名来优化性能。但是，它们确实起作用，因为React.memo用于包装一个函数组件，useMemo钩子几乎可以用于任何函数，甚至是纯计算。更重要的是，useMemo通常从父组件调用到子组件，而React.memo通常在子组件本身的声明中被调用。

虽然两者都有不同的优势，但React.memo的一个优点是，不必从每个父级调用到子级关系。然而，随着钩子的释放，显然，React开发希望转向使用钩子来处理状态、副作用事件和其他影响的功能组件。虽然我不认为会有勇气或无视他们的用户群在未来2年内随时删除React.memo，但这让我怀疑他们是否希望最终用户出于风格上的原因停止使用React.memo。就像他们有一种被动的，积极的，远离类组件，更倾向于使用钩子的功能组件。

当使用带有钩子的功能组件时，react框架是否脱离了React.memo？如果一个人想跟上未来的反应最佳实践，那么习惯使用钩子版本会更好吗？

Answer 1

简短的回答是否定的。

这两种方法都用于优化性能以减少不必要的重呈现，但React.memo和useMemo用于两种不同的场景.

React.memo是一个HOOC，它通知react对传入的道具执行简单的比较，以确定是否重新呈现。

https://reactjs.org/docs/react-api.html#reactmemo

示例：

export const Component = React.memo(({name}) => `Hello ${name}`)

在这里，对一个简单的比较作出反应，并且只有在名称发生变化时才会重新呈现.

useMemo是一个钩子，用于回溯一个值。只有在依赖项(useMemo的第二个arg )发生变化时，React才会重新评估该值。有使用规则的钩子，应该遵循。

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创建回调是个好主意，否则由于每次重新呈现父组件时会重新创建回调，其子组件将重新呈现。

useCallback还接受一个类似于useMemo的依赖数组，以便在依赖项发生变化时可以重新创建它。

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>
));