如何解决当使用React钩子和备忘录时,如何防止子组件重新呈现?
在您的情况下,记住Child并不真正有意义,因为如果项发生更改,则必须重新渲染child。但是,如果情况不变,道具仍然不变,但由于重新创建了功能,仍然在重新渲染孩子,则您将useCallback
在每个渲染上使用钩子来记住功能。另外,由于已经记住了处理程序,因此应该使用回调方法来更新状态,因为item
处理程序内部将仅引用最初创建函数时所具有的值。
function Parent() {
const [item, setItem] = useState({ name: "item", value: 0 });
const handleChangeItem = useCallback(() => {
setItem(prevItem => ({ ...prevItem, value: prevItem.value + 1 }));
}, []);
return (
<>
Name: {item.name} Value: {item.value}
<Child changeItem={handleChangeItem} />
</>
);
}
const Child = React.memo(function Child({ item, changeItem }) {
function handleClick() {
changeItem();
}
console.log("child render");
return (
<div>
<button onClick={handleClick}>change state in parent</button>
</div>
);
});
解决方法
我刚刚开始尝试使用React钩子,我想知道如何在子组件重新渲染父组件时阻止子组件重新渲染。我正在寻找类似于in中返回false的东西componentDidUpdate
。我的问题似乎源于我在子组件中调用以更改父组件状态的单击处理程序。由于该函数是在父组件中创建的,因此会在每个父渲染上创建新的函数,这会触发子组件中的属性更改,然后导致子对象重新渲染
(我认为) 。这是一些示例代码来帮助说明这种情况。
function Parent() {
const [item,setItem] = useState({ name: "item",value: 0 });
const handleChangeItem = () => {
const newValue = item.value + 1;
setItem({ ...item,value: newValue });
};
return <Child item={item} changeItem={handleChangeItem} />;
}
const Child = React.memo(function Child({ item,changeItem }) {
function handleClick(){
changeItem();
}
return (
<div>
Name: {item.name} Value: {item.value}
<button onClick={handleClick}>change state in parent</button>
</div>
);
});
如何防止子组件在每次父组件渲染时都渲染?应该handleChangeItem
在父级中住其他地方,以便不在每个渲染器上重新创建它吗?如果是这样,它如何访问item
并setItem
返回useState
?
我是一个非常新的反应者,刚刚开始玩钩子游戏,所以我可能缺少明显的东西。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。