React Hooks - использование useState против просто переменных

Question

React Hooks дают нам опцию useState, и я всегда вижу сравнения Hooks и Class-State. Но как насчет хуков и некоторых обычных переменных?

Например,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

Я не использовал хуки, и это даст мне те же результаты, что и:

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

Так в чем же разница? Использование крючков в этом случае еще сложнее ... Так зачем же его использовать?

Answer 1

Причина в том, что если вы useState, то он снова отображает представление. Переменные сами по себе изменяют только биты в памяти, и состояние вашего приложения может быть не синхронизировано с представлением.

Сравните эти примеры:

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

В обоих случаях a изменяется нанажмите, но только когда вы используете useState, представление правильно показывает текущее значение a.

Answer 2

Обновление состояния заставит компонент повторно выполнить рендеринг, но локальные значения - нет.

В вашем случае вы отобразили это значение в своем компоненте. Это означает, что при изменении значения компонент должен быть повторно обработан для отображения обновленного значения.

Поэтому будет лучше использовать useState, чем обычное локальное значение.

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

Answer 3

Локальные переменные будут сбрасываться при каждом рендеринге после мутации, тогда как состояние будет обновляться:

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

Answer 4

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

эквивалентно

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

Что useState возвращает две вещи:

1. новая переменная состояния
2. установщик для этой переменной

если вы позвоните setA(1), вы позвоните this.setState({ a: 1 }) и запустите повторную визуализацию.

Answer 5

Ваш первый пример работает только потому, что данные практически никогда не меняются. Точка входа в использование setState состоит в том, чтобы перерисовать весь ваш компонент, когда состояние изменится. Поэтому, если в вашем примере потребовалось какое-то изменение состояния или управление, вы быстро поймете, что значения изменений будут необходимы, и для обновления представления значением переменной вам потребуется состояние и повторное отображение.