React 高阶组件memo 的使用

import { FC, memo } from 'react';
import ReactMarkdown, { Options } from 'react-markdown';

export const MemoizedReactMarkdown: FC<Options> = memo(
    ReactMarkdown,
    (prevProps, nextProps) => (
        prevProps.children === nextProps.children
    )
);

memo 是 React 的一个高阶组件，它对组件进行优化，以减少不必要的重新渲染。当使用 React.memo 时，React 将在组件的 props 发生变化时进行重新渲染，否则会复用最近的渲染结果。

memo 是用来优化 ReactMarkdown 组件的。

这里传递给 memo 的第二个参数是一个比较函数，它接收两个参数：前一个 props（prevProps）和下一个 props（nextProps）。

这个函数的目的是对比前后 props 的变化，如果返回 true，则不会触发重新渲染；如果返回 false，则会触发重新渲染。

这段代码的逻辑是，只有当 children 属性发生变化时才重新渲染 ReactMarkdown 组件。

这样可以避免因其他 props 的微小变化而导致的不必要的渲染，从而提高应用程序的性能。

需要注意的是，这里的 ReactMarkdown 接收的是 Options 类型的 props，这是因为 ReactMarkdown 的 props 就是一个 Options 对象，这个对象包含了所有可以传递给 ReactMarkdown 的属性。所以 FC<Options> 也就表示了一个接收 Options 类型的 props 的函数组件。