React 18 系统精讲（七）useState（）和useEffect（）使用

一、useState为函数组件hooks之一， 目的用来初始化并更新组件内数据状态，作用可代替类组件中的interface  status{}

用法步骤：

1、首先在函数组件内声明state并初始化state，语法和代码段：

const  [state , 用来更新state的函数名]  =  useState<泛型来规定state数据类型>(初始化state值);

const [count,setCount] = useState<number>(0);

2、此处使用点击计数器来模拟useState的使用：

 解读：每次点击btn按钮都会更新count+1，然后在标签中渲染新的count值

二、useEffect为函数组件hooks之一，作用可相当于类组件的componentDidMount和componentDidUpdate（useEffect是异步函数）

1.hooks目的就是为了给函数组件加上状态，仅适用于函数组件
2.由于class组件中的生命周期函数会同时处理多项任务，包括发起ajax请求、跟踪数据状态、绑定事件监听
3.使用函数组件会轻量化很多，可以直接使用hooks钩子钩如组件状态，简化了代码和模板

使用useEffect() 获取网络api数据（seEffect使用async/await示例;）：

 useEffect(() => {   //es6语法获取网络api数据
    const fetchData = async () => {  //async异步获取数据
      setLoading(true)
      try {
        const responses =  await fetch ("https://jsonplaceholder.typicode.com/users")  //fetch函数获取api数据，获取到的是promise格式
        if (responses.status>= 200 &&responses.status< 300) {
          const newData = await responses.json() //将promise格式数据转化成json格式
          setRobotGallery(newData)  //更新robotGallery状态
        } else {
          alert("未找到网络资源")   //有网络但api资源请求失败时，比如404(404含义fetch与服务器间的通讯是成功的，但未找到相关资源)
        }
      } catch (e) { //此处e是unknow类型，必须使用if判断一下e的类型   //网络出错时捕捉错误信息，断网
        if (e instanceof Error) {
          setError(e.message)  
        }
      }
      setLoading(false)
    }

    fetchData()
  },[])

注：1、因为async 关键字会返回一个promise 对象，但是useEffect接受的第一个参数签名不能是promise,要么是一个函数，要么是null,所以不能直接在useEffect函数中传一个async函数，可以在里面封装一个async函数，然后再调用，即useEffect()第一个参数可以先设置为箭头函数 ，箭头函数的函数体用来异步async，箭头函数最后必须调用fetchData(。

使用async时类似以下用法是错误的：
useEffect(async() => {

})

2、第二个参数不加[]，每次UI渲染时都会调用，相当于类组件的componentDidUpdate
通常加上[]用来获取api数据，只有UI初次渲染时会调用，相当于类组件的componentDidMount；

3、数据加载前和数据加载完毕后搭配使用loading,
const  [loading,setLoading]  =  useState<boolean>(false);

4、使用try ()  catch(e) {}  捕捉报错信息，catch参数是unknown类型，需要使用if进行进一步判断错误类型;

 if (e instanceof Error) {
          setError(e.message)  
  }