ReactJs: предотвращение повторного рендеринга обернутого компонента - PullRequest
Новая
       5

ReactJs: предотвращение повторного рендеринга обернутого компонента

0 голосов
/ 15 января 2020

Я пытаюсь предотвратить повторный рендеринг при использовании настраиваемого хука в течение нескольких часов -.-, нужна помощь; O |

(Не знаю, стоит ли мне вызывать этот пользовательский хук или функционал ho c хотя)

У меня есть компонент MessageList, который отображает SimpleMessage, завернутый в WithAvatarHeader. Вот результат моего профилировщика: profile result

Каждый раз, когда я добавляю сообщение в список, все сообщения отображаются снова.

Этого не происходит, когда я Используйте SimpleMessage только в MessageList

Есть ли способ создания заметок (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;

Спасибо за помощь: -)

1 Ответ

1 голос
/ 15 января 2020

Вы не должны объявлять компонент внутри другого компонента.

После перемещения объявления за пределы: 

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

все будет в порядке.

Причина - согласование процесс, который решает, что отбрасывать, что создавать и что обновлять.

Кроме того, ваш JSX говорит, что это все тот же элемент <Message> Реагирует на проверку компонентов конструктор (он не работает с текстовым представлением из JSX). И он будет ссылочно другим (поскольку вы повторно объявляете этот конструктор при следующем рендере). Так что Реакт отбрасывает каждый <Message> и создает их с нуля. Хранение декларации вне вашего MessageList означает, что конструктор референтно одинаков, поэтому React не будет воссоздавать <Message> до тех пор, пока key не станет прежним.

...