[英]Is this incorrect use of useCallback and useMemo?
我们什么时候应该担心函数组件重新定义变量和函数?
我认为第一种情况显然是不必要的,创建函数并不昂贵(并且反应开发工具配置文件测试没有检测到 useCallback 的性能变化)
import React, { useState, useMemo, useCallback } from "react";
export const App = () => {
const [counter, setCounter] = useState(1);
const showCounter = useCallback(() => {
console.log(counter);
}, [counter]);
return (
<>
<button onClick={showCounter}>Show</button>
<button onClick={() => setCounter(counter + 1)}>Add</button>
</>
);
};
另一方面,在另一个示例中,使用 react 开发工具,我们可以检测到 useMemo 将渲染时间缩短了一半:
import React, { useState, useMemo, useCallback } from "react";
export const App = () => {
const [counter, setCounter] = useState(1);
const [list, setList] = useState<number[]>([]);
function setListItem(item: number) {
setList([...list, item]);
}
//should we useMemo here?
const domList = useMemo(
() =>
list.map((value: number, index: number) => (
<li key={index}> {value} </li>
)),
[list]
);
return (
<>
<p>{counter}</p>
<button onClick={() => setCounter(counter - 1)}>Subtract</button>
<button onClick={() => setCounter(counter + 1)}>Add</button>
<button onClick={() => setListItem(counter)}>Push to array</button>
<h1>List</h1>
<ul>{domList}</ul>
</>
);
};
但是当我们谈论前端时,仍然不到一毫秒的增益和数组映射和 JSX 数组也不是很昂贵的东西。 但是,在每个渲染中运行一个数组 map 方法是很不舒服的。 那么,这些事情我们应该怎么做呢? (让我们忘记什么时候我们有 useEffect 依赖于一些使 useMemo 成为必要的变量)
您获得的性能是不同的。 是的,对于useMemo
如果您正在记忆的计算很昂贵,它提供了明显的直接好处。 但是,对于useCallback
和useMemo
,长期的好处是避免了子组件中不必要的渲染,而不是重新计算的成本。
请记住,如果组件中的任何道具发生变化,它们可能会触发渲染调用,并且在组件树中越靠前,它对性能的影响就越大。 这就是我们通常使用这些钩子的原因。
一般来说,组件有几个 state 元素,通过备忘录挂钩,我们可以建立依赖关系以避免计算冗余。 例如,在您的合成案例中,您有两个 state 元素: counter
和list
。 每次counter
更改时,您都会通过使其仅依赖于list
来防止重新计算domList
。 如果这是一个叶节点,那么肯定没有性能提升,但是,这是组件树的根,如果没有这些钩子,性能将不会随着您添加更多 state 元素而扩展,您将不得不重构代码以解决性能问题。 当然,如果列表包含超过 1000 个元素, <ul>{domList}</ul>
的成本可能会很高,但<ul><ExpensiveCutie domList={domList} /></ul>
可能需要数周时间才能注意到、调试、和重构。
简而言之,我建议在容器组件中使用备忘录挂钩,而不是在叶组件中。 然而,如果你的叶子组件在你实现它的时候变成了一个容器呢?
在你 go 之前,你甚至需要使用 memo() 吗? 在这里阅读更多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.