当一个电话面试的人让我获取数据并在页面上做一些漂亮的格式化时,我惊呆了,但是必须通过记忆添加Redux和redux-thunk
的所有样板。
但后来,我发现,这不是真的,为了证明概念,只是试图得到一些数据,并在屏幕上格式化它,我们可以只使用useState()
和useEffect()
,我们可以完全忘记Redux?
例如,只需:
import { useEffect, useState } from "react";
export default function App() {
const [data, setData] = useState({});
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/photos/1")
.then((res) => res.json())
.then((d) => {
setData(d);
});
}, []);
return (
<>
<pre>{JSON.stringify(data, null, 4)}</pre>
<img src={data.thumbnailUrl} />
</>
);
}
示例:https://codesandbox.io/s/blissful-lovelace-m3igx
,这已经是一个概念证明。Redux和所有的样板文件都可以慢慢添加(我并没有真正记住它们)。
我想我可能会用useState()
,但是useEffect()
呢?可以用别的东西吗?医生说useEffect()
是副作用,但它在这里并不是一个真正的副作用项目。
有什么替代useEffect()的方法吗?
我想这个问题是围绕着用React获取数据。你在文档中有这样的常见问题"如何使用Hooks获取数据?">
没有useEffect
的替代品,也许useLayoutEffect
,但这对数据获取来说是一个很小的区别。
文档说
useEffect()
是副作用,但它在这里并不是一个真正的副作用项目。
它还说它是用来抓取的
useEffect做什么?…我们还可以执行数据抓取或者调用其他命令式API。