一、组件状态管理------useState
1.定义
useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果 和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）
useState使用规则：
1.useState是一个函数，返回值是一个数组
2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3.useState的参数将作为count的初始值
function App(){
const [ count, setCount ] = React.useState(0)
return (
<div>
<button onClick={()=>setCount(count+1)}>{ count }</button>
</div>
)
}
2.状态的修改规则
在React中状态被认为是只读的，我们应该始终替换它而不是修改它, 直接修改状态不能引发视图更新
理解：当我们用解构获取到状态count时，我们直接修改状态，例如：count++，这样修改无法引发视图的更新；所以我们应该替换他，给set方法传入一个全新的值作为参数，这样才能更新视图
3.修改对象状态
对于对象类型的状态变量，应该始终给set方法一个全新的对象来进行修改
4.useState定义的变量和普通变量有什么区别？
1. 状态管理
-
useState变量：使用
useState定义的变量是 React 组件的状态，React 会管理它的生命周期。你可以通过setState函数来更新这个状态。例如：const [count, setCount] = React.useState(0);
-
普通变量：
普通变量（例如
let或const定义的变量）是普通的 JavaScript 变量，React 不会对它们进行管理或跟踪。例如：let count = 0;
2. 组件更新
-
useState变量：当你调用
setState更新useState变量时，React 会重新渲染组件，更新 UI。例如：setCount(count + 1); // 这会触发组件重新渲染
-
普通变量：
-
更新普通变量不会触发组件重新渲染，React 不会知道这个变量的值发生了变化。
例如：count += 1; // 这不会触发组件重新渲染
-
3. 持久性
-
useState变量：useState定义的变量在组件的生命周期内保持持久性。即使组件重新渲染，变量的状态仍然可以保持。例如，点击按钮多次会增加count的值，且这个值在不同的渲染中保持。 -
普通变量：
普通变量的值在每次组件重新渲染时会重置为初始值。这意味着你在渲染期间更改的任何值都不会在下一次渲染中保留。
let count = 0; function handleClick() { count += 1; // 仅在当前渲染中有效，下一次渲染会重置为 0 }
4. 闭包问题
-
useState变量：使用
useState时，更新状态函数可以在闭包中使用，确保每次调用时都能访问到最新的状态。 -
普通变量：
如果在回调函数中使用普通变量，可能会出现闭包问题，导致你无法访问到最新的值。
let count = 0; function handleClick() { setTimeout(() => { console.log(count); // 会打印上一次渲染的值，而不是最新的值 }, 1000); }
总结
-
useState定义的变量：是 React 组件的状态，可以在组件中保持持久性，并在更新时触发组件重新渲染。 -
普通变量：是 JavaScript 中的普通变量，React 不会管理它们，更新不会触发组件重新渲染，也不会保持在组件的生命周期内。
二、React副作用管理------useEffect
1.定义
useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如发送AJAX请求，更改DOM等等
说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于"只由渲染引起的操作"
2.useEffect依赖说明
useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
| 依赖项 | 副作用功函数的执行时机 |
|---|---|
| 没有依赖项 | 组件初始渲染 + 组件更新时执行 |
| 空数组依赖 | 只在初始渲染时执行一次 |
| 添加特定依赖项 | 组件初始渲染 + 依赖项变化时执行 |
说明：表格中1，3行的效果区别仅在是依赖项变化时执行
3.清除副作用
概念：在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用
说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行
下面是用定时器来演示清除副作用的具体例子
import { useEffect, useState } from "react"
function Son () {
// 1. 渲染时开启一个定时器
useEffect(() => {
const timer = setInterval(() => {
console.log('定时器执行中...')
}, 1000)
return () => {
// 清除副作用(组件卸载时)
clearInterval(timer)
}
}, [])
return <div>this is son</div>
}
function App () {
// 通过条件渲染模拟组件卸载
const [show, setShow] = useState(true)
return (
<div>
{show && <Son />}
<button onClick={() => setShow(false)}>卸载Son组件</button>
</div>
)
}
export default App