Есть ли возможный способ переписать код с отображением массива и использованием «useEffect» из функционального компонента в компонент класса?

Question

Я использую свой компонент Logs для отображения журналов из массива объектов. Моя проблема в том, что использование «useEffect» делает мое приложение очень медленным. Есть ли возможный способ переписать его на компонент класса?

мой код:

import React, { useEffect } from "react";
import Log from "../logs/log";
import "../../scss/logs.scss";
const Logs = ({ logs, changeDetailState, getLogId, onClick, mountLogs }) => {
  useEffect(() => {
    mountLogs();
  });
  const logsmap = logs.map((log, i) => (
    <Log
      onClick={onClick}
      getLogId={getLogId}
      changeDetailState={changeDetailState}
      key={i}
      input={log.amount}
      description={log.description}
      id={i}
    />
  ));
  return <div className="logs">{logsmap}</div>;
};
export default Logs;

Answer 1

Вы можете преобразовать его в Class Component, выполнив следующее:

class Logs extends React.Component {
    componentDidMount() {
        const { mountLogs } = this.props;

        mountLogs();
    }
}

processLogsMap = () => {
    const { logs } = this.props;
    logs.map((log, i) => (
    <Log
      onClick={onClick}
      getLogId={getLogId}
      changeDetailState={changeDetailState}
      key={i}
      input={log.amount}
      description={log.description}
      id={i}
    />
  ));
}

render() {
    return (
        <>
            <div className="logs">{processLogsMap()}</div>; 
        </>
    )
}

export default Logs;

Answer 2

Вы вызываете mountLogs () каждый раз, когда свойство изменяется.

Если вы хотите, чтобы оно запускалось только один раз при монтировании, используйте:

  useEffect(() => {
    mountLogs();
  }, []);

Если вы хотите запустите на указанных значениях c, затем вы должны использовать:

  useEffect(() => {
    mountLogs();
  }, [logs, changeDetailState]);

Для однократного запуска его следует использовать, как показано ниже:

import React, { useEffect } from "react";
import Log from "../logs/log";
import "../../scss/logs.scss";
const Logs = ({ logs, changeDetailState, getLogId, onClick, mountLogs }) => {
  useEffect(() => {
    mountLogs();
  }, []);
  const logsmap = logs.map((log, i) => (
    <Log
      onClick={onClick}
      getLogId={getLogId}
      changeDetailState={changeDetailState}
      key={i}
      input={log.amount}
      description={log.description}
      id={i}
    />
  ));
  return <div className="logs">{logsmap}</div>;
};
export default Logs;