Работает ли функция обновления состояния пакета React при использовании хуков? - PullRequest
Новая
       17

Работает ли функция обновления состояния пакета React при использовании хуков?

0 голосов
/ 29 октября 2018

Для компонентов класса, this.setState вызывает пакет, если внутри обработчиков событий. Но что произойдет, если состояние будет обновлено вне обработчика событий и с использованием useState hook? 

function Component() {
  const [a, setA] = useState('a');
  const [b, setB] = useState('b');

  function handleClick() {
    Promise.resolve().then(() => {
      setA('aa');
      setB('bb');
    });
  }

  return <button onClick={handleClick}>{a}-{b}</button>
}

Будет ли это визуализировать aa - bb сразу? Или это будет aa - b, а затем aa - bb?

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

В настоящее время в React v16 и более ранних версиях по умолчанию пакетируются только обновления внутри обработчиков событий React, такие как click или onChange и т. Д. Так же, как обновления состояний классов упаковываются аналогичным образом в хуках

Существует нестабильный API для принудительной пакетной обработки вне обработчиков событий в редких случаях, когда это необходимо. 

ReactDOM.unstable_batchedUpdates(() => { ... })

Планируется пакетное обновление всех обновлений состояния в будущих версиях, вероятно, на версии 17 или выше.

Теперь также, если вызовы обновления состояния из обработчика событий выполняются в асинхронных функциях или инициируются из-за асинхронного кода, они не будут пакетироваться там, где будут выполняться прямые обновления

Где без обновлений состояния кода синхронизации пакетируются, а обновления асинхронного кода не 

function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // async update from useEffect
  useEffect(() => {
    setTimeout(() => {
      setCount1(count => count + 1);
      setCount2(count => count + 2);
    }, 3000);
  }, []);

  const handleAsyncUpdate = async () => {
    await Promise.resolve("state updated");
    setCount1(count => count + 2);
    setCount2(count => count + 1);
  };

  const handleSyncUpdate = () => {
    setCount1(count => count + 2);
    setCount2(count => count + 1);
  };

  console.log("render", count1, count2);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button type="button" onClick={handleAsyncUpdate}>
        Click for async update
      </button>
      <button type="button" onClick={handleSyncUpdate}>
        Click for sync update
      </button>
    </div>
  );
}

https://codesandbox.io/s/739rqyyqmq

0 голосов
/ 29 октября 2018

TL; DR - если изменения состояния инициируются асинхронно (например, в обещании), они не будут пакетироваться; если они запускаются напрямую, они будут группироваться.

Я установил песочницу, чтобы попробовать это: https://codesandbox.io/s/402pn5l989

import React, { Fragment, useState } from 'react';
import ReactDOM from 'react-dom';

import './styles.css';

function Component() {
  const [a, setA] = useState('a');
  const [b, setB] = useState('b');
  console.log('a', a);
  console.log('b', b);

  function handleClickWithPromise() {
    Promise.resolve().then(() => {
      setA('aa');
      setB('bb');
    });
  }

  function handleClickWithoutPromise() {
    setA('aa');
    setB('bb');
  }

  return (
    <Fragment>
    <button onClick={handleClickWithPromise}>
      {a}-{b} with promise
    </button>
    <button onClick={handleClickWithoutPromise}>
      {a}-{b} without promise
    </button>
      </Fragment>
  );
}

function App() {
  return <Component />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Я сделал две кнопки, одна из которых вызывает изменения состояния, обернутые в обещание, как в примере с вашим кодом, а другая вызывает изменение состояния напрямую.

Если вы посмотрите на консоль, когда вы нажмете кнопку «с обещанием», она сначала покажет a aa и b b, затем a aa и b bb.

Таким образом, ответ - нет, в данном случае он не будет визуализироваться aa - bb сразу, каждое изменение состояния запускает новый рендеринг, пакетирование не выполняется.

Однако, когда вы нажмете кнопку «без обещания», консоль сразу покажет a aa и b bb.

Таким образом, в этом случае React пакетно изменяет состояние и выполняет один рендеринг для обоих вместе.

...