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

到此这篇关于React中的useState和useEffect解析的文章就介绍到这了,更多相关React useState和useEffect内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论