在反應(yīng)鉤子中應(yīng)該如何執(zhí)行抓取？在這兩個代碼片段中，哪一個被稱為最佳實(shí)踐或執(zhí)行 fetch 的最佳反應(yīng)模式？此示例用于執(zhí)行操作。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>  );}此示例使用事件處理程序來執(zhí)行操作。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();  };}