React中的useState和useEffect解析

一、组件状态管理——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