时间戳

首页 > 解决方案 > 我如何去重构我的反应应用程序

reactjs - 我如何去重构我的反应应用程序

问题描述

我是 React JS 的新手。我需要重构我的反应应用程序。目前我正在对我的 Spring 后端进行 API 调用，我得到以下响应：-

"avgTime": 250.0769,
"minTime": 100.0,
"maxTime": 500.0

我目前在 Card 组件中呈现这些响应。我为每个响应创建了一个组件，即avgTime, minTime，maxTime但是我API在每个组件中都进行了相同的调用。这是一个好习惯吗？如何在这些组件中重用我的 API 调用。

反应代码： -

import React, {useState, useEffect} from 'react';


const SlowestResponse = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  const SlowestResponse = 'http://localhost:8080/api/SlowestResponse';

  const [data, setData] = useState([]);
  useEffect(() => {
  const fetchData = async () => {
    const result = await fetch(SlowestResponse);
    const jsonresponse = await result.json();
    setData([jsonresponse]);
  };
  fetchData();
  }, []);


  return (
      <CardContent>
        <Grid
          container
          justify="space-between"
        >
          <Grid item>
            <Typography
              className={classes.title}
              color="textSecondary"
              gutterBottom
              variant="body2"
            >
            </Typography>
            <Typography variant="h3">
              <ul>
                {
                  data.map((item) => {
                    return <div>{item.maxTime}</div>
                  })
                }
              </ul>
            </Typography> 
          </Grid>
        </Grid>
      </CardContent>
  );
};

SlowestResponse.propTypes = {
  className: PropTypes.string
};

export default SlowestResponse;

标签： reactjsspringapirefactoring

解决方案

您可以将您的 React 钩子逻辑导出到自定义钩子中并重用它。因为你只使用data你只需要从你的钩子中返回它的值。

这是一个例子：

import React, {useState, useEffect} from 'react';

const useApi = () => {
  const SlowestResponse = 'http://localhost:8080/api/SlowestResponse';

  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(SlowestResponse);
      const jsonresponse = await result.json();
      setData([jsonresponse]);
    };
    fetchData();
  }, []);

  return data;
}

const SlowestResponse = props => {
  const {
    className,
    ...rest
  } = props;

  const classes = useStyles();

  const data = useApi()

  return (<CardContent>
    <Grid container="container" justify="space-between">
      <Grid item="item">
        <Typography className={classes.title} color="textSecondary" gutterBottom="gutterBottom" variant="body2"></Typography>
        <Typography variant="h3">
          <ul>
            {
              data.map((item) => {
                return <div>{item.maxTime}</div>
              })
            }
          </ul>
        </Typography>
      </Grid>
    </Grid>
  </CardContent>);
};

SlowestResponse.propTypes = {
  className: PropTypes.string
};

export default SlowestResponse;

您可以useApi在外部文件中导出并在需要它的每个组件文件中导入它。

推荐阅读