react crash course 2024(8) useEffect

时间:2024-09-30 11:53:27
引入
import { useEffect } from 'react';

useEffect – React 中文文档
useEffect 是一个 React Hook,它允许你 将组件与外部系统同步
有些组件需要与网络、某些浏览器 API 或第三方库保持连接,当它们显示在页面上时。这些系统不受 React 控制,所以称为外部系统。
每当你的组件渲染时,React 会先更新页面,然后再运行 useEffect 中的代码。换句话说,useEffect 会“延迟”一段代码的运行,直到渲染结果反映在页面上

useEffect(()=>{},[])//接收一个函数,一个依赖数组
  useEffect(() => {
    const fetchJobs = async () => {
      try {
        const res = await fetch('http://localhost:8000/jobs')
        const data = await res.json()
        setJobs(data)
      } catch (error) {
        console.log('Error fetching data', error);
      }
      finally {
        setLoading(false)
      }
    }
    fetchJobs();
  }, [])
  try {
    throw new Error("这是一个自定义错误");

  } catch (error) {
    console.log("捕获到运行时错误:", error.message); // 这里会执行
  }

接收到数据后渲染html
 

const JobPage = () => {
//...
  return (
    loading ? <Spinner/> :(<h1>
      {job.title}
    </h1>)
  )
}