从正在使用的 API 中获取数据直接在 react 中获取影响或事件处理程序中的数据

Question

在反应钩子中应该如何执行抓取？在这两个代码片段中，哪一个被称为最佳实践或执行 fetch 的最佳反应模式？此示例用于执行操作。useEffectfetchimport React, { useState, useEffect } from "react";export default function App() {  const [query, setQuery] = useState("");  const [loading, setLoading] = useState(false);  const [data, setData] = useState([]);  useEffect(() => {    if (!loading) return;    const fetchData = async () => {      const response = await fetch(        `https://api.github.com/search/repositories?q=${query}`      );      const data = await response.json();      setData(data.items);      setLoading(false);    };    fetchData();  }, [loading, query]);  const onSubmit = e => {    e.preventDefault();    setLoading(true);  };  return (    <div className="App">      <h1>Search Github Repo.</h1>      <h3>Implementation One</h3>      <form onSubmit={onSubmit}>        <input          type="text"          value={query}          onChange={e => setQuery(e.target.value)}        />        <button type="submit">Search</button>      </form>      {loading && <div>Loading...</div>}      {!loading &&        data.map(repo => (          <div key={repo.id}>            <h4>{repo.name}</h4>            <p>{repo.description}</p>          </div>        ))}    </div>  );}此示例使用事件处理程序来执行操作。onClickfetchimport React, { useState } from "react";export default function App() {  const [query, setQuery] = useState("");  const [loading, setLoading] = useState(false);  const [data, setData] = useState([]);  const onSubmit = e => {    e.preventDefault();    setLoading(true);    const fetchData = async () => {      const response = await fetch(        `https://api.github.com/search/repositories?q=${query}`      );      const data = await response.json();      setData(data.items);      setLoading(false);    };    fetchData();  };}

Answer 1

这取决于您的用例，您应该采取哪种方法

在以下情况下获取数据很有用useEffect

• 在某些生命周期（如初始渲染）中获取数据

• 在某些 prop 更改时获取数据

• 每隔一段时间获取数据，但设置订阅或setInterval

在下面的方案中，在处理程序中获取数据很有用

• 根据用户交互（如搜索按钮单击）、搜索输入更改

由于您的案例是基于使用交互的，因此在处理程序而不是钩子中实际调用API会更好，更受控制useEffect

Answer 2

我会说你应该使用钩子实现。在 React 文档中，建议使用它来执行副作用：

数据获取、设置订阅和手动更改 React 组件中的 DOM 都是副作用的示例。无论您是否习惯于将这些操作称为“副作用”（或只是“效果”），您之前都可能在组件中执行过它们。（链接到报价)

还有一个需要考虑的因素。在钩子实现中：

useEffect(() => {

    if (!loading) return;

    const fetchData = async () => {

      const response = await fetch(

        `https://api.github.com/search/repositories?q=${query}`

      );

      const data = await response.json();

      setData(data.items);

      setLoading(false);

    };

    fetchData();

  }, [loading, query]);

您使用了优化。您正在传递到钩子中，这意味着该函数仅在其中一个值更改时运行。在第二个实现中，您将在每个输入更改上运行获取[loading, query]

以下是关于钩子这一方面的 React 文档的链接。