Несоответствие в 'useState ()', работающем на React.JS - PullRequest
Новая
       2

Несоответствие в 'useState ()', работающем на React.JS

0 голосов
/ 10 мая 2019

Я новичок в React Hooks, и я столкнулся с проблемой, которую едва понимаю.

В коде 1, если я правильно понимаю, начальное значение счетчика, переданное в useState(), совпадает со значением, переданным в 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 должна выполняться один раз, а не более одного раза. Но по какой-то причине он выполняет повторную визуализацию еще раз (когда состояние счетчика равно 2 и значение setCount (2)) и не более одного раза, что не должно происходить вообще, поскольку состояние счетчика равно 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>
      );
    }

Я не уверен, верно ли мое понимание о useState() на React Hooks. Или если кто-то, кто мог бы объяснить, как React Hooks использует useState в деталях, был бы очень признателен.

P.S Я использую версию реагирующих крючков: 16,8.6

1 Ответ

0 голосов
/ 10 мая 2019

Реализация ловушки useState такова, что, когда средство обновления состояния вызывается, дополнительное время, когда обновление выполняется с тем же значением.Это может быть связано с тем, что React использует архитектуру Fibre, у которой есть время истечения, что полезно при определении того, в какой момент 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"/>
...