React 中hooks之 React.memo 和 useMemo用法示例总结

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 }) {
  // 复杂的渲染逻辑
  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 = [/* 大量数据 */];
  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 来记忆回调函数
  const handleitemclick = usecallback((id) => {
    setselectedid(id);
  }, []);
  return (
    <ul>
      {items.map(item => (
        <listitem
          key={item.id}
          item={item}
          onitemclick={handleitemclick}
        />
      ))}
    </ul>
  );
}

const memoizedvalue = usememo(() => {
  // 进行计算并返回结果
  return computeexpensivevalue(a, b);
}, [a, b]); // 依赖项数组，空数组时只有初始化的时候执行，没有依赖参数项state每次变化都会引起重新执行，有依赖数组室，依赖数据发生变化才会触发重新执行

function dataanalytics({ data }) {
  const processeddata = usememo(() => {
    // 假设这是一个复杂的数据处理函数
    return data.map(item => ({
      ...item,
      processed: expensiveoperation(item)
    }));
  }, [data]); // 只在 data 改变时重新计算
  return (
    <div>
      {processeddata.map(item => (
        <div key={item.id}>{item.processed}</div>
      ))}
    </div>
  );
}

function parentcomponent({ items }) {
  // 记忆对象或数组类型的 props
  const memoizedvalue = usememo(() => ({
    data: items,
    config: {
      sortby: 'name',
      filterby: 'active'
    }
  }), [items]);
  return <childcomponent options={memoizedvalue} />;
}

function userdashboard({ user, transactions }) {
  // 计算用户统计信息
  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>
  );
}

// ✅ 好的使用场景：纯组件，props 很少改变
const purecomponent = react.memo(function purecomponent({ data }) {
  return <div>{/* 渲染逻辑 */}</div>;
});
// ❌ 不好的使用场景：props 经常变化
const frequentlychangingcomponent = react.memo(function frequentlychangingcomponent({ date }) {
  return <div>{date.tolocaletimestring()}</div>;
});

// ✅ 好的使用场景：计算开销大
const expensivevalue = usememo(() => {
  return someexpensiveoperation(props.data);
}, [props.data]);
// ❌ 不好的使用场景：计算开销小
const simplevalue = usememo(() => {
  return props.value + 1;
}, [props.value]); // 这种情况直接计算即可

function searchcomponent({ onsearch }) {
  const [query, setquery] = usestate('');
  // 记忆回调函数
  const handlesearch = usecallback(() => {
    onsearch(query);
  }, [query, onsearch]);
  // 记忆计算结果
  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 优化 resultslist
const resultslist = react.memo(function resultslist({ results }) {
  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.title}</li>
      ))}
    </ul>
  );
});

// ❌ 错误示例
{items.map(item => {
  const memoizedvalue = usememo(() => compute(item), [item]);
  return <div>{memoizedvalue}</div>;
})}