React学习笔记：Hook（useState、useEffect）

两个 Hook 解决 85% 的问题

1. useState

用途：数据状态管理

import {useState} from "react";

/**
 * Note: 
 * useState(init) 是React用于管理数据状态的，init是赋给params的初始值
 * params 是在整个Component 中使用的变量名，
 * setParams 是用于修改变量值的一个方法
 */
const [params, setParams] = useState(1);

利用插值表达式{}使用params：

return (
    <>
      <p>{params}</p>
    </>
);

修改params。点击button按钮后，调用setParams(newValue)或者setParams((pre) => pre + 1)将新值赋给params，计数增加：

return (
    <>
      <p>{params}</p>
      <button onClick={() => setParams(params + 1)}>click</button>
      <button onClick={() => setParams((pre) => pre + 1)}>click</button>
    </>
);

🤔 注意了 setParams(params + 1) 存在：闭包时候，反复读取初始值params的情况，导致数据无法从最新的的params的基础上进行迭代。

2. useEffect

用途：进入就加载数据

使用API：jsonplaceholder.typicode.com/todos/1

{
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}

做一个效果：页面加载的时候就将title的信息显示在页面上。

import { useEffect } from 'react';

async function queryData(){
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

useEffect(() => {
    queryData().then(data => {
        setTitle(data.title)
    })
}, []);

[]的作用是为了防止死循环，引用React官中：

解决办法是：

但实际上，[]位置的内容也可以用于去监听某些变量是否变动，如果变动就再执行一次。

提供的在线API，末端的数字变动后，API的内容也会改动，现在修改一下代码的功能，点击一次Button，就让ID增加一次，并自动请求新的title渲染到页面上。

修改点：

const [params, setParams] = useState(1);
const [title,setTitle] = useState()

const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${params}`);

useEffect(() => {
    queryData().then(data => {
        setTitle(data.title)
    })
}, [params]);

<button onClick={() => setParams((pre) => pre + 1)}>click</button>