useMemo 与 React.memo 一样,
作用是优化效能,
适合用在复杂缓慢且变动性不大,
其结果不需要经常 re-render 的计算上。
const memorizedValue = useMemo(callback, array)
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)
今天要介绍的Bridge Pattern,当初在学习的时候就觉得这个 Pattern 很有意思,...
这是 Roblox 从零开始系列,入门章节的第十一个单元,今天你将学会如何去计算并显示分数在画面上 ...
以下是我自己这一路学习ML过程中,整理出来的ML研究与实作,使用的演进脉络,纯属个人观感,并未有任何...
SSR — Server Side Rendering 服务器渲染 服务器端渲染 — 在服务器(Se...
阵列点灯 ( 动画 ) 教学原文参考:阵列点灯 ( 动画 ) 这篇文章延续「阵列点灯 ( 显示图形 ...