React 是否正在从 React.memo 转向 useMemo？

Question

无论React.memo和useMemo钩通过减少重新计算和重新描绘允许性能优化。然而，它们确实有效，因为 React.memo 用于包装函数组件，并且useMemo钩子几乎可以用于任何函数，甚至是纯计算。更重要的useMemo是，通常从父组件React.memo调用子组件，而通常在子组件本身的声明上调用。

虽然两者都有不同的优点，但一个优点React.memo是不必从每个父子关系中调用它。然而，随着钩子的发布，很明显 React 开发希望转向使用钩子来处理状态、副作用事件和其他效果的功能组件。虽然我认为 React 开发团队不会有勇气或无视他们的用户群React.memo在未来 2 年内随时删除，但我想知道他们是否希望最终用户出于风格原因停止使用 React.memo。就像他们有种被动积极地从类组件转移到带有钩子的功能组件。

当使用带有钩子的功能组件时，react 框架是否正在远离React.memo? 如果将来想跟上 React 最佳实践，习惯使用钩子版本会更好吗？

Answer 1

最简洁的答案是不。

两者都用于优化性能对于减少不必要的重新渲染，但React.memo和useMemo用于两种不同的情景......

React.memo是一个 HOOC，通知 react 对传入的 props 进行浅层比较，决定是否重新渲染。

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

例子：

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

在这里，react 将进行浅比较，并且只有在名称更改时才会重新渲染。

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还有一个useCallback经常与React.memo.

如果你的父组件传递一个回调到被包裹在一个孩子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>
));