reactjs v18 memo中如果去 server中 fetch 数据那么memo就会失效

React v18 中的 memo 是用来优化组件性能的，它可以防止组件在没有必要重新渲染的情况下进行渲染。然而，如果在 memo 组件中使用 fetch 方法从服务器获取数据，那么 memo 可能会失效。

这是因为 memo 仅仅对组件的 props 进行浅比较来确定是否重新渲染组件。如果组件的 props 没有发生变化，那么 memo 会返回之前缓存的组件，而不会重新渲染。

但是，使用 fetch 方法从服务器获取数据时，即使组件的 props 没有发生变化，也可能需要重新渲染组件。因为 fetch 请求是一个异步操作，它的结果可能会在后续的渲染中才可用。在这种情况下，即使组件的 props 没有变化，也需要重新渲染以显示最新的数据。

为了解决这个问题，可以在组件中使用 useEffect 钩子来处理 fetch 请求，并将请求结果存储在组件的状态中。这样，在每次组件重新渲染时，可以使用 memo 包装组件并传递最新的数据作为 props，而不会导致 memo 失效。

下面是一个示例代码：

import React, { memo, useEffect, useState } from 'react';

const MyComponent = memo(() => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
});

在这个示例中，使用 useEffect 在组件挂载时进行一次 fetch 请求，并将请求结果存储在组件的状态中。然后，将数据映射为一组 div 元素进行渲染。由于数据存储在组件状态中，并且不会随着组件的重新渲染而改变，所以可以使用 memo 包装组件来优化性能