2

两者React.memo和useMemo钩子都可以通过减少重新计算和重新渲染来优化性能。但是，它们确实有效，因为 React.memo 用于包装功能组件，并且useMemo钩子几乎可以用于任何功能，甚至是纯计算。更重要的useMemo是，通常从父组件调用到子组件，而React.memo通常在子组件本身的声明上调用。

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

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

4

1 回答 1

9

最简洁的答案是不。

两者都用于优化性能以减少不必要的重新渲染，但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 will 进行浅比较，并且仅在名称更改时才会重新渲染。

useMemo是一个钩子，用于记忆一个值。useMemo只有在依赖项（的第二个参数）发生变化时，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还有一个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>
));
于 2020-04-18T17:53:52.270 回答