UseEffect

Yuiki

2024-04-12 帮助1人

Can we do sth after a render or re-render? We can! These are called side-effects or effects. This is what effects are for - doing after(& unrelated to) a render. This is useful for different kinds of things:

Changing parts of the DOM not covered by React
Async operations, like AJAX requests (requiring an API) when a component is mounted
Doing things when a component is about to be unmounted.

Effects are used for "side-effects": doing things unrelated to render// I am kind of confused about this.

Fetching Data

export default function QuateFetcher(){
  async function fetchQuote(){
  const response = await fetch(Randon_url)}//url 自己要定义一下
  const jsonResponse = await response.json(); //接下来自己选择要的内容
}

当我们需要页面第一次render就fetch info 而且仅需要fetch一次的时候，用useEffect。

Getting Data via AJAX on mount

When a component renders, fetch data from an API.

Data fetching is asynchronous, and may take a moment to complete
want to show user something, like a loading message, while fetching

To fetch correctly:

Having an effect that runs only once
Inside effect, when API calls is finished, will set state & re-render

/*example show how to fetch a random json*/
RANDOM_JSON_URL = ... /*insert json url*/
useEffect(()=>{
  async function getInitialQuote(){
    const response = await fetch(RANDOM_JSON_URL);
    const JsonResponse = await response.json();
    const randomQuote = jsonResponse.quote;
    setQuote(randomQuote);
  }
  getInitialQuote();/*because it is a async function, so it needs to be done this way.*/
},[]);

加入loader

const [isLoading, setLoading] = useState(true);

useEffect(()=>{ ...
setIsLoading(false);
})

必要地方加入 {isLoading && <p>Loading...</p>} 这个写法太漂亮了。或者 <p className="Loader" style={{opacity: isLoading? 1:0}}></p> css: .Loader{transition: 1s opacity} //可以改为spinner loader