我一直在这样做,但是一些大学告诉我,我应该使用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。如果您想具有副作用,则不应将其直接放在组件中。它应该采用生命周期方法。
图像您的状况检查(!数据(,是一个复杂的循环在数组上等。它的性能影响更大。但是使用效果将更具性能,您甚至可以将第二个参数用于"缓存"结果。
从技术上讲,在两个组件之间没有差异,除了条件检查将在您的版本中的每个渲染上运行。而使用效率仅在"安装"中调用,而"更新"组件状态。