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 变化时重新计算。
相关推荐
LuciferHuang6 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing6 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20156 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言7 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友9 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手9 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿10 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