React性能优化

概念

性能优化是指通过减少不必要的渲染或计算来提高应用的性能。React 提供了 React.memouseCallbackuseMemo 等工具来优化性能。

用法

  • React.memo:缓存函数组件,避免在 Props 没有变化时重新渲染。
  • useCallback:缓存回调函数,避免在每次渲染时重新创建。
  • useMemo:缓存计算结果,避免在依赖项没有变化时重新计算。

使用场景

  • React.memo:当父组件重新渲染时,子组件不需要重新渲染。
  • useCallback:当回调函数作为 Props 传递给子组件时。
  • useMemo:当计算结果依赖复杂逻辑或大量数据时。

代码示例

javascript 复制代码
// 1. 使用 React.memo 缓存组件
const ExpensiveComponent = React.memo(function({ value }) {
  console.log('ExpensiveComponent rendered');
  return <div>Value: {value}</div>;
});

function ParentComponent() {
  const [count, setCount] = React.useState(0);
  const [value, setValue] = React.useState(10);

  // 2. 使用 useCallback 缓存回调函数
  const increment = React.useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  // 3. 使用 useMemo 缓存计算结果
  const doubledValue = React.useMemo(() => {
    console.log('Calculating doubled value');
    return value * 2;
  }, [value]);

  return (
    <div>
      <button onClick={increment}>Increment Count: {count}</button>
      <button onClick={() => setValue(prev => prev + 5)}>Change Value: {value}</button>
      <div>Doubled Value: {doubledValue}</div>
      <ExpensiveComponent value={doubledValue} />
    </div>
  );
}

代码解析

  • React.memoExpensiveComponent 只会在 value 变化时重新渲染。
  • useCallbackincrement 函数在组件渲染时不会重新创建。
  • useMemodoubledValue 只会在 value 变化时重新计算。
相关推荐
江城开朗的豌豆1 分钟前
Vue路由钩子全攻略:让你的页面跳转更丝滑!
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue的data去哪儿了?生命周期寻宝记
前端·javascript·vue.js
玲小珑17 分钟前
Next.js 教程系列(十三)Server Actions:新一代全栈能力
前端·next.js
toooooop818 分钟前
elementUI vue2 前端表格table数据导出(二)
前端
山河木马36 分钟前
前端学习C++之:创建对象
前端·javascript·c++
汪子熙40 分钟前
web 应用本地开发中的 LiveReload 协议深度解析
前端·javascript
UI设计和前端开发从业者41 分钟前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
全宝1 小时前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子1 小时前
Web缓存:原理、策略与优化
前端·面试
小磊哥er1 小时前
【前端工程化】前端工作中如何协同管理开发任务?
前端