子组件的无效渲染
什么是无效渲染?
为什么会无效渲染?
export default function () {
let [checked, setChecked] = useState(false);
const items = useMemo(() => ["one", "two", "three"].map((item) => item.toUpperCase()), []);
function handleCheck() {
setChecked(!checked);
}
return (
<div>
<input type="checkbox" checked={checked} onChange={handleCheck} /> 大小写敏感
<List items={items} />
</div>
);
}
function List ({ items }) {
console.log("rendering children");
return (
<div>
<h3>List:</h3>
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
};如何避免无效渲染?
Last updated