React 中的useState 和 setState 的执行机制

最新推荐文章于 2024-07-17 17:28:45 发布
最新推荐文章于 2024-07-17 17:28:45 发布
阅读量709 收藏
点赞数 1
分类专栏： 面试 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50736511/article/details/128118137
版权

1.执行方式

@在reaact17中

  • 在组件生命周期或React合成事件中，是异步；
  • 在setTimeout或者原生dom事件中，是同步；

这里的异步是的是类似异步，不是真正意义上的异步，这里的异步指的是react吧useState 和setState 放在其他代码之后执行，而在17中的setTimeout和原生dom事件中并没有类似异步的执行

@在react18中所有都是异步执行的

@这样做的好处：
可以显著的提高性能： 若每次调用都会被界面重新渲染，效率极低，通过获取多个更新之后，进行批量的更新

2.批量更新

对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果（uesstate一样），(只针对17异步更新的时候)

万事胜意sy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React Hooks之useState
11-04 531
以前只有类组件才能使用state, 函数组件只能展示静态的数据，它没有自己的状态，而useState的出现让函数组件也能使用state。二、useState的基本使用。
react hook useState连续更新对象问题
weixin_41711709的博客
02-19 2438
react useState连续更新2次带来的问题
React Hooks之useState详解
RayShyy的博客
02-12 7592
React官方简介：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文中讲解的useState就是React中的其中一个Hook。
React Hooks —— useState异步更新队列、闭包、浅比较深入理解
m0_46569480的博客
06-28 3031
render多次（理论上是一次，这里是因为这些操作作用的都是一个闭包中的同一个状态值x，在第一次改状态还没改成功之前，其他次操作访问的状态值仍旧是还没改的10，直到第一次改状态成功，剩余次操作不会再通过Object.is的测试。第二次flushSync，更新队列里只有一个setX，立即同步执行，使用的也是第一次Demo创建出来的EC的闭包中的state（因为这些flushSync方法都存在于第一个上下文中），也就是10。注意不是因为DOM-DIFF；，会刷新队列，也就是通知更新队列中的所有任务执行：把。
关于setState的一些坑
weixin_51033179的博客
02-18 639
setState更新数组 你会发现，如果直接使用push等方法改变state，按理来说，push会改变原数组，数组应该更新，但渲染出来的state并不会更改 let newValue = 1; const [array, setArray] = useState([]); const handleChange = (newValue: number) =>{ array.push(newValue); setState(array);//array更新了，但无法触发渲染 console.l
React 中 setState 使用注意事项
诗渊的博客
02-29 1152
1. 不能直接设置this.state 这个基本学习过 react 的读者都不会犯这样的错，直接设置 this.state 的值并不能触发组件 render(),正确的是调用 setState() 函数来处理。 2. setState() 回调函数 我们在用 setState() 时，疑惑比较多的地方就是 setState() 可能不会立即生效。基于这一点，慢慢地我们就形成了 setState()...
React事件监听和State状态修改
qq_40029828的博客
05-10 4471
on*函数可直接使用，但只能使用在html标签上，自己创建的组件标签不可 狗子组件：点击会打印bark和run class Dog extends Component { bark () { console.log('bark') } run () { console.log('run') } render () { return (<div onClick={ //有两个方法需要实现，所以用一个函数进行封装 ()=&gt.
剖析 React 内部运行机制.rar
12-29
本资料"剖析React内部运行机制"将深入探讨React的工作原理，包括虚拟DOM、生命周期方法、状态管理和渲染过程。 1. 虚拟DOM（Virtual DOM） 虚拟DOM是React的一项关键技术，它是一个轻量级的内存数据结构层，用来...
thinking-in-react-example:在React中思考
04-29
全局状态通常通过Redux、MobX等库来管理，但在这个简单的例子中，可能仅使用React的state和props机制。理解何时以及如何使用状态管理对优化代码和提升应用可维护性至关重要。 四、生命周期方法 React组件有多个生命...
react-SimplefunctionalsetStateforReact
08-14
在React 16.8及更高版本中，引入了`useState`钩子，这是函数式组件中添加状态和更新状态的机制。`useState`是一个内置的React钩子，它允许函数组件拥有自己的状态。 ```jsx import React, { useState } from 'react...
千锋2022版React全家桶教程_react零基础入门到项目实战完整版（资料）
07-27
2. 运行中阶段：React 生命周期的运行中阶段，包括组件的更新和销毁。 3. 销毁阶段：React 生命周期的销毁阶段，包括组件的卸载和销毁。 十、React Hooks 1. useState：useState 是 React Hooks 中的一种 Hook，...
react官方源码完整版下载
12-27
React以其高效的虚拟DOM（Document Object Model）更新机制和组件化思想著称，大大提升了开发者构建大型复杂应用的能力。在这个“react官方源码完整版下载”中，我们可以深入理解React的工作原理，包括其生命周期...
React setState之后执行某个函数或逻辑
KEEP RUNNING的博客
08-04 3997
setState( { name: 'Little Flower' } ) 是异步操作，执行需要一定的时间，想要在setstate之后执行某个函数，有两种方法，根据业务逻辑需要自行判断即可！ 方法一：利用 setState 之后会执行 render 函数这个特性，可以把需要执行的逻辑写在 render 里 render() { const { name } =this.state; let nameView; if(name) { nameView = &lt.
【React工作记录二】React中setstate得回调用法
geyaoisnice的博客
12-07 940
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 需求 在日常得开发需求中 当react中state得值发生变化 需要即刻用到该值得时候 解决方案 setstate({},callback) 可以在回调函数中立即处理之后得一个逻辑 this.setState({},() => {}) .....
React解决setState异步带来的多次修改合一和修改后立即使用没有变化问题
weixin_45966674的博客
06-29 990
我们在state中定义了一个cont 值是 0 然后 在componentDidMount 页面第一次渲染完成后执行的生命周期中 给他加一 然后我们运行代码。因为 setState 这个函数是个异步执行的 所以 相当于 他们接到的this.state.cont都是0 那0加一 自然就是 1了。没错 一开始是0 页面第一次挂载完成 加一 变成了 1 是没问题的 然后我们将componentDidMount的代码改成这样。我们编写这样一段代码。
React中的setState执行机制
比鲁斯大人的博客
05-17 173
一个组件的显示形态可以有数据状态和外部参数所决定，而数据状态就是state当需要修改里面值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用。setState有两个参数，第一个参数可以是一个对象，或者是一个函数，而第二个参数是一回调函数，用于实时的获取更新之后的数据。在setTimeout或者原生dom事件中，setState是同步。在组件生命周期或React合成事件中，setState是异步。
React 多个setState会调用几次？
火星基地
11-10 4166
1. 两个setState，调用几次？ 如下代码所示，state中有一个count。对按钮绑定了点击事件，事件中执行了两次setState，每次都将count的值加1。 当点击按钮时，setState会执行几次？render()会执行几次？ 答案：都是1次。 state = { count: 0 }; handleClick = () => { this.setState({ count: this.state.count + 1 }); this.setState({ count:
react + pro-components + ts完成单文件上传和批量上传
最新发布
阿宝的博客
07-17 419
react + pro-components + ts完成单文件上传和批量上传,上传部分使用的是antd中的Upload组件,具体如下:GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可。
usestate和setstate区别
06-06
`useState` 和 `setState` 是 React 中的两个不同的函数。 `useState` 是一个 Hook，它允许你在函数组件中使用状态。它接收一个初始值作为参数，并返回一个包含当前状态和更新状态的函数的数组。 `setState` 是一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

万事胜意sy

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

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

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

打赏作者

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

抵扣说明：

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

余额充值