javascript 为什么react代码会导致无限循环?为什么setState在useEffect外部调用时会导致无限循环,即使它设置为相同的值?[重复]

pod7payv  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(196)

此问题在此处已有答案

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)。

pieyvz9o

pieyvz9o1#

在React中,更改状态会触发组件的重新渲染。即使新的状态值与前一个值相同,重新渲染仍然会发生,因为React无法针对每个可能的状态更改进行优化。因此,当您使用相同的值调用setState时,它仍然会触发重新渲染。
在示例代码中,setState是用一个常量7调用的,这意味着它总是相同的,所以即使该值没有改变,重新渲染仍然会被触发,从而导致无限循环。
关于在useEffect外部和内部使用setState的问题,区别在于useEffect外部的setState将立即触发重新渲染,而useEffect内部的setState没有依赖数组,只会在组件挂载时触发一次重新渲染。setStateuseEffect外部或内部没有依赖关系本质上是相同的,因为它将在每次组件更新时触发重新渲染。

相关问题