关于react 中useState和useEffect 函数前言众所周知,react中钩子函数(hook)是很重要的一

前言

众所周知,react中钩子函数(hook)是很重要的一部分。今天我们就来聊一聊useState和useEffect 函数。

useState

useState 是一个 React Hook，允许函数组件在内部管理状态。

组件通常需要根据交互更改屏幕上显示的内容，例如点击某个按钮更改值，或者输入文本框中的内容，这些值被称为状态值也就是(state)。

使用方法

const [state, setState] = useState(initialState)

useState 返回一个由两个值组成的数组：

当前的 state。在首次渲染时，它将与你传递的 initialState 相匹配。
[set 函数]，它可以让你将 state 更新为不同的值并触发重新渲染。

然后新数组通过数组解构 来给state, setState进行赋值。

案例

import { useState } from 'react'



function App() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <button onClick={handleClick}>点我</button>
      {count}
    </>
  )
}

export default App

count刚开始为初始值0，当点击按钮后，count进行更新，通过数据绑定，更新后的count再次显示到页面上。

注意事项

useState 是一个 Hook，因此你只能在 组件的顶层 或自己的 Hook 中调用它。你不能在循环或条件语句中调用它。如果你需要这样做，请提取一个新组件并将状态移入其中。
在严格模式中，React 将 两次调用初始化函数，以 [帮你找到意外的不纯性]。这只是开发时的行为，不影响生产。如果你的初始化函数是纯函数（本该是这样），就不应影响该行为。其中一个调用的结果将被忽略。

useEffect

用于在函数组件中处理副作用

什么是副作用

在 React 中，副作用是指那些在组件渲染过程中发生的、与渲染结果无关的操作。这些操作通常会影响组件外部或需要在渲染完成后执行。

简单来说，副作用就是那些"不纯粹"的操作，因为它们：

不直接参与 UI 渲染
可能会影响其他组件或外部系统
可能在多次执行时产生不同的结果

常见的副作用类型

数据获取(API 调用)
- 从服务器获取数据
- 订阅实时数据流
手动 DOM 操作
- 直接修改 DOM 元素
- 使用第三方库需要 DOM 访问
订阅和事件监听
- 添加事件监听器
- 订阅外部数据源
定时器操作
- 设置 setTimeout
- 设置 setInterval
日志记录和分析
- 发送分析数据
- 错误日志记录

useEffect 的三种使用方式

1.每次渲染后都执行

import { 
  useState,
  useEffect
 } from 'react'

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('组件渲染完了')
  })
 

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <button onClick={handleClick}>点我</button>
      {count}
    </>
  )
}

export default App

结果图一

点我们每次点击按钮时，就会重新进行一次渲染，这时候useEffect函数每次都会执行。

2.仅在挂载时执行一次

"仅在挂载时执行一次"指的是 useEffect 中的副作用代码只在组件第一次渲染（挂载）到DOM时运行一次，之后无论组件如何重新渲染，这些代码都不会再次执行。

import { 
  useState,
  useEffect
 } from 'react'

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('组件渲染完了')
  },[])
 

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <button onClick={handleClick}>点我</button>
      {count}
    </>
  )
}

export default App

3.特定值变化时运行

import { 
  useState,
  useEffect
 } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [num, setNumber] = useState(0)
  useEffect(() => {
    console.log('count组件渲染完了')
  }, [count])
 

  const handleClick = () => {
    setCount(count + 1)
   
  }
  return (
    <>
      <button onClick={handleClick}>点我</button>
      <div>{count}</div>
      {num}
     <button onClick={()=>{
      setNumber(num+1)
     }}>点我</button>
    </>
  )
}

export default App

总结

useState 用于管理组件状态，让函数组件能有状态。
useEffect 用于处理组件副作用，控制副作用函数的执行时机。