【React】React18 Hooks 之memo、useCallback

在React18中，memo和useCallback是非常有用的工具，可以帮助优化React应用的性能。

1. memo是一个高阶组件，它可以防止在组件的props没有改变的情况下重新渲染组件。这可以帮助你避免在不需要的时候进行不必要的渲染，从而提高性能。

import React from 'react';
import { memo } from 'react';
 
const MyComponent = (props) => {
  // 你的组件逻辑
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  );
};
 
export default memo(MyComponent, (prevProps, nextProps) => {
  // 这里可以指定哪些props的变化会导致重新渲染
  return prevProps.name === nextProps.name;
});

2. useCallback是一个Hook，它返回一个记住的回调函数。当你传递props作为useCallback的依赖项，只有当依赖项改变的时候，回调函数才会更新。这可以帮助你避免在不需要的时候创建新的函数，从而提高性能。

import React, { useCallback } from 'react';
 
const MyComponent = (props) => {
  const memoizedCallback = useCallback(() => {
    console.log('This is a memoized callback');
  }, [props.someDependency]);
 
  return (
    <div>
      <button onClick={memoizedCallback}>Click me</button>
    </div>
  );
};
 
export default MyComponent;

在这个例子中，只有当props.someDependency改变的时候，memoizedCallback才会更新。这样可以防止在不需要的时候进行不必要的函数创建，从而提高性能。