开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么useState钩子调用两次初始化值代码？

useState钩子调用两次初始化值代码的原因是由于React的工作机制所致。

在React中，组件的状态是通过useState钩子来管理的。当组件首次渲染时，useState钩子会被调用，并且会返回一个状态值和一个更新状态的函数。在函数组件中，每次重新渲染时，useState钩子都会被调用。

useState钩子调用两次初始化值代码的原因是为了确保组件的初始状态值是稳定的。在React中，组件的状态是不可变的，即使在重新渲染时也不会改变。因此，为了保证组件的状态在重新渲染时保持一致，useState钩子会在每次重新渲染时都调用一次，以获取最新的状态值。

具体来说，第一次调用useState钩子时，会执行初始化值代码，并返回初始状态值和更新状态的函数。然后，React会记录下这个初始状态值，并在下一次重新渲染时使用它。在下一次重新渲染时，useState钩子会再次被调用，但这次调用不会执行初始化值代码，而是直接返回上一次记录的初始状态值和更新状态的函数。

这样做的好处是可以确保组件的状态在重新渲染时保持一致，避免因为重新渲染导致状态值的变化而引发问题。同时，这也符合React的设计理念，即将组件的状态与渲染结果分离，使得组件的状态可以独立于渲染过程进行管理。

推荐的腾讯云相关产品：无

参考链接：

React官方文档：https://reactjs.org/docs/hooks-state.html

相关搜索:react钩子是如何工作的？为什么useState跟踪的值在重新渲染时不会重置？为什么ngAfterContentInit钩子被调用两次？为什么OnLevelWasLoaded ()被调用两次，为什么我的变量在每次调用中都有不同的值？为什么useState钩子的默认值是未定义的？为什么当调用Line构造函数时，一些值被初始化为NaN？为什么我的JS代码在调用JS函数showSlides( SLIDEINDEX )时没有显示任何其他幻灯片；即使我改变了SLIDEINDEX的值？为什么我的useState钩子没有保存我的变量的值？用于初始化useState钩子的传入属性在调用钩子的更新程序方法时得到更新双11购车预测购买双11实景采集购买

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

浅谈Hooks&&生命周期(2019-03-12)

