функция без () в useState (реагирующая ловушка)

Question

Когда я передаю параметр функции в useState () следующим образом:

const [testA, setTestA] = useState(returnTestA());  // run every rendering
const [testB, setTestB] = useState(returnTestB); // run only mount

• функция с () запускается при каждом рендеринге
• , но функция без () запускается только первой рендеринг (монтирование)

Это весь мой код: (info.js)

import React, { useState } from "react";

let count = 0;

const returnTestA = () => {
  count++;
  console.log("test A: " + count);
  return "test";
};

const returnTestB = () => {
  count++;
  console.log("test B: " + count);
  return "test";
};

const Info = () => {
  const [name, setName] = useState("");
  const [testA, setTestA] = useState(returnTestA());  // run every rendering
  const [testB, setTestB] = useState(returnTestB); // run only mount

  const onChangeName = e => {
    setName(e.target.value);
  };

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChangeName} />
      </div>
      <div>
        <div>
          <b>Name:</b> {name}
        </div>
      </div>
    </div>
  );
};

export default Info;

результат:

1. просто npm начало:

2. введите что-то на входе:

Почему это случилось ?? А что такое лучшая практика?

Answer 1

См. Официальное объяснение здесь: https://reactjs.org/docs/hooks-reference.html#lazy -initial-state

const [testB, setTestB] = useState(returnTestB);

Аналогично:

const [testB, setTestB] = useState(() => returnTestB());

Вы передаете функцию метод useState() в качестве параметра, эта функция будет запускаться только один раз при монтировании.

Но для

const [testA, setTestA] = useState(returnTestA());

Вы передаете вычисляемый объект в useState() в качестве параметра, этот объект будет вычисляться каждый раз при рендеринге.

Answer 2

returnTestA() вызывает функцию.

returnTestA возвращает ее значение.

let a = function() {
    return 'test';
};

, поэтому, когда вы напишите a() она вызывает функцию и возвращает ее значение, в то время как a просто означает 'test' .

Answer 3

это не о реакции, это о JavaScript

вот пример

test.js
const testFunc = () => console.log('1');

, если мы определим testFun c и нагрузочный тест. js, который не средний триггер testFunc

также мы можем передать testFunc в качестве параметра, который называется гражданин первого класса (объект)

Теперь давайте погрузимся в ваш код

 const [testA, setTestA] = useState(returnTestA());  // run every rendering
  const [testB, setTestB] = useState(returnTestB)

1. useState(returnTestA()).
returnTestA() означает, что триггер (вызов) returnTestA и передача результата из returnTeatA функции в useState

проходное значение

2. useState(useState(returnTestB)).
returnTestB среднее значение - передача функции без триггера в useState.
возможно useState вызовите это

передать функцию

Вы хотите знать больше подробнее о гражданине первого класса (объект)
эта ссылка должна вам помочь о Что такое объекты "первого класса"?