5

我一直在这样做，但一些大学告诉我应该使用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

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

4

3 回答 3

4

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

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

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

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

于 2019-05-20T13:32:32.830 回答
2

现在，如果您的组件在设置数据之前重新渲染，它将尝试再次获取数据，从而导致多次获取。考虑到您只想获取一次数据而不是意外多次获取数据，最好将其放入 useEffect 中。

于 2019-05-20T13:28:19.623 回答
0

您应该使用 useEffect，因为您所做的是反模式。从 react 的网站你可以清楚地看到为什么 useEffect 在那里：

在 React 组件中获取数据、设置订阅和手动更改 DOM 都是副作用的示例。无论您是否习惯将这些操作称为“副作用”（或仅称为“效果”），您之前都可能在组件中执行过它们。 https://reactjs.org/docs/hooks-effect.html

React 组件只是函数，接受一些 props 并返回一些 jsx。如果你想产生副作用，你不应该直接在你的组件中使用它。它应该在生命周期方法中。

想象你的条件检查（！数据），是一个复杂的循环数组等。它会对性能产生更大的影响。但是 useEffect 会更高效，您甚至可以使用第二个参数来获得“缓存”结果。

从技术上讲，您的两个组件之间没有区别，除了条件检查将在您的版本中的每个渲染上运行。而 useEffect 只会在组件的“已安装”、“更新”状态下被调用。

于 2019-05-20T13:45:06.167 回答