1.1 useState 看例子 - hooksdemo 进去就调用了useState，传入 0，对state 进行初始化，此时count 就是0，返回一个数组，第一个元素就是 state...（组件被 mount 时）和后续调用（重复渲染时），只有第一次才用得上参数的初始值，而后续的调用就返回“记住”的 state 值。...React 是完全根据 useState 的调用顺序来“记住”状态归属的，假设组件代码如下： const Counter = () => { const [count, setCount] = useState...所以我们合理的做法是，给每一个副作用一个单独的useEffect钩子。这样一来，这些副作用不再一股脑堆在生命周期钩子里，代码变得更加清晰。...useEffect 还支持第二个可选参数，只有同一 useEffect 的两次调用第二个参数不同时，第一个函数参数才会被调用.

3.2K4 0

换个角度思考 React Hooks

尤其是在生命周期钩子中，多个不相关的业务代码被迫放在一个生命周期钩子中，需要把相互关联的部分拆封更小的函数。...整个 Hooks 运作过程：函数组件 Example 第一次执行函数时 useState 进行初始化，其传入的参数 0 就是 count 的初始值；返回的 VDOM 中使用到了 count 属性，其值为...count 及修改 count 的方法 setCount，只不过不会执行 count的初始化，而是使用其上一次 setCount 传入的值。...）后以及之后每次更新都需要该操作，一个是初始化一个是更新后，这种情况在平时经常会遇到，有时候遇到初始化问题，就避免不了会写两次，哪怕是抽离成单独的函数，也必须要在两个地方调用，当这种写法多了起来后将会变得冗余且容易出...可以看到无论是初始化渲染还是更新渲染，useEffect 总是会确保在组件渲染完毕后再执行，这就相当于组合了初始化和更新渲染时的生命周期钩子。

4.7K2 0

React 中的useState 和 setState 的执行机制

setState和 useState 只在「合成事件」如onClick等和「钩子函数」包括componentDidMount、useEffect等中是“异步”的，在原生事件和 setTimeout、Promise.resolve...这里的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是「合成事件」和「钩子函数」的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”。...「批量更新优化」也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout、Promise.resolve().then 中不会批量更新，在“异步”中如果对同一个值进行多次修改，批量更新策略会对其进行覆盖...「同步和异步情况下，连续执行两次同一个 useState」示例 function Component() { const [a, setA] = useState(1) console.log...', count); }}> Click me ) } 点击一次按钮输出的是 1：1 2： 0 那么问题来了，为什么在

3K2 0

React Hooks 分享

， React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 ...三，React hooks 名称及作用： useState 返回有状态值，以及更新这个状态值的函数 useEffect 接受包含命令式，可能有副作用代码的函数 useContext ...() 说明：参数：第一次初始化指定的值在内部作缓存返回值：包括两个元素的数组，第一个为内部当前状态值，第二个为更新状态值的函数 setXxx()两种写法： setXxx(newValue...，并不能使用它，可以思考一下，当有多个状态需要初始化的时候该怎么处理，这个下面再探讨五，useEffect 使用及实现使用方法：可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子...2，初次渲染 3，事件触发 4，re-render hooks流程小结： Q：为什么只能在函数最外层调用 Hook？

2.2K3 0

【React】946- 一文吃透 React Hooks 原理

5 useEffect,useMemo 中，为什么useRef不需要依赖注入，就能访问到最新的改变值？ 6 useMemo是怎么对值做缓存的？如何应用它优化性能？...7 为什么两次传入useState的值相同，函数组件不更新? ... ? 如果你认真读完这篇文章，这些问题全会迎刃而解。...我们先写一个组件，并且用到上述四个主要hooks：请记住如下代码片段，后面讲解将以如下代码段展开 import React , { useEffect , useState , useRef , useMemo...和为什么不能在条件语句中，声明hooks，接下来我们按照四个方向，分别介绍初始化的时候发生了什么？...那么通过调用lastRenderedReducer获取最新的state,和上一次的currentState，进行浅比较，如果相等，那么就退出，这就证实了为什么useState，两次值相等的时候，组件不渲染的原因了

2.1K4 0

React hooks 最佳实践【更新中】

，但是在第二次渲染的时候，执行到的第一个钩子函数是： const [lastName, setLastName] = useState('yeyung'); 这时候，react会去执行顶层的栈中的方法，...03 初始化 通常情况，我们使用 useState 来创建一个带有状态的变量，这个钩子函数返回一个状态变量和一个setter，当我们调用setter函数的时候，render函数会重新执行；这里有一个常见的问题...我们可以发现，无论我们在异步操作的过程中如何改变 state 的值，最后打印的时候都是最初的值或者说异步操作开始定义的时候的 state 的值。 为什么会这样？...deps 去做比较，如果相等，就直接返回缓存中的状态；如果是第一次渲染，或者两次 deps 不想等，那么 useMemo 会重新执行一遍 callback，并将值赋给对应的缓存。...至此，一次 useState 初始化完成，其实我们可以发现，我们在调用 dispatch 时，具体的操作其实并不是修改 state 的值，而是将对应的 action（或者说修改的值）追加到一个队列中，当重复渲染计算到

1.2K2 0

阿里前端二面必会react面试题总结1

中使用useState，React 会报错提示；类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；重要钩子状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state...// 'off'// 'on'// --- WillUnmount --- // 'off'通过第二个参数，我们便可模拟出几个常用的生命周期:componentDidMount: 传入[]时，就只会在初始化时调用一次...参考前端进阶面试题详细解答hooks父子传值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给子组件<Child...componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重新render，所以它一般不会用来作加载数据之用。...componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。

2.7K3 0

30分钟精通React今年最劲爆的新特性——React Hooks

因为每一次我们调用add时，result变量都是从初始值0开始的。那为什么上面的Example函数每次执行的时候，都是拿的上一次执行完的状态值作为初始值？答案是：是react帮我们记住的。...从ExampleWithManyStates函数我们可以看到，useState无论调用多少次，相互之间是独立的。这一点至关重要。为什么这么说呢？...还是看上面给出的ExampleWithManyStates例子，我们调用了三次useState，每次我们传的参数只是一个值（如42，‘banana’），我们根本没有告诉react这些值对应的key是哪个...我们具体来看一下： //第一次渲染 useState(42); //将age初始化为42 useState('banana'); //将fruit初始化为banana useState([{ text...初始化为42 useState('banana'); //将fruit初始化为banana useState([{ text: 'Learn Hooks' }]); //...

1.8K2 0

React报错之Too many re-renders

你可以通过向useState()钩子传递一个初始值或一个函数来初始化状态，从而解决这个错误。...这个函数只会在组件第一次渲染时被调用，并且会计算出初始状态。你也可以直接向useState方法传递一个初始值。另外，你也可以像前面的例子那样使用一个条件或事件处理器。...记忆值另外，我们可以使用useMemo钩子来获得一个在不同渲染之间不会改变的记忆值。...useMemo钩子里面，以获得一个不会在渲染之间改变的记忆值。...useMemo钩子里面，以获得一个不会在不同渲染之间改变的记忆值。

3.2K4 0

看完这篇，你也能把 React Hooks 玩出花

借助这样的特性，我们要做的就是让目标副作用在初始化执行一次后再也不会被调用，于是只要让与该副作用相关联的状态为空，不管其他状态如何变动，该副作用都不会再次执行，即实现了 componentDidMount...通过上面代码的使用，我们将 count1 / count2 的值与一个叫做 calculateCount 的方法关联了起来，如果组件的副作用中用到计算 count1 和 count2 的值的地方，直接调用该方法即可...另外，当我们将使用 useState 创建的状态赋值给 useRef 用作初始化时，手动更改 Ref 的值并不会引起关联状态的变动。...从该现象来看，useRef 似乎只是在内存空间中开辟了一个堆空间将初始化的值存储起来，该值与初始化的值存储在不同的内存空间，修改 Ref 的值不会引起视图的变化。...// 接受初始化的值生成state const [count, changeCount] = useState(initialValue); // 声明减少的方法 const decrease

3.4K3 1

Hooks中的useState

那么问题来了，页面首次渲染和进行+1操作，都会调用App()函数去执行const [count, setCount] = useState(0);这行代码，那它是怎么做到在+ +操作后，第二次渲染时执行同样的代码...，却不对变量n进行初始化也就是一直为0，而是拿到n的最新值。...，简单来说就是在useMyState里边保存一个变量，也就是一个闭包里边保存了这个变量，然后这个变量保存了上次的值，再次调用的时候直接取出这个之前保存的值即可，https://codesandbox.io... ); } 可以在codesandbox中看到现在已经可以实现点击按钮进行++操作了，而不是无论怎么点击都是0，但是上边的情况太过于简单，因为只有一个state，如果使用多个变量，那就需要调用两次...的顺序，例如使用条件判断是否执行useState这样会导致按顺序获取到的值与预期的值不同，这个问题也出现在了React.useState自己身上，因此React是不允许你使用条件判断去控制函数组件中的useState

1K3 0

超详细preact hook源码逐行解析

_pendingEffects = []; } }; 结合_render在 preact 的执行时机，可以知道，在这个钩子函数里是进行每次 render 的初始化操作。...所以，这就是问题 2，为什么 hook 不能放到条件语句中。经过上面一些分析，也知道问题 3 为什么 hook 不能用在普通函数了。...假设有这样一段代码 // 例子 const Component = props => { const [number, setNumber] = useState(0); const handle...useState useState大概是 hook 中最常用的了。类似于 class 组件中的 state 状态值。...在 hook 中的调用关系如下 1、 options.differed 钩子中（即组件 diff 完成后），执行afterPaint(afterPaintEffects.push(c))将含有_pendingEffects

2.6K2 0

看完这篇，你也能把 React Hooks 玩出花

借助这样的特性，我们要做的就是让目标副作用在初始化执行一次后再也不会被调用，于是只要让与该副作用相关联的状态为空，不管其他状态如何变动，该副作用都不会再次执行，即实现了 componentDidMount...通过上面代码的使用，我们将 count1 / count2 的值与一个叫做 calculateCount 的方法关联了起来，如果组件的副作用中用到计算 count1 和 count2 的值的地方，直接调用该方法即可...另外，当我们将使用 useState 创建的状态赋值给 useRef 用作初始化时，手动更改 Ref 的值并不会引起关联状态的变动。...从该现象来看，useRef 似乎只是在内存空间中开辟了一个堆空间将初始化的值存储起来，该值与初始化的值存储在不同的内存空间，修改 Ref 的值不会引起视图的变化。...// 接受初始化的值生成state const [count, changeCount] = useState(initialValue); // 声明减少的方法 const decrease

2.9K2 0

美团前端一面必会react面试题4

受控组件更新state的流程：可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器事件处理器通过事件对象e拿到改变后的状态，并更新组件的state一旦通过setState...中使用useState，React 会报错提示；类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；重要钩子状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state...// 'off'// 'on'// --- WillUnmount --- // 'off'通过第二个参数，我们便可模拟出几个常用的生命周期:componentDidMount: 传入[]时，就只会在初始化时调用一次...componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。...为什么？

3K3 0

React ref & useRef 完全指南，原来这么用！

当按钮被单击时，handle函数被调用，并且引用值被递增:countRef.current++，该引用值被记录到控制台。注意，更新引用值countRef.current++不会触发组件重新渲染。...reference 和 state 之间的主要区别让我们重用上一节中的logbuttonclicked组件，但使用useState()钩子来计算按钮的点击次数: import { useState }...当输入元素在DOM中创建完成后，useEffect(callback，[])钩子立即调用回调函数:因此回调函数是访问inputRef.current的正确位置。...更新 references 限制功能组件的功能范围应该计算输出或调用钩子。这就是为什么更新 ref (以及更新 state)不应该在组件函数的直接作用域内执行。...使用初始值调用const reference = useRef(initialValue)会返回一个名为reference的特殊对象。

6.2K2 0

React技巧之状态更新

，它内部的逻辑代码就会重新运行。...每当parentCount属性值变化时，useEffect钩子会重新运行，并且我们使用setChildCount函数来更新子组件的状态。...把你想追踪的所有props添加到你的useEffect钩子的依赖数组中。避免初次渲染时执行useEffect 需要注意的是，当组件初始化渲染时，我们传递给useEffect钩子的函数也会被调用。...，但是我们也在钩子中更新它的值。...每次运行useEffect时，parentCount的值都会发生变化，这就会再次重新运行钩子，因为parentCount在它的依赖数组中。

8762 0

社招前端react面试题整理5失败

以及调用相应的钩子函数。...this.state通常是用来初始化state的，this.setState是用来修改state值的。...如果初始化了state之后再使用this.state，之前的state会被覆盖掉，如果使用this.setState，只会替换掉相应的state值。...componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。...下面是具体的 class 与 Hooks 的生命周期对应关系：constructor：函数组件不需要构造函数，可以通过调用 **useState 来初始化 state**。

4.6K3 0

一文总结 React Hooks 常用场景

在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks...可以将功能代码聚合，方便阅读维护；组件树层级变浅，在原本的代码中，我们经常使用 HOC/render props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks...effect；但是如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：如下所示，如果 count...值两次渲染之间没有发生变化，那么第二次渲染后就会跳过 effect 的调用； useEffect(() => { document.title = `You clicked ${count} times...原理跟第 4 点性能优化讲述的一样； useEffect(() => { ..... }, []); 6、最佳实践要记住 effect 外部的函数使用了哪些 props 和 state 很难，这也是为什么

3.5K2 0

超实用的 React Hooks 常用场景总结

在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks...可以将功能代码聚合，方便阅读维护；组件树层级变浅，在原本的代码中，我们经常使用 HOC/render props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks...effect；但是如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：如下所示，如果 count...值两次渲染之间没有发生变化，那么第二次渲染后就会跳过 effect 的调用； useEffect(() => { document.title = `You clicked ${count} times...原理跟第 4 点性能优化讲述的一样； useEffect(() => { ..... }, []); 6、最佳实践要记住 effect 外部的函数使用了哪些 props 和 state 很难，这也是为什么

4.6K3 0

用动画和实战打开 React Hooks（一）：useState 和 useEffect

为什么要写这一系列 Hooks 教程？...光看代码可能有点抽象，请看下面的动画：与之前的纯函数式组件相比，我们引入了 useState 这个钩子，瞬间就打破了之前 UI = render(data) 的安静画面——函数组件居然可以从组件之外把状态和修改状态的函数...记录，同时包括状态值（用 useState 给定的初始值初始化）和修改状态的 Setter 函数；多次调用 useState 生成的 Hook 记录形成了一条链表；触发 onClick 回调函数，调用...当我们逐个调用 useState 的时候，useState 便返回了 Hook 链表中存储的状态，以及修改状态的 Setter。...，作为一个整体它们完全不受外界的影响鼓励细粒度和扁平化的状态定义和控制，对于代码行为的可预测性和可测试性大有帮助除了 useState （和其他钩子），函数组件依然是实现渲染逻辑的“纯”组件，对状态的管理被

2.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