Question

React.memo和useMemo挂钩都可以通过减少重新计算和重新呈现来优化性能。但是，它们绝对起作用，因为React.memo用于包装功能组件，并且useMemo钩子可用于几乎所有函数，甚至是纯计算。更重要的是，useMemo通常是从父级到子级组件调用的，而React.memo通常是在子级本身的声明上调用的。

虽然两者都有不同的优点，但是React.memo的一个优点是不必从每个父对子关系中调用它。但是，随着钩子的发布，很明显，React开发希望转向使用钩子处理状态，副作用事件和其他影响的功能组件。尽管我认为React开发团队不会在未来两年内任何时候有勇气或无视他们的用户群来移除React.memo，但令我感到奇怪的是，他们是否希望最终用户停止使用React。备注出于风格原因。就像他们被动地从类组件中移走，而转向带有钩子的功能组件一样。

在将功能组件与挂钩一起使用时，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}`)

在这里，做出反应会进行比较浅的比较，并且只有在名称更改时才会重新呈现。

useMemo 是一个钩子，用于存储值。只有在依赖关系（useMemo的第二个arg）发生变化时，React才会重新评估该值。 rules带有钩子，应遵循。

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

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

1 个答案: