Эти два эквивалента? Если нет, то какой лучше и почему?

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(count + 1)}>+</button>
const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
21
Laurie Poulter 1 Июн 2019 в 10:45

2 ответа

Лучший ответ

Если следующее значение состояния зависит от предыдущего значения, как в этом примере кнопки увеличения, лучше использовать функциональная версия setState (setCount(prevCount => prevCount + 1)).

Вы можете столкнуться с ошибками, если передаете функцию установки в функцию обратного вызова, например, обработчик ответа onChange или HTTP-запроса.

В качестве явного примера на странице ниже , если вы нажмете «Счетчик с задержкой (базовый)», а затем нажмите «Счетчик с задержкой», счет будет увеличиваться только на 1. Однако, если вы нажмете «Счетчик с задержкой (функциональный)», а затем «Счетчик с немедленным выполнением», счетчик в конечном итоге увеличится на 2.

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

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setTimeout(() => setCount(count + 1), 2000)}>
        Delayed Counter (basic)
      </button>
      <button onClick={() => setTimeout(() => setCount(x => x + 1), 2000)}>
        Delayed Counter (functional)
      </button>
      <button onClick={() => setCount(count + 1)}>Immediate Counter</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);
2
Edward D'Souza 30 Янв 2020 в 16:54

Оба примера верны и работают одинаково. Однако я подозреваю, что primitive работает так же, как function, потому что JavaScript поддерживает first-class/higher order functions. Это означает, что функции обрабатываются как любые другие переменные, что позволяет передавать их в качестве аргументов, назначать их переменным и возвращать их в любой другой функции.

0
Marios Simou 1 Июн 2019 в 08:06