reactjs - 不使用 useEffect Hook 获取 API 是否错误？

Question

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

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>
    );
};

在控制台中我得到:


从 UseEffectlessComponent 调用
从 UseEffectComponent 调用
从 UseEffectlessComponent 调用
从 UseEffectlessComponent 调用
从 UseEffectlessComponent 调用


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

Answer 1

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

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

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

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