[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

相关推荐
南囝coding1 分钟前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖23 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花40 分钟前
i18n国际语言化配置
前端
编程贝多芬43 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort44 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript