可以在功能组件中声明没有 useState 的变量吗？反应钩子答案

【问题标题】：Is it okay to declare variable without useState in functional components ? React Hooks可以在功能组件中声明没有 useState 的变量吗？反应钩子
【发布时间】：2022-10-04 15:55:55
【问题描述】：

我很想知道哪一个表现更好。其中两个示例在没有警告的情况下正确运行，但是在没有 useState 的情况下在 react 中声明可变变量是否可以接受？（使用 React 查询获取数据的示例）

例 1：

let flexibleName = ""

const { data, status } = useQuery("users", fetchUsers)

if(data) flexibleName = "TEST DATA"

return <div>{flexibleName}</div>

例 2：

const [flexibleName, setFlexibleName] = useState("")

const { data, status } = useQuery("users", fetchUsers)

useEffect(()=>{
  if(!data) return
  setFlexibleName("TEST DATA")
},[data])

return <div>{flexibleName}</div>

【问题讨论】：

这会起作用，蚂蚁在性能的情况下，有propablo不是一个大问题。但是您的变量不会通过重新渲染被记住，并且您在用户交互中丢失了存储在其中的所有数据，如果您更改它，它将不会在 html 中看到，因为它不会导致重新渲染。
在你的ex2中，你设置错了，重新渲染后也会丢失，因为你没有打电话给setFlexibleName("TEST DATA")

标签： reactjs react-hooks

【解决方案1】：

在没有反应的情况下声明可变变量是否可以接受 useState?

是的，这样做是可以的。 flexibleName 似乎是派生状态（源自data)，因此不属于 React 状态。使用第一个示例。
const { data, status } = useQuery("users", fetchUsers);

const flexibleName = data ? "TEST DATA" : "";

return <div>{flexibleName}</div>;
如果需要，可以使用 useMemo 钩子记住 flexibleName 值。
const { data, status } = useQuery("users", fetchUsers);

const flexibleName = useMemo(() => {
  return data ? "TEST DATA" : "";
}, [data]);

return <div>{flexibleName}</div>;
有关派生状态的更多详细信息，请参阅Identify the Minimal (but complete) Representation of UI State。

针对每条数据提出三个问题：

它是通过 props 从父级传入的吗？如果是这样，它可能不是状态。

它会随着时间的推移保持不变吗？如果是这样，它可能不是状态。

你能计算一下吗基于任何其他状态或道具在你的组件中？如果是这样，它不是状态。
请注意，重点是我的。

计算派生状态也避免了不必要的重新渲染，只是为了更新某些状态以进行显示。或者另一种思考方式是useMemo 钩子就像结合useState 和useEffect 钩子来更新和记忆一个值而不触发额外的重新渲染。

【讨论】：

【解决方案2】：

在这种情况下，实际上最好不要使用状态。

正如 React 团队的 article 中所解释的，当修改 flexibleName 变量时，使用状态将导致组件不必要的重新渲染。
引用documentation：

如果您可以在渲染期间从组件的 props 或其现有状态变量中计算出某些信息，则不应将该信息放入该组件的状态中。

此外，在您的示例中，setFlexibleName 是一个函数，您应该像 setFlexibleName("TEST DATA") 一样调用它

【讨论】：