时间戳

首页 > 解决方案 > 不使用 useEffect Hook 来获取 API 是错误的吗？

reactjs - 不使用 useEffect Hook 来获取 API 是错误的吗？

问题描述

我一直在这样做，但一些大学告诉我应该使用useEffectHook。问题是我没有看到这种方法的好处，我认为我的方法更干净。

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

const fetchTheApi = () =>
  new Promise(res => setTimeout(() => res({ title: "Title fetched" }), 3000));

const UseEffectlessComponent = () => {
  const [data, setData] = useState();
  !data && fetchTheApi().then(newData => setData(newData));
  return <h1>{data ? data.title : "No title"}</h1>;
};

const UseEffectComponent = () => {
  const [data, setData] = useState();
  useEffect(() => {
    fetchTheApi().then(newData => setData(newData));
  }, []);
  return <h1>{data ? data.title : "No title"}</h1>;
};

const MyComponent = () => (
  <div>
    <UseEffectlessComponent />
    <UseEffectComponent />
  </div>
);

根据回复编辑：

我将代码更改为重新渲染，如下所示：

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

const fetchTheApi = (origin) => {
    console.log('called from ' + origin);
    return new Promise((res) =>
        setTimeout(() => res({ title: 'Title fetched' }), 3000)
    );
};

const UseEffectlessComponent = () => {
    const [data, setData] = useState();
    !data &&
        fetchTheApi('UseEffectlessComponent').then((newData) => setData(newData));
    return <h1>{data ? data.title : 'No title'}</h1>;
};

const UseEffectComponent = () => {
    const [data, setData] = useState();
    useEffect(() => {
        fetchTheApi('UseEffectComponent').then((newData) => setData(newData));
    }, []);
    return <h1>{data ? data.title : 'No title'}</h1>;
};

const MyComponent = () => {
    const [counter, setCounter] = useState(0);
    counter < 3 && setTimeout(() => setCounter(counter + 1), 1000);
    return (
        <div>
            <p>counter is: {counter}</p>
            <UseEffectlessComponent />
            <UseEffectComponent />
        </div>
    );
};

在控制台中我得到：

called from UseEffectlessComponent called from UseEffectComponent called from UseEffectlessComponent called from UseEffectlessComponent called from UseEffectlessComponent

所以，我终于发现了这种方法的好处。我有一些代码要更改...非常感谢您的回答！

标签： reactjsreact-hooksuse-effect

解决方案

你写它的方式确实有效，有点。您是在说“如果获取失败并且组件重新渲染，那么再试一次，否则不要”。我个人认为这是一个不可靠的系统 - 依赖于重新渲染再试一次，并且很容易产生意想不到的副作用：

  • 如果你的数据是假的怎么办？如果它失败了（你没有处理）怎么办。在这种情况下，它将继续尝试重新获取。

  • 如果父级连续渲染 3 次怎么办（很常见的情况）。在这种情况下，您的提取将在第一次提取完成之前发生 3 次。

因此，考虑到这一点，您实际上需要进行更仔细的检查，以确保您的代码不会因不使用 useEffect 而产生意外后果。此外，如果您的 fetch 想要重新获取 prop 更改，您的解决方案也不起作用。

推荐阅读