React Hook 修改状态的时候,传的状态值没有变化,但第一次依旧重新渲染了?

发布于 2022-09-12 13:28:49 字数 788 浏览 22 评论 0

`

function Counter4() {
     const [counter, setCounter] = useState(1);
     console.log('render', counter);
     return (
            <>
                <p>{counter}</p>
                <button onClick={() => setCounter(2)}>setCounter</button>
                <button onClick={() => setCounter(counter)}>set same counter</button>
            </>
    )
}

`

image.png
首次加载时候 控制台第一次 输出 render 1
首先点击第一个按钮, counter变成了2,控制台输出 render 2

这时候点击第二个按钮,setCounter传入的值是counter,按理说我传的状态值没有变化,不会重新渲染,控制台不应该输出的,但是 依然输出了 render 2,当我继续点击的时候 就不会render了
image.png

请问这是什么原因呢,是和Object.is浅比较有关吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

骑趴 2022-09-19 13:28:49

React Hooks文件里有说到Bailing out of a state update:

Note that React may still need to render that specific component again before bailing out.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文