【Day 27】Hook 07:useMemo

useMemo

  • 用於性能优化,避免重复执行高效能的渲染
  • 如果传入的参数未改变,就直接沿用上次的计算结果。
  • 遇到计算复杂、耗效能的地方,先用 useMemo 计算是否需要执行
  • 结果会被缓存,以便每次确认是否变更内容

useMemo 与 React.memo 一样,
作用是优化效能,
适合用在复杂缓慢且变动性不大,
其结果不需要经常 re-render 的计算上。


使用方式

const memorizedValue = useMemo(callback, array)
  • callback:处理计算逻辑的 function
  • array:当数组内容发生改变时才重新执行,若无 array,则每次 render 时依然会重新计算值

useMemo 内执行的 function 会於 render 期间执行,而 useEffect 的内容是在 render 後执行,因此 useMemo 内不能使用 useEffect。


范例

function slowFunction(num) {
  console.log('Calling Slow Function');
  
  for(let i=0; i<=1000000; i++) {}
  return num*2;
}

const App = () => {
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(true);

  const doubleNumber = useMemo(() => slowFunction(number), [number]);
  
  const themeStyle = useMemo(() => {
    return {
      backgroundColor: dark ? '#2c3e50': '#ecf0f1',
      color: dark ? '#ecf0f1' : '#2c3e50'
    }
  }, [dark])
   
  
  useEffect(() => {
    console.log('Theme Change')
  }, [themeStyle])

  const changeHandler = e => {
    setNumber(e.target.value)
  }
  
  const changeTheme = () => {
    setDark(prevDark => !prevDark)
  }
  
  return (
    <>
        <input type='number' value={number} onChange={changeHandler} />
        <button onClick={changeTheme}>Change Theme</button>
    </>
  )
};

参考资料


<<:  用React刻自己的投资Dashboard Day28 - 串接台股技术面API

>>:  找LeetCode上简单的题目来撑过30天啦(DAY28)

IT铁人DAY 15-Bridge 桥接模式

  今天要介绍的Bridge Pattern,当初在学习的时候就觉得这个 Pattern 很有意思,...

从零开始学3D游戏开发:入门程序实作 Part.5 计算分数

这是 Roblox 从零开始系列,入门章节的第十一个单元,今天你将学会如何去计算并显示分数在画面上 ...

框架与挑选实作的阶段 | ML#Day17

以下是我自己这一路学习ML过程中,整理出来的ML研究与实作,使用的演进脉络,纯属个人观感,并未有任何...

Day-4: SSR 与 SPA

SSR — Server Side Rendering 服务器渲染 服务器端渲染 — 在服务器(Se...

Day 19 ( 中级 ) 阵列点灯 ( 动画 )

阵列点灯 ( 动画 ) 教学原文参考:阵列点灯 ( 动画 ) 这篇文章延续「阵列点灯 ( 显示图形 ...