javascript - useState 中没有 () 的函数( react 钩子(Hook))

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 start:

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()，该对象将在每次渲染时被计算。