在不使用使用效果挂钩的情况下获取API是错误的



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

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

所以,我终于找到了这种方法的好处。我有一些代码要更改...非常感谢您的答案!

您写的它是有效的。您是在说:"如果获取失败,并且组件重新租用器,那么请重试,否则不要"。我个人认为这是一个不可靠的系统 - 取决于重新渲染的重新渲染,并且很容易产生意外的副作用:

  • 如果您的数据虚假怎么办?如果失败(您没有处理(该怎么办。在这种情况下,它将一直试图重新提取。

  • 如果父母连续呈现3次(非常普遍的情况(该怎么办?在这种情况下

因此,考虑到这一点,您实际上需要更仔细的检查,以确保您不使用使用效率不会产生意外后果。另外,如果您的获取想重新提取道具,则可以更改解决方案也无效。

现在,如果您的组件在设置数据之前将其重新呈现,它将尝试再次获取数据,从而导致多个获取。考虑到您只想一次获取数据,而不是多次偶然地将其放入使用效率。

您应该使用使用效果,因为您要做的是反图案。在React的网站上,您可以清楚地了解为什么使用使用效果:

数据获取,设置订阅并手动更改 反应组件中的DOM都是副作用的示例。是否 不是您习惯将这些操作称为"副作用"(或只是 "效果"(,您可能以前在组件中执行它们。 https://reactjs.org/docs/hooks-effect.html

React组件只是功能,采用一些道具并返回一些JSX。如果您想具有副作用,则不应将其直接放在组件中。它应该采用生命周期方法。

图像您的状况检查(!数据(,是一个复杂的循环在数组上等。它的性能影响更大。但是使用效果将更具性能,您甚至可以将第二个参数用于"缓存"结果。

从技术上讲,在两个组件之间没有差异,除了条件检查将在您的版本中的每个渲染上运行。而使用效率仅在"安装"中调用,而"更新"组件状态。

相关内容

  • 没有找到相关文章

最新更新