首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么当我更新一个useState时,它没有调用它(react hooks)就更新了另一个?

当你更新一个useState时,它没有调用它(react hooks)就更新了另一个的原因可能是由于React的渲染机制和函数组件的特性导致的。

在React中,useState是一种React Hook,用于在函数组件中添加状态。当你调用useState时,它会返回一个状态值和一个更新该状态值的函数。当你调用这个更新函数时,React会重新渲染组件,并将新的状态值应用到组件中。

然而,由于函数组件的特性,每次组件重新渲染时,函数组件内部的所有代码都会重新执行一遍。这意味着每次重新渲染时,useState都会被调用,返回一个新的状态值和更新函数。

如果在函数组件中存在多个useState调用,每个useState都会返回一个独立的状态值和更新函数。当你调用其中一个更新函数时,React会重新渲染组件,并将新的状态值应用到组件中。但是,由于函数组件的重新执行特性,其他的useState调用也会被重新执行,返回新的状态值和更新函数。

这就可能导致当你更新一个useState时,它没有调用它就更新了另一个的情况。因为在函数组件重新渲染时,所有的useState调用都会被重新执行,返回新的状态值和更新函数,而不仅仅是被调用的那个useState。

为了解决这个问题,你可以使用React的useEffect Hook来控制useState的更新。useEffect可以让你在组件渲染完成后执行一些副作用操作,比如订阅事件、发送网络请求等。通过在useEffect中指定依赖项数组,你可以控制副作用操作的触发时机。

例如,你可以在useEffect中指定依赖项数组为被更新的useState,这样只有当被更新的useState发生变化时,useEffect才会执行。这样可以避免不必要的重新渲染和更新。

总结起来,当你更新一个useState时,它没有调用它就更新了另一个的原因是函数组件的重新执行特性导致的。为了解决这个问题,你可以使用React的useEffect Hook来控制useState的更新时机。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Hooks踩坑分享

