有没有可能的方法，通过映射数组并使用从功能组件到类组件的“useEffect”来重写代码？答案

【问题标题】：Is there any possible way, to rewrite code with mapping an array and using "useEffect" from functional component to class component?有没有可能的方法，通过映射数组并使用从功能组件到类组件的“useEffect”来重写代码？
【发布时间】：2020-05-12 06:04:06
【问题描述】：

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

【问题讨论】：

标签： arrays reactjs sorting mapping

【解决方案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;

【讨论】：

【解决方案2】：

每次属性发生变化时，您都在调用 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;

【讨论】：