useMemo 避免组件更新结果重新计算,提高性能
在https://ant.design/components/button-cn 打开codesanbox,替换代码保存
import React, { useMemo, useState, useEffect } from "react";
function MyComponent({ propB = 2 }) {
const [data, setData] = useState(1);
const [bool, setBool] = useState(true);
const expensiveOperation = useMemo(() => {
console.log("计算结果expensiveOperation");
return data * propB;
}, [data, propB]); // 依赖的属性在数组中传入
useEffect(() => {
console.log("组件更新了");
});
return (
<>
<button
onClick={() => {
setBool(!bool);
}}
>
更新页面 {bool + ""}
</button>
<button
onClick={() => {
setData(data + 1);
}}
>
修改
</button>
<div>{expensiveOperation}</div>
</>
);
}
export default MyComponent;