每一次渲染都能拿到独立的num状态,这个状态值是函数中的一个常量。 所以在num为3,我们点击展示现在的值按钮,相当于: function Demo() { // ......唯有在依赖数组中传入了num,React才会知道你依赖num,在num的值改变,需要更新函数。...(其实这些归根究底,就是React Hooks会形成闭包) 三、如何在React Hooks中获取数据 在我们用习惯了类组件模式,我们在用React Hooks中获取数据,一般刚开始大家都会这么写吧:...这就确保它不随渲染而改变,除非自身的依赖发生了改变。 另外一方面,业务一旦变的复杂,在React Hooks中用类组件那种方式获取数据也会有别的问题。...通过dispatch一个action来描述发生了什么。这使得我们的fetchData函数和list状态解耦。我们的fetchData函数不再关心怎么更新状态,只负责告诉我们发生了什么。

2.9K30

react hooks 全攻略

React Hooks 的目的是解决这些问题。提供一种简洁的方式来在函数组件中定义和复用状态逻辑,以及处理副作用。通过使用 Hooks,我们可以更自由地编写组件,而不需要使用类组件的繁琐结构。...> // ); # useRef useRef 是 React Hooks 中的一个创建持久引用的 hook,提供一种在函数组件中存储和访问...在每次函数组件执行时,返回一个持久化的引用对象。这个对象有一个 current 属性,可以用来存储和读取值。当我们修改这个 current 属性的值,组件的重新渲染不会受到影响。...使用场景: 传递回函数给子组件:当我们将一个函数作为 prop 传递给子组件,并且该函数的依赖项在父组件重新渲染可能发生变化时,可以使用 useCallback 缓存该函数,以确保子组件只在依赖项变化时才重渲染...使用这个自定义的路由守卫 hooks ,你可以像下面这样在需要应用路由守卫的组件中使用它: import React from "react"; import useRouteGuard from "

36140

第七篇:React-Hooks 设计动机与工作模式(下)

因此 React-Hooks 在诞生之初,优先考虑对 state 的支持。useState 正是这样一个能够为函数组件引入状态的 API。...当我们在函数组件中调用 React.useState 的时候,实际上是给这个组件关联一个状态,注意,是“一个状态”而不是“一批状态”,这一点是相对于类组件中的 state 来说的。...现在,基于对 React-Hooks 编码层面的具体认知,想必你对“动机”的理解也已经上了一个台阶。这里我们趁热打铁,针对“Why React-Hooks”这个问题,做一个加强版的总结。...相信有不少嗅觉敏锐的同学已经感觉到了——没错,这个环节就是手把手教你做“为什么需要 React-Hooks”这道面试题。...更何况 React 仅仅是推崇函数组件,并没有“拉踩”类组件,甚至还官宣“类组件和函数组件将继续共存”这件事情。这些都在提醒我们,在认识到 Hooks 带来的利好的同时,还需要认识到的局限性。

82510

10分钟教你手写8个常用的自定义hooks

当我们在容器组件手动更新任何state,容器内部的各个子组件都会重新渲染,为了避免这种情况出现,我们一般都会使用memo将函数组件包裹,来达到class组件的pureComponent的效果: import...实现自定义的useState,支持类似class组件setState方法 熟悉react的朋友都知道,我们使用class组件更新状态,setState会支持两个参数,一个更新后的state或者回调式更新的...state,另一个参数是更新后的回函数,如下面的用法: this.setState({num: 1}, () => { console.log('updated') }) 但是hooks函数的...useState第二个参数回支持类似class组件的setState的第一个参数的用法,并不支持第二个参数回,但是很多业务场景中我们又希望hooks组件能支持更新后的回这一方法,那该怎么办呢?...,当执行setXstate,会传入和setState一模一样的参数,并且将回赋值给useRef的current属性,这样在更新完成,我们手动调用current即可实现更新后的回这一功能,是不是很巧妙呢

2.5K20

ahooks 是怎么解决 React 的闭包问题的?

在组件更新的过程中,hooks 函数执行的顺序是不变的,就可以根据这个链表拿到当前 hooks 对应的 Hook 对象,函数式组件就是这样拥有state的能力。...同时制定一系列的规则,比如不能将 hooks 写入到 if...else... 中。从而保证能够正确拿到相应 hook 的 state。 useEffect 接收了两个参数,一个函数和一个数组。...当我点击按钮使 count 增加 1 的时候,整个函数式组件重新渲染,这个时候前一个执行的链表已经存在。...useRef 创建的是一个普通 Javascript 对象,而且会在每次渲染返回同一个 ref 对象,当我们变化的 current 属性的时候,对象的引用都是同一个,所以定时器中能够读到最新的值。...使用它之后,上面的例子变成了。

1.2K21

通过 React Hooks 声明式地使用 setInterval

比方说,我们可以在用户切换到另一个选项卡,降低 AJAX 更新数据的频率。 如果按照类(Class)的方式,怎么通过 setInterval 实现上述需求呢?...我感觉你已经开始怼天怼地Hooks 是什么鬼嘛! 解决这个问题的一个方案,是把 setCount(count + 1) 替换成“更新”的方式 setCount(c => c + 1)。...从回参数中,可以获取到最新的状态。此非万全之策,新的 props 无法读取到。 另一个解决方案是使用 useReducer()。此方案更为灵活。...通过离散的声明,我们描述一个连续的过程。 相对应的,setInterval 却没有描述到整个过程 - 一旦你设置计时器,它就无法改变了,只能清除。...它会一直引用着旧的 props 和 state,除非把换了。但是只要把换了,没法不重新设置时间。 等会,真的不能吗? --- Refs 是救星!

7.4K220

React系列-自定义Hooks很简单

React系列-Mixin、HOC、Render Props(上) React系列-轻松学会Hooks(中) React系列-自定义Hooks很简单(下) 我们在第二篇文章中介绍一些常用的hooks,...(如果你熟悉 Redux 的话,已经知道如何工作了。)...笔者[狗头]认为,暂时应该不会用useReducer替代useState,毕竟Redux的写法实在是很繁琐 复杂数据结构场景 刚好最近笔者的项目碰到了复杂数据结构场景,可是并没有用useReducer...可以看到即使props没有变化,一旦组件上层最近的 更新,该 Hook 会触发重渲染,此时Memo失效 Hooks替代Redux 有useReducer...MyProvider // 导出 connect connect:connect是一个高阶组件,提供一个连接功能,可用于将组件连接到store, 提供组件获取 store 中数据或者更新数据的接口

2.1K20

React Hooks-useTypescript!

这个hook会返回一个数组,包含当前状态值跟一个更新状态的函数。当状态被更新,它会触发组件的重新渲染。...如果我们使用一个箭头函数作为回,我们需要确保没有隐式返回一个值。...当我们从子组件中传出一个,这个hook可以被用来避免没有意义的渲染。因为这个回只有在数组里的值改变的时候才会被执行,我们可以借此优化我们的组件。...接受一个函数作为的第一个参数,同样的,第二个参数是一个数组。然后会返回一个缓存的值,这个值会在数组中的值有更新的时候重新计算。我们可以借此在渲染避免一些复杂的计算。...返回的对象会存在于组件的整个生命周期,ref 的值可以通过把设置到一个React元素的 ref属性上来更新

4.1K40

快速上手 React Hook

这是因为很多情况下,我们希望在组件加载和更新执行同样的操作。从概念上说,我们希望它在每次渲染之后执行 —— 但 React 的 class 组件没有提供这样的方法。...是的,默认情况下,它在第一次渲染之后和每次更新之后都会执行。(我们稍后会谈到如何控制React 保证每次运行 effect 的同时,DOM 都已经更新完毕。...useCallback,它将返回该回函数的 memoized 版本,该回函数仅在某个依赖项改变才会更新。...官方发布一个名为 eslint-plugin-react-hooks 的 ESLint 插件来强制执行这两条规则。...「提取自定义 Hook」 当我们想在两个函数之间共享逻辑,我们会把提取到第三个函数中。而组件和 Hook 都是函数,所以也同样适用这种方式。

5K20

React系列-轻松学会Hooks

(上) React系列-轻松学会Hooks(中) React系列-自定义Hooks很简单(下) HOC、Render Props、组件组合、Ref 传递……代码复用为什么这样复杂?...为什么使用 开发中我们会经常遇到,当我一个函数组件想要有自己维护的state的时候,不得已只能转换成class useState 的出现是 :useState 是允许你在 React 函数组件中添加...Hooks进行开发,通过useState定义的值拿到的都不是最新的现象。...返回一个 memoized 回函数,❗️根据依赖项来决定是否更新函数 为什么使用 react中Class的性能优化。...知识点合集 useCallback的依赖参数 该回函数fn仅在某个依赖项改变才会更新,如果没有任何依赖项,则deps为空 const memoizedCallback = useCallback(

4.3K20

一份react面试题总结

使用它的目的是什么? 它是一个函数,当 setState方法执行结束并重新渲染该组件时调用它。...特性,例如 state、 各种组件生命周期钩子等,但是在函数定义中,我们却无能为力,因此 React 16.8 版本推出了一个新功能 (React Hooks),通过,可以更好的在函数定义组件中使用...当一个 匹配成功,它将渲染其内容,当它不匹配就会渲染 null。没有路径的 将始终被匹配。...> // React 当我们想强制导航,可以渲染一个,当一个渲染,它将使用它的...这个时候,redux出现,我们可以将所有的state交给redux去管理,当我们的某一个state有变化的时候,依赖到这个state的组件就会进行一次重渲染,这样解决我们的我们需要一直把state

7.4K20

美丽的公主和它的27个React 自定义 Hook

一个有状态组件声明并管理本地状态。 一个无状态组件是一个纯函数,没有本地状态和需要管理的副作用。 ❝一个纯函数是一个没有副作用的函数」。这意味着一个函数对于相同的输入始终返回相同的输出。...在需要删除Cookie的情况下,deleteCookie函数派上用场。只需调用此函数,它将从浏览器中删除指定的Cookie。该钩子会负责更新状态,确保我们的应用程序反映Cookie的删除。...接受两个参数:回函数和延迟持续时间(以毫秒为单位)。每当指定的延迟时间过去,将执行提供的回函数。 这个自定义钩子的一个重要优点是,确保即使在组件重新渲染期间更改,回函数仍然保持最新状态。...此外,当调查特定组件为什么没有如预期般更新或在性能关键的应用程序中微调优化时,这个钩子也可能非常有价值。 通过将「组件名称」和「属性」传递给钩子,我们可以获得一个包含所有相关调试数据的info对象。...接受一个可选的options参数,以自定义地理位置行为,允许我们根据特定需求微调准确性和其他设置。 该钩子自动处理加载状态,当获取地理位置数据更新,并在过程中出现任何问题设置错误状态。

56320

Hooks 邂逅 MobX ,代码变得更丝滑了!

有时候,你的useEffect 依赖某个函数的不可变性,这个函数的不可变性又依赖于另一个函数的不可变性,这样便形成了一条依赖链。...是不是感觉比 传统的React.Component 更伤脑细胞? 为什么说是缓存雪崩呢?造成这个问题主要是因为 Hooks 函数运行是独立的,每个函数都有一份独立的作用域。...每次都会创建闭包数据,从性能角度来讲,此时缓存就是必要的。而缓存就会牵扯出一堆问题。另外当我们有异步操作的时候,经常会碰到异步回的变量引用是之前的,也就是旧的,于是导致无法批量更新。...其实 Hooks 这些问题都是因为没有一个公共的空间来共享数据导致的,在 Class 组件中,我们有 this , 在 Vue3 中,我们有 setup作用域 。...Hooks 你只能依靠useRef + ref.current 来 hack 。但它极其不优雅,丢失函数编程的味道。 我们是有追求的程序猿,当然不能这样了事。

1.2K10

快速了解 React Hooks 原理

Hooks不会替换类,它们只是一个你可以使用的新工具。React 团队表示他们没有计划在React中弃用类,所以如果你想继续使用它们,可以继续用。...我能体会那种总有新东西要学的感觉有多痛苦,不会感觉咱们总是落后一样。Hooks 可以当作一个很好的新特性来使用。当然没有必要用 Hook 来重构原来的代码, React团队也建议不要这样做。...其中做的一件事设置 Hooks 数组。 开始是空的, 每次调用一个hookReact 都会向该数组添加该 hook。...下次渲染,同样的3个hooks以相同的顺序被调用,所以React可以查看的数组,并发现已经在位置0有一个useState hook ,所以React不会创建一个新状态,而是返回现有状态。...多个useState 调用示例 让咱们更详细地看看这是如何实现的,第一次渲染: React 创建组件,它还没有调用函数。React 创建元数据对象和Hooks的空数组。

1.3K10

React Hooks 设计动机与工作模式

早期并没有 React-Hooks 的加持,函数组件内部无法定义和维护 state,因此它还有一个别名叫“无状态组件”。...因此 React-Hooks 在诞生之初,优先考虑对 state 的支持。useState 正是这样一个能够为函数组件引入状态的 API。...当我们在函数组件中调用 React.useState 的时候,实际上是给这个组件关联一个状态——注意,是“一个状态”而不是“一批状态”。这一点是相对于类组件中的 state 来说的。...现在,基于对 React-Hooks 编码层面的具体认知,想必你对“动机”的理解也已经上了一个台阶。这里我们趁热打铁,针对“Why React-Hooks”这个问题,做一个加强版的总结。...更何况 React 仅仅是推崇函数组件,并没有“拉踩”类组件,甚至还官宣“类组件和函数组件将继续共存”这件事情。这些都在提醒我们,在认识到 Hooks 带来的利好的同时,还需要认识到的局限性。

96540

一步步实现React-Hooks核心原理

因为在useState返回的时候,state指向初始值,所以后面即使counter的值改变了,打印出来的仍然旧值。我们想要的是,返回一个变量的同时,还能让这个变量和真实状态同步。那如何来实现呢?...发生变化才触发回。注意这里在比较依赖用的是Object.is, React在比较state变化时也是用它。注意Object.is在比较不会做类型转换(和==不同)。...实际React中useEffect的回函数应该是异步执行的)支持多个Hooks到此为止我们已经简单实现useState和useEffect。...发生变化才触发回。注意这里在比较依赖用的是Object.is, React在比较state变化时也是用它。注意Object.is在比较不会做类型转换(和==不同)。...实际React中useEffect的回函数应该是异步执行的)支持多个Hooks到此为止我们已经简单实现useState和useEffect。

2.3K30

怎样对reacthooks进行性能优化?

在使用它们进行优化之前,我想我们需要明确我们使用它们的目的:减少组件的非必要重新渲染减少组件内部的重复计算1 使用 React.memo 避免组件的重复渲染在讲述 React.memo 的作用之前,我们先来思考一个问题...因为如果一个父组件重新渲染,即使其子组件的 props 没有发生任何变化,这个子组件也会重新渲染,我们称这种渲染为非必要的重新渲染。这时 React.memo 就可以派上用场。...不然如果每次更改状态都会重新渲染真实 DOM,那么 React 的性能真爆炸(笑)。...fn】和【依赖项数组 deps】作为参数,并返回一个【缓存的回函数 memolizedCallback】(本质上是一个引用),仅会在某个依赖项改变才重新生成 memolizedCallback。...场景 1:useCallback 主要是为了避免当组件重新渲染,函数引用变动所导致其它 Hooks 的重新执行,更为甚者可能造成组件的无限渲染:import React, { useEffect, useState

2.1K51

react高频面试题总结(一)

这三个问题在一定程度上阻碍 React 的后续发展,所以为了解决这三个问题,Hooks 基于函数组件开始设计。然而第三个问题决定 Hooks 只支持函数组件。...为什么很重要?组件状态数据或者属性数据发生更新的时候,组件会进入存在期,视图会渲染更新。...什么是 React的refs?为什么它们很重要refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。...如果该属性的值是一个函数,它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储。...而replaceState 是完全替换原来的状态,相当于赋值,将原来的 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态

1.3K50

react-hooks如何使用?

react-hooksreact16.8以后,react新增的钩子API,目的是增加代码的可复用性,逻辑性,弥补无状态组件没有生命周期,没有数据管理状态state的缺陷。...2.为什么要使用hooks 我们为什么要使用react-hooks呢,首先和传统的class声明的有状态有着显著的优点就是 1 react-hooks可以让我们的代码的逻辑性更强,可以抽离公共的方法,公共组件...,所以需要配合useMemo,usecallback等api配合使用,这就是我说的为什么滥用hooks会带来负作用的原因之一。...dispatch 的触发会触发组件的更新,这里能够促使组件从新的渲染的一个useState派发更新函数,另一个 useReducer中的dispatch。...deps数组,数组里的参数变化决定useMemo是否更新函数,useMemo返回值就是经过判定更新的结果。

3.5K80

React 16.8.6 升级指南(react-hooks篇)

---- 为什么需要Hooks 更好地在组件之间复用状态逻辑 “高内聚,低耦合”是非常具有前瞻性的软件开发原则,React中的组件似乎也践行得很不错可以说近乎完美,但是从另一个角度上看,组件内部逻辑的和视图的耦合度却是出奇的高...hook处理表单的典型方式就是使用useState将表单项的值存储起来,每当触发onChange事件更新对应的value。...当我们多次使用Hook,在React内部,FunctionalComponent的hooks之间并不是平铺的,而是采用链表的结构,next字段派上了用场,类似这样的结构: { memoizedState...如果在这个副作用函数中依赖另一个变量,假定是B,但是没有在Deps中出现,即便在count更新可以拿到最新的变量B,但是在B变化的时候并不会触发这个副作用函数。...useFetch中使用了useCallback,它会返回一个函数,这个回函数会在依赖项也就是传进来的count变更返回一个新的回函数,也就是说count变化过后,fetchData也会发生变化

2.6K30
领券