Question

我是React Hooks的初学者，遇到了一个我几乎不了解的问题。

在代码1中，如果我理解正确，则useState()中传递的count的初始值与按钮按下时setCount()中传递的值相同，并且Counter组件的子组件不应为重新渲染。

代码1：


    function Counter() {
      const [count, setCount] = useState(1);
      console.log("in", count)
      return (
        <div>
          <h1>{count}</h1>
          <button onClick={() => {
            console.log("click")
            setCount(1) 
          }}>click</button>
        </div>
      );
    }

但是在代码2中，如果传递给setCount()的值不同（并且count的初始值为1），则必须重新渲染Counter组件的子组件一次，而不是不止一次。但是由于某种原因，它也会重新渲染一次（当count状态为2且值为setCount（2）时），并且不超过一次，这完全不应该发生，因为count状态为2且setCount（2）表示状态不变。

代码2：


    function Counter() {
      const [count, setCount] = useState(1);
      console.log("in", count)
      return (
        <div>
          <h1>{count}</h1>
          <button onClick={() => {
            console.log("click")
            setCount(2) 
          }}>click</button>
        </div>
      );
    }

我不确定我对React Hooks上的useState()的理解是否正确。或者，如果有人可以澄清React Hooks useState的详细工作原理，将不胜感激。

P.S 我正在使用的react hooks版本是： 16.8.6

Answer 1

useState挂钩的实现是这样的：当使用相同的值执行更新时，调用状态更新程序需要额外的时间。这可能是由于React使用具有到期时间的Fiber体系结构这一事实，该时间对于确定React将在什么时间提交更新以进行初始更改（无论它先前是否更新过该值）和触发重新呈现都非常有用。从那时起开始进行批处理。但是，在第一种情况下，最初提交的值与您传递用于更新的值相同，因此不会触发重新渲染

function Counter() {
      const [count, setCount] = React.useState(1);
      console.log("in", count)
      return (
        <div>
          <h1>{count}</h1>
          <button onClick={() => {
            setCount(2) 
          }}>click</button>
        </div>
      );
    }
    ReactDOM.render(<Counter />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

在React.JS上使用的“ useState（）”不一致

1 个答案: