实现的需求:在列表中如何缓存每个子组件,父组件重新渲染,子组件不更新,下面的列子假设 Chart
组件被包裹在memo
中。你希望在 ReportList
组件重新渲染时跳过重新渲染列表中的每个 Chart
。但是,你不能在循环中调用 useCallback
。
实现效果
- 代码逻辑
ReportList.js
js
import { useCallback, useState } from "react";
import Chart from "./Chart";
function sendReport(item) {
console.log("Sending report for", item);
}
function ReportList({ items }) {
const [msg, setMsg] = useState("hello");
function handleChange(e) {
setMsg(e.target.value);
console.log(msg);
}
return (
<article>
{items.map((item) => {
// 🔴 你不能在循环中调用 useCallback:
// const handleClick = useCallback(() => {
// sendReport(item)
//}, [item]);
//return (
// <figure key={item.id}>
// <Chart onClick={handleClick} />
// </figure>
//);
return <Report key={item.id} item={item} />;
})}
<input type="text" value={msg} onChange={handleChange} />
</article>
);
}
function Report({ item, onClick }) {
const handleClick = useCallback(() => {
sendReport(item);
}, [item]);
return (
<figure key={item.id}>
<Chart onClick={handleClick} />
</figure>
);
}
export default ReportList;
注意:我们不能在迭代中使用useCallback
Chart.js
js
function Chart({ onClick }) {
console.log("chart");
return <button onClick={onClick}>Send Report</button>;
}
export default Chart;
发现chart组件还是会重新渲染,这个不是我们想要的效果。对代码进行改写
js
import { memo } from "react";
const Chart = memo(function ({ onClick }) {
console.log("chart");
return <button onClick={onClick}>Send Report</button>;
});
export default Chart;
这样,我们就实现了效果。