如何存储useSelector值，以便在组件中的任何状态更改时防止重新渲染

Question

我正在使用回调来记忆使用useSelector值的组件的一部分。但是，当我接受输入时，组件中的另一个状态变量正在发生变化，这触发了comp的另一次重新呈现，因此再次调用useselector，并重新呈现我使用useCallback作为选择器值的部分作为依赖项。我如何记住useSelector值，以便组件内的任何状态更改都不会触发选择器更新，除非在某个地方调用dispatch并更新状态。

const chat = useSelector((state: any) => state.user.rooms[index]) 
const [message, setMessage] = useState("");

chat是选择器值，message是输入标签的状态。

const Component = useCallback(() => {
return (
<div className="h-[75%] bg-yellow-200 relative overflow-y-scroll flex  flex-col">
{chat?.messages.map((message: any, index: number) => {
console.log(message.sentBy._id, userId);
let sentByme = message.sentBy._id === userId;
return (
<div className={"w-[50%] min-h-[20%]  border-4  rounded-3xl "}>
<p>{message.text}</p>
<p>
{message.timeStamp} : {sentByme ? "me" : message.sentBy.name}
</p>
</div>
);
})}
</div>
);
}, [chat]);

我决定在useCallback中留出聊天选择器值，以防止在输入状态更改时重新渲染；消息"；但是正在进行重新渲染

Answer 1

组件作为一个整体重新渲染，默认情况下，它们的所有子级也将在此之后重新渲染。如果你想让组件的一部分不重新渲染，你需要把它分成两个组件，并排渲染，或者把子组件包装在React.memo.中

选择器将在每次渲染和每次Redux调度上执行——如果在某个时候出现性能问题，请查看内存化选择器。https://redux.js.org/recipes/computing-derived-data

在您的情况下，选择器本身根本不是性能问题。