让我们深入了解 React 中的 useState 和 useRef Hooks

Photo by 沙哈达特·拉赫曼 on 不飞溅

如果我问你什么是钩子，那么你会说钩子是类的替代品，可以让你在不编写类的情况下使用状态和其他反应特性。这是绝对正确的，你不需要把它复杂化，就像实体一样越来越可怕。

让我们了解 useState 和 useRef 钩子

什么是使用状态？

通过 useState 钩子，我们可以在我们的功能组件中添加一个状态。使用状态是 一个函数，一次只接受一个参数，即初始状态，它返回两个值：当前状态和状态案例 .

句法

 const [state, setState] = useState(initial)

您需要从 react 导入 useState 才能使用 useState 功能

 从“反应”导入 { useState }

让我们通过例子来理解它

• 创建一个名为 Food 的状态并将该状态的初始值设置为“None”

  const [食物，setFood] = useState('none')

• 让我们创建一个按钮来改变我们食物状态的状态

  面条 莫莫斯 阿鲁帕拉塔

• 让我们将功能添加到我们的按钮

  点击 ={()=> setFood('面条')}

当我们单击按钮时，它会将状态从初始状态（即无）更改为当前状态，即 Noodles

• 将这些功能也添加到其他按钮

  点击 ={()=> setFood('Momos')} 点击 ={()=> setFood('Alu Paratha')}

• 按钮应该是这样的

  <button 点击 ={()=> setFood('面条')}>面条 <button 点击 ={()=> setFood('Momos')}>Momos <button 点击 ={()=> setFood('Alu Paratha')}>Alu Paratha

完整代码为您提供方便

_进口_ {使用状态} _从_ “反应” 常量应用 = () => { const [食物，setFood] = useState('none') _返回_ ( <div> <h1> 我最喜欢的食物!!!!!!!1 </h1> <p>我最喜欢的食物是{食物}</p> <button _点击_ ={()=> setFood('面条')}>面条 <button _点击_ ={()=> setFood('Momos')}>Momos <button _点击_ ={()=> setFood('Alu Paratha')}>Alu Paratha </div> ) } _出口_ _默认_ 应用程序

输出

Output

通过足够的练习，您的 useState 概念也会将其状态从“Pain in aa*s”更改为“Piece of Cake”。尝试制作适合初学者的项目，以了解状态并在项目中实现您的逻辑。

什么是 useRef？

useRef 是一个内置的反应钩子，它接受一个参数作为初始值并返回一个引用或 ref。引用是具有称为 current 的特殊属性的对象。

参考电流 访问参考值，并且 reference.current = newValue 更新参考值。很简单。

句法

 常量 refContainer = useRef(initialValue);

让我们通过例子来理解 useRef

• 让我们创建一个名为destroyed的State，并给它一个初始值false

  const [销毁，setDestroyed] = useState(false)

• 创建一个条件，如果destroyed 为true，则返回null，否则返回我们的JSX 元素。

  返回销毁？无效的 ： （
  ..//
  )

• 让我们创建一个按钮来开始倒计时以删除我们组件中的所有元素

  <button 类型 ="按钮" 点击 ={开始}> 开始自毁序列

• 让我们创建一个按钮来停止倒计时以停止启动功能

  <button 类型 ="按钮" 点击 ={取消}> 取消自毁序列

• 让我们给 start 和 cancel 方法一个意义

• 创建一个名为 timeoutRef 的引用

  常量 timeoutRef = useRef(0)

• 添加取消功能

  常量取消 = () => { window.clearTimeout(timeoutRef.current) timeoutRef.current = 未定义 }

cancel 函数将清除我们在 start 函数中设置的超时并将当前 timeoutRef 设置为 undefined

• 添加功能以启动

  常量开始 = () => { timeoutRef.current = window.setTimeout(() => { setDestroyed(真) }, 3000) }

start 函数将销毁状态设置为 true，倒计时将在 3 秒后开始。

完整代码为您提供方便

_进口_ { 使用引用，使用状态 } _从_ “反应” 常量应用 = () => { const [销毁，setDestroyed] = useState(false) 常量 timeoutRef = useRef(0) 常量取消 = () => { window.clearTimeout(timeoutRef.current) timeoutRef.current = 未定义 console.log('倒计时停止') } 常量开始 = () => { timeoutRef.current = window.setTimeout(() => { setDestroyed(真) }, 3000) console.log('倒计时开始') } _返回_ 毁了？无效的 ： （ <> <button _类型_ ="按钮" _点击_ ={开始}> 开始自毁序列 </button> <button _类型_ ="按钮" _点击_ ={取消}> 取消自毁序列 </button> <p>此消息将在 3 秒内自行销毁</p> </> ) } _出口_ _默认_ 应用程序

输出

Output

到现在为止，你应该对 useState 和 useRef 钩子有 80% 的工作知识，并且通过足够的练习，它们将成为你自己的亲戚。

如果您想了解什么是道具以及它们是如何工作的，请参考我的 另一个故事 几天前发布。

下一篇见。再见。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37384/15501802