Arrays 是否有任何可能的方法，通过映射数组和使用；“使用效果”；从功能组件到类组件？

我使用我的日志组件来映射对象数组中的日志。我的问题是，使用“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;

import React，{useffect}来自“React”；
从“./logs/Log”导入日志；
导入“../../scss/logs.scss”；
常量日志=（{Logs，changetailstate，getLogId，onClick，mountLogs}）=>{
useffect（（）=>{
mountLogs（）；
});
const logsmap=logs.map（（log，i）=>(
));
返回{logsmap}；
};
导出默认日志；

每次更改属性时，您都在调用mountLogs（）

如果您希望它在装载时只运行一次，请使用：

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

如果要在特定值更改上运行，则应使用：

  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;

import React，{useffect}来自“React”；
从“./logs/Log”导入日志；
导入“../../scss/logs.scss”；
常量日志=（{Logs，changetailstate，getLogId，onClick，mountLogs}）=>{
useffect（（）=>{
mountLogs（）；
}, []);
const logsmap=logs.map（（log，i）=>(
));
返回{logsmap}；
};
导出默认日志；

您可以通过执行以下操作将其转换为

类组件

：

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;

类日志扩展了React.Component{
componentDidMount（）{
const{mountLogs}=this.props；
mountLogs（）；
}
}
processLogsMap=（）=>{
const{logs}=this.props；
logs.map（（log，i）=>(
));
}
render（）{
返回(
{processLogsMap（）}；
)
}
导出默认日志；