[react优化] 避免组件或数据多次渲染/计算

代码如下 点击视图x➕1,导致视图更新, 视图更细导致a也重新大量计算!!这很浪费时间

javascript 复制代码
function App() {
  const [x, setX] = useState(3)
  const y = x + 2
  console.log('重新渲染', x, y);
  console.time('timer')

  let a = 0
  for (let index = 0; index < 1000000000; index++) {
    a++
  }
  console.timeEnd('timer')
  return (
    <div className="App">
      <ul onClick={() => setX(x + 1)}>
        <li>{x}</li>
        <li>{y}</li>
        <li>{a}</li>
      </ul>
    </div>
  )
}

每次更新都浪费时间去计算

有没有办法优化掉这个大量计算呢?


用useMemo()来优化

useMemo -- React 中文文档

代码优化如下

javascript 复制代码
function App() {
  const [x, setX] = useState(3)
  const y = x + 2
  console.log('重新渲染', x, y);
  console.time('timer')
  let a: number = useMemo(() => {
    let a = 0
    for (let index = 0; index < 1000000000; index++) {
      a++
    }
    return a
  }, [])
  console.timeEnd('timer')
  return (
    <div className="App">
      <ul onClick={() => setX(x + 1)}>
        <li>{x}</li>
        <li>{y}</li>
        <li>{a}</li>
      </ul>
    </div>
  )
}

如果a依赖x呢?其实是会变的,x变a就重新变化

javascript 复制代码
  const [x, setX] = useState(3)
  const y = x + 2
  console.log('重新渲染', x, y);
  console.time('timer')
  let a: number = useMemo(() => {
    let a = 0
    for (let index = 0; index < 1000000000; index++) {
      a += x
    }
    return a
  }, [x])


还有什么应用场景? 避免子组件重复渲染

有代码如下,每次状态改变,,父组件和子组件都要重新渲染

javascript 复制代码
const Son = () => {
  console.log('子组件渲染');
  return <h1>子组件</h1>
}
function App() {
  const [x, setX] = useState(3)
  console.log('我是父组件');

  return (
    <div className="App">
      <h1 onClick={() => { setX(x + 1) }}>父组件</h1>
      <Son />
    </div>
  )
}

怎么解决避免子组件重新渲染?用**memo,memo**允许你的组件在 props 没有改变的情况下跳过重新渲染。

memo -- React 中文文档

这样子组件就不会变化了

但是如果传值呢?代码如下,传了一个数组

javascript 复制代码
const Son = memo(function (props: { arr: number[] }) {
  console.log('子组件渲染');
  return <h1>子组件</h1>
})
function App() {
  const [x, setX] = useState(3)
  const arr = [1, 2, 3]
  console.log('我是父组件');

  return (
    <div className="App">
      <h1 onClick={() => { setX(x + 1) }}>父组件</h1>
      <Son arr={arr} />
    </div>
  )
}

每次都重新渲染,因为数组是引用类型,每次父组件重新渲染都会导致arr的内存地址不一样

那怎么办?用useMemo,让他换缓存

当然useState也可以

javascript 复制代码
const [arr, setArr] = useState([1, 2, 3])

useRef也可以

好了祝你生活愉快

用useMemo跳过昂贵的计算_哔哩哔哩_bilibili

相关推荐
慢半拍iii1 天前
JAVA Web —— A / 网页开发基础
前端
gnip1 天前
pnpm 的 monorepo架构多包管理
前端·javascript
新手村领路人1 天前
Firefox自定义备忘
前端·firefox
乖女子@@@1 天前
css3新增-网格Grid布局
前端·css·css3
伐尘1 天前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e1 天前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost1 天前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati1 天前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪1 天前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme1 天前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试