Javascript 为什么useState触发具有相同值的呈现

发布于03月13日

据我所知和阅读官方文档，只有在值不同的情况下才会触发更新.

该设置函数允许您将状态更新为不同的值并触发重新渲染.

然而，在我测试了18.2版之后，有一种情况会触发重复呈现.

enter image description here

演示:https://playcode.io/1796380

我想知道他的能力是什么，我是否需要关注这一点

推荐答案

每次点击按钮onClick回调时都会有一个控制台日志(log)发生，另一个是无意的副作用，因此与React组件渲染到DOM没有真正的关联.将其移动到一个useEffect钩子中以查看/判断渲染行为.

import { useState, useEffect } from 'react';

export function App(props) {
  const [count, setCount] = useState(1);

  useEffect(() => {
  console.log(count)
  });

  const clickHandle = () => {
    console.log('handle');
    setCount(1000);
  }
  return (
    <div onClick={clickHandle}>click me</div>
  );
}

有关说明，请参阅传统文档中的Bailing out of a state update条:

如果将状态挂钩更新为与当前状态相同的值， Reaction将在不渲染子元素或射击效果的情况下跳出. (Reaction使用Object.is comparison algorithm.)

请注意，Reaction可能仍需要再次呈现该特定组件在跳伞之前.这不应该是一个问题，因为Reaction不会不必要地"深入"这棵树.如果你做的是昂贵的渲染时的计算，您可以用useMemo来优化它们.

基本上，如果您将与当前状态相同的值/引用的状态更新入队，它可能会触发一个额外的组件重现器，但不会超过这个值，并且不会更深入地呈现到ReactTree中.