V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hxse
V2EX  ›  React

为什么我的 useState 会无限循环

  •  
  •   hxse · 2022-01-02 00:01:13 +08:00 · 1572 次点击
    这是一个创建于 834 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先用 npx create-react-app my-app 创建了一个 react app
    然后把 ./src/App.js 改成

    import React, { useState } from "react";
    
    function App() {
      const [count, setCount] = useState(0);
      setCount(0);
      return <div>{count}</div>;
    }
    
    export default App;
    
    

    这个代码,count 的初始值是 0, setCount 的值也是 0, 按理说0===0的值是 true, 这个 setCount 不应该触发渲染才对啊, 结果发现它无限循环了, 报错: Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    百思不得其解

    hlwjia
        1
    hlwjia  
       2022-01-02 01:00:50 +08:00
    virtual dom 的渲染是你每次触发 setState 都会发生的;只是因为什么都没有变,所以 native dom 就没有重新渲染。

    可以看看 PureComponent 或者 memo 是可以解决这个问题;只是你这个写法根本就不应该在实际代码中出现。
    yyfearth
        2
    yyfearth  
       2022-01-02 03:07:12 +08:00 via iPhone
    很简单 因为 setState 比并不会判断值是否变化
    只要 setState 就会重新渲染 并且再调用 setState 导致死循环

    想要判断值变化来避免死循环 要在 setState 我们套一个 useEffect
    dany813
        3
    dany813  
       2022-01-02 16:14:18 +08:00
    setCount 每次更新,组件都会渲染,然后渲染后又更新,死循环了。。。
    Posuker
        4
    Posuker  
       2022-01-10 13:28:34 +08:00
    0 === 0 是没错,但是 setCount 并不是设置 count 值,他是修改了整个 state 。
    简单理解的话,setCount 是,setState({ ...state, count: newCount}),整个 state 产生了变化,然后触发更新……
    触发更新就会重新渲染视图,然后触发 setCount ,无限循环。。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3026 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:50 · PVG 22:50 · LAX 07:50 · JFK 10:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.