useState 中没有 () 的函数（反应钩子）

Question

当我像这样将函数参数传递给 useState() 时：

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

• 每次渲染都会运行带有 () 的函数
• 但是没有()的函数只运行第一次渲染(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()方法，这个函数在mount时只会运行一次。

但是对于

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 函数的结果传递给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'。