react中 hook中的 usestate和useEffect

本文详细介绍了React中的useState和useEffect Hook。useState用于管理组件状态,其返回值包括状态变量和更新状态的方法。useEffect则可以看作是componentDidMount、componentDidUpdate和componentWillUnmount的组合,用于处理副作用。它接受一个回调函数,根据第二个参数的不同,可以在组件每次渲染后、只在挂载时或依赖项改变时执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

useState

useState 的使用非常简单,我们从 React 中拿到 useState 后,只需要在使用的地方直接调用 useState 函数就可
userState 里边类型是泛型 可以存入任意类型的数据 在定义一个接收值时 会返回一个数组 数组中第一个值是定义的变量名来接收state数据, 第二个是一个函数 用来修改state的数据 返回值是修改后的state
例如图中的let [n,setN] = useState(0)

  1. 这里usestate中的0就是state的默认值 也就是初始值
  2. n来接收当前state的值
  3. setN就是用来修改state的 返回值是修改后的state

在这里插入图片描述

useEffect 生命周期

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

以往我们在绑定事件、解绑事件、设定定时器、查找 dom 的时候,都是通过 componentDidMount、componentDidUpdate、componentWillUnmount 生命周期来实现的,而 useEffect 会在组件每次 render 之后调用,就相当于这三个生命周期函数,只不过可以通过传参来决定是否调用

其中注意的是,useEffect 会返回一个回调函数,作用于清除上一次副作用遗留下来的状态,如果该 useEffect 只调用一次,该回调函数相当于 componentWillUnmount 生命周期

useEffect 的第二个参数

useEffect 的第二个参数,有三种情况

  1. 什么都不传,组件每次 render 之后 useEffect 都会调用,相当于 componentDidMount 和 componentDidUpdate
  2. 传入一个空数组 [], 只会调用一次,相当于 componentDidMount 和 componentWillUnmount
  3. 传入一个数组,其中包括变量,只有这些变量变动时,useEffect 才会执行

在这里插入图片描述
在这里插入图片描述

### React `useState` Hook Set Method Not Working Solutions and Troubleshooting In React applications, encountering issues where the `setState` function from the `useState` hook does not seem to update state as expected can lead to confusion. This problem might arise due to several common pitfalls. #### Understanding Asynchronous Nature of State Updates State updates may be batched by React for performance optimization; therefore, they do not immediately reflect changes when called within event handlers or lifecycle methods[^3]. To ensure correct behavior after a state change: ```javascript import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prevCount => prevCount + 1); console.log(count); // May log previous value because setState is asynchronous. }; useEffect(() => { console.log(`Updated count: ${count}`); }, [count]); return ( <button onClick={handleClick}> Click me </button> ); } ``` #### Avoiding Direct Mutation of State Objects Directly mutating objects or arrays stored in state without using functional updates can cause unexpected behaviors since it bypasses re-render triggers provided by React's reconciliation process[^4]. For instance, consider an array inside state being modified directly versus immutably updating its contents through spreading or utility libraries like Immer.js: ```javascript // Incorrect approach (direct mutation) const handleAddItemIncorrect = newItem => { let newList = items; newList.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃囍囍丸子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值