Question

我现在尝试使用自定义钩子数小时时要防止重新渲染-.-，需要一些帮助； O |

（不知道我是否应该调用此自定义钩子或功能临时对象）

我有一个MessageList组件，该组件显示包装在WithAvatarHeader中的SimpleMessage。这是我的分析器结果：

每次我向列表中添加一条消息时，所有消息都会再次呈现。

当我仅在MessageList中使用SimpleMessage时，不会发生这种情况

是否有一种备忘（WithAvatarHeader）的方法？

MessageList：

import React from "react";
import SimpleMessage from "./SimpleMessage";
import WithAvatarHeader from "./WithAvatarHeader";


const MessageList = props => {
  const Message = WithAvatarHeader(SimpleMessage);
  return (
    <div className="message-list">
      {props.messages.map(message => {
        return <Message message={message} key={message._id}/>;
      })}
    </div>
  );
};

SimpleMessage：

import React, { memo } from "react";

const SimpleMessage = props => {
  return (
    <div className="simple-message">
      {props.message}
    </div>
  );
};

export default memo(SimpleMessage);

WithAvatarHeader：

import React from "react";

const WithAvatarHeader = WrappedComponent => props => {
  return <WrappedComponent {...props} />;
};

export default WithAvatarHeader;

感谢您的帮助：-）

Answer 1

您不应在另一个组件内部声明该组件。

将声明移到外部后：

const Message = WithAvatarHeader(SimpleMessage);
const MessageList = props => {
  return (
    <div className="message-list">
      {props.messages.map(message => {
        return <Message message={message} key={message._id}/>;
      })}
    </div>
  );
};

您会没事的。

原因是reconciliation流程，用于确定要删除的内容，创建的内容和要更新的内容。

在您的JSX旁边，它仍然是相同的元素<Message> React检查组件的构造函数（不适用于JSX的文本表示形式）。并且它在引用上会有所不同（因为您在下一次渲染时重新声明了此构造方法）。因此，React会丢弃每个<Message>并从头开始创建它们。将声明保留在MessageList之外意味着构造函数在引用上是相同的，因此，在<Message>相同之前，React不会重新创建key。

ReactJs：防止重新包装组件

1 个答案: