避免在父组件中的状态发生更改时在子组件中使用回调重新发送

Question

我遇到了一些问题，每当父组件更新其状态时，组件都会被重新渲染。

我有一个简单的User组件，它显示一个名称。App组件使用useState来存储多个用户。每当提供的回调onClick运行时，所有组件都会被重新渲染，这会降低性能。为了防止这种情况发生，我尝试过使用useCallback。代码可以在这里运行。每当父级更新用户状态时，我如何防止其他组件被重新渲染？

const App = () => {
const [users, setUsers] = useState([
{ id: 1, name: "Cory" },
{ id: 2, name: "Meg" },
{ id: 3, name: "Bob" }
]);
const deleteUser = useCallback(id => {
setUsers(users => users.filter(user => user.id !== id));
}, []);
const renderUser = user => {
return <User key={user.id} user={user} onClick={deleteUser} />;
};
return (
<div>
<h1>Users</h1>
<ul>{users.map(renderUser)}</ul>
</div>
);
};

用户

const User = props => {
const onDeleteClick = () => {
props.onClick(props.user.id);
};
console.log(`${props.user.name} just rendered`);
return (
<li>
<input type="button" value="Delete" onClick={onDeleteClick} />
{props.user.name}
</li>
);
};

Answer 1

在子组件中使用React.memo

export default React.memo(User);

Answer 2

您可以在User组件中使用React.memo来停止组件的重新渲染。

工作链接：https://codesandbox.io/s/no-arrow-func-render-eziql

希望这能有所帮助！