在功能组件中声明变量而不使用 useState 可以吗？反应钩子

Question

我很想知道哪一个表现更好。其中两个示例运行正确且没有警告，但是在 React 中声明可变变量而不使用 useState 是否可以接受？（使用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>

Answer 1

\n

在没有 \n 的情况下在 React 中声明可变变量是否可以接受useState？

\n

\n

是的，这样做没问题。flexibleName似乎是派生状态（派生自data），因此不属于 React 状态。使用第一个例子。

\n

const { data, status } = useQuery("users", fetchUsers);\n\nconst flexibleName = data ? "TEST DATA" : "";\n\nreturn <div>{flexibleName}</div>;\n

\n

如果需要，您可以flexibleName使用useMemo钩子记住该值。

\n

const { data, status } = useQuery("users", fetchUsers);\n\nconst flexibleName = useMemo(() => {\n  return data ? "TEST DATA" : "";\n}, [data]);\n\nreturn <div>{flexibleName}</div>;\n

\n

有关派生状态的更多详细信息，请参阅识别 UI 状态的最小（但完整）表示。

\n

\n

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

\n

\n
1. 它是通过 props 从父级传递的吗？如果是这样，它可能是\xe2\x80\x99t 状态。
\n
2. 随着时间的推移它会保持不变吗？如果是这样，它可能是\xe2\x80\x99t 状态。
\n
3. 您可以根据组件中的任何其他状态或道具来计算它吗？如果是，则为\xe2\x80\x99t状态。
\n

\n

\n

请注意，重点是我的。

\n

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

\n