如何记忆 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

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

如何记忆 useSelector 值，以便在组件的任何状态更改时阻止重新渲染？

How to memoize useSelector value so that re render is prevented on any state change in the component?

javascript

reactjs

redux

react-redux

react-hooks