此问题在此处已有答案:
Why React goes Infinite when I set state in function body?(2个答案)
Updating state to the same state directly in the component body(2个答案)
昨天关门了。
为什么代码会导致无限循环,即使setState()中的值没有改变..我们知道如果当前值和以前的值相同,则状态不会改变。
**我们知道组件在状态改变时会重新渲染
但先前值和当前值相同
那为什么组件重新渲染
也对象是不作为参数传递的React检查的基础上引用。因为这是一个原始的React检查的基础上的价值。仍然为什么组件重新渲染???
import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'
function App() {
const [state,setState] = useState(0)
console.log(state)
setState((prev)=>7)
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.jsx</code> and save to reload!
</p>
<span className="App-link">Hello from codedamn :)</span>
</header>
</div>
)
}
export default App
useEffect外部的setState完全不等于没有依赖数组的useEffect。您可以尝试在没有提供依赖数组的useEffect内部使用. setState(9)。以及在代码中没有useEffect的setState(9)。
1条答案
按热度按时间pieyvz9o1#
在React中,更改状态会触发组件的重新渲染。即使新的状态值与前一个值相同,重新渲染仍然会发生,因为React无法针对每个可能的状态更改进行优化。因此,当您使用相同的值调用
setState
时,它仍然会触发重新渲染。在示例代码中,
setState
是用一个常量7调用的,这意味着它总是相同的,所以即使该值没有改变,重新渲染仍然会被触发,从而导致无限循环。关于在
useEffect
外部和内部使用setState
的问题,区别在于useEffect
外部的setState
将立即触发重新渲染,而useEffect
内部的setState
没有依赖数组,只会在组件挂载时触发一次重新渲染。setState
与useEffect
外部或内部没有依赖关系本质上是相同的,因为它将在每次组件更新时触发重新渲染。