你不需要总是在 React 中使用 useState

本文讨论了React组件中过度使用useState钩子导致的代码冗余和潜在错误,提倡使用有限状态机模式(FSM)以及利用内置的useQuery进行状态简化。通过实例分析,作者强调了在编写组件时应谨慎管理状态,以提高代码可读性和健壮性。
摘要由CSDN通过智能技术生成

在我审查的一个拉取请求中,我注意到在许多拉取请求中看到的一种模式。React 组件具有多个 UI 状态,例如 loadingerrorsuccess

作者使用了多个 useState 钩子来管理这些状态,这导致代码难以阅读且容易出错,例如:

const MyComponent = () => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)
  const [success, setSuccess] = useState(false)

  return (
    <div>
      {loading && !error && !success && <p>Loading...</p>}
      {error && !loading && !success && <p>Error occurred</p>}
      {success && !loading && !error && <p>Operation completed successfully</p>}
    </div>
  )
}

这些状态彼此不同。当 loadingtrue 时,errorsuccess 应该为 false。使用多个 useState 钩子可能会导致意外行为,例如意外 true 同时设置两个状态。

相反,请考虑使用有限状态机(FSM) 模式。FSM 只允许有限数量的状态。在上面的 UI 示例中,单个 useState 可以更稳健地管理当前状态,并且出错的风险更低,如下所示:

import { useState } from 'react'

type State = 'loading' | 'error' | 'success'

const MyComponent = () => {
  const [state, setState] = useState<State>('loading')

  const handleClick = () => {
    setState('loading')
    // Simulate an async operation
    setTimeout(() => {
      setState('success')
    }, 2000)
  }

  return (
    <div>
      {state === 'loading' && <p>Loading...</p>}
      {state === 'error' && <p>Error occurred</p>}
      {state === 'success' && <p>Operation completed successfully</p>}
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}

在某些情况下,例如使用 Tanstack 查询来获取数据时,useQuery 无需单独 useState 挂钩 来设置 loadingerrorsuccess 状态:

const MyComponent = () => {
  const { data, isLoading, error } = useQuery(...)

  if (isLoading) {
    return <p>Loading...</p>
  }

  if (error) {
    return <p>Error occurred</p>
  }

  return <p>Operation completed successfully {data}</p>
}

让我们考虑另一个名为 locked 的状态,它根据服务器发送的 403 状态代码显示用户是否已解锁该功能。通常情况下,开发人员可能会使用 useStateuseEffect 来管理该状态,这可能会增加不必要的复杂性:

const MyComponent = () => {
  const [locked, setLocked] = useState(false)
  const { data, isLoading, error } = useQuery(...)

  useEffect(() => {
    if (error && error.status === 403) {
      setLocked(true)
    }
  }, [error])

  if (locked) {
    return <p>You are locked out</p>
  }
}

更好的方法是直接从 error 中推导出锁定状态:

const MyComponent = () => {
  const { data, isLoading, error } = useQuery(...)

  if (isLoading) {
    return <p>Loading...</p>
  }

  const locked = error?.status === 403

  if (locked) {
    return <p>You are locked out</p>
  }
}

这种方法可以避免使用 useStateuseEffect 进行额外的状态管理。

在编写 React 组件时,请务必考虑是否有必要使用 useStateuseEffect。通常情况下,它们是不必要的。

  • 13
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值