const MemoizedComponent = React.memo(function MyComponent(props) {
  /* 渲染邏輯 */
});

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  // 返回 true 表示不需要重新渲染
  // 返回 false 表示需要重新渲染
  return prevProps.id === nextProps.id;
});

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  // 復(fù)雜的渲染邏輯
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
});
// 父組件
function ParentComponent() {
  const [count, setCount] = useState(0);
  const data = [/* 大量數(shù)據(jù) */];
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveComponent data={data} />
    </div>
  );
}

const ListItem = React.memo(function ListItem({ item, onItemClick }) {
  console.log(`Rendering item ${item.id}`);
  return (
    <li onClick={() => onItemClick(item.id)}>
      {item.name}
    </li>
  );
});
function List({ items }) {
  const [selectedId, setSelectedId] = useState(null);
  // 使用 useCallback 來記憶回調(diào)函數(shù)
  const handleItemClick = useCallback((id) => {
    setSelectedId(id);
  }, []);
  return (
    <ul>
      {items.map(item => (
        <ListItem
          key={item.id}
          item={item}
          onItemClick={handleItemClick}
        />
      ))}
    </ul>
  );
}

const memoizedValue = useMemo(() => {
  // 進(jìn)行計(jì)算并返回結(jié)果
  return computeExpensiveValue(a, b);
}, [a, b]); // 依賴項(xiàng)數(shù)組，空數(shù)組時(shí)只有初始化的時(shí)候執(zhí)行，沒有依賴參數(shù)項(xiàng)state每次變化都會(huì)引起重新執(zhí)行，有依賴數(shù)組室，依賴數(shù)據(jù)發(fā)生變化才會(huì)觸發(fā)重新執(zhí)行

function DataAnalytics({ data }) {
  const processedData = useMemo(() => {
    // 假設(shè)這是一個(gè)復(fù)雜的數(shù)據(jù)處理函數(shù)
    return data.map(item => ({
      ...item,
      processed: expensiveOperation(item)
    }));
  }, [data]); // 只在 data 改變時(shí)重新計(jì)算
  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>{item.processed}</div>
      ))}
    </div>
  );
}

function ParentComponent({ items }) {
  // 記憶對(duì)象或數(shù)組類型的 props
  const memoizedValue = useMemo(() => ({
    data: items,
    config: {
      sortBy: 'name',
      filterBy: 'active'
    }
  }), [items]);
  return <ChildComponent options={memoizedValue} />;
}

function UserDashboard({ user, transactions }) {
  // 計(jì)算用戶統(tǒng)計(jì)信息
  const userStats = useMemo(() => {
    return {
      totalSpent: transactions.reduce((sum, t) => sum + t.amount, 0),
      averageSpent: transactions.length
        ? transactions.reduce((sum, t) => sum + t.amount, 0) / transactions.length
        : 0,
      mostFrequentCategory: calculateMostFrequentCategory(transactions)
    };
  }, [transactions]);
  return (
    <div>
      <UserInfo user={user} />
      <UserStatistics stats={userStats} />
    </div>
  );
}

// ? 好的使用場(chǎng)景：純組件，props 很少改變
const PureComponent = React.memo(function PureComponent({ data }) {
  return <div>{/* 渲染邏輯 */}</div>;
});
// ? 不好的使用場(chǎng)景：props 經(jīng)常變化
const FrequentlyChangingComponent = React.memo(function FrequentlyChangingComponent({ date }) {
  return <div>{date.toLocaleTimeString()}</div>;
});

// ? 好的使用場(chǎng)景：計(jì)算開銷大
const expensiveValue = useMemo(() => {
  return someExpensiveOperation(props.data);
}, [props.data]);
// ? 不好的使用場(chǎng)景：計(jì)算開銷小
const simpleValue = useMemo(() => {
  return props.value + 1;
}, [props.value]); // 這種情況直接計(jì)算即可

function SearchComponent({ onSearch }) {
  const [query, setQuery] = useState('');
  // 記憶回調(diào)函數(shù)
  const handleSearch = useCallback(() => {
    onSearch(query);
  }, [query, onSearch]);
  // 記憶計(jì)算結(jié)果
  const searchResults = useMemo(() => {
    return performExpensiveSearch(query);
  }, [query]);
  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <button onClick={handleSearch}>搜索</button>
      <ResultsList results={searchResults} />
    </div>
  );
}
// 使用 React.memo 優(yōu)化 ResultsList
const ResultsList = React.memo(function ResultsList({ results }) {
  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.title}</li>
      ))}
    </ul>
  );
});

// ? 錯(cuò)誤示例
{items.map(item => {
  const memoizedValue = useMemo(() => compute(item), [item]);
  return <div>{memoizedValue}</div>;
})}