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

它与反应无关 关于JavaScript

这是一些例子

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

如果我们定义testFunc并加载test.js 这并不意味着触发testFunc

我们也可以传递testFunc作为参数 它叫做头等公民（对象）

现在，让我们开始研究您的代码

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

1. useState(returnTestA())。
returnTestA()的意思是触发（调用）returnTestA并将returnTeatA函数的 result 传递到useState

通过值

2. useState(useState(returnTestB))。
returnTestB的意思是将函数没有触发传递到useState中。
也许useState称之为

通过功能

您想进一步了解头等公民（对象）
此链接必须帮助您了解What are "first class" objects?

Answer 3

returnTestA() 调用该函数。

returnTestA 返回其值。

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

因此，当您编写a()时，它将调用该函数并返回其值，同时 a仅表示'test'。