现在我正在将基于类的组件更改为功能组件,并且应该确定使用useRef或useState的实例。
我已经尝试使用stackoverflow问答来获得答案,这让我很想知道。
我的理解是useRef
和useState在整个应用程序中保持价值,而useState导致重新渲染,而useRef
则不是。
如果视图中有一些变化,我们需要重新渲染过程,如果是这样,我们是否应该使用return( <> ...</>)
> 中没有的useRef
创建整个变量?
通常,当您不想再次重新渲染组件但希望以某种形式呈现值以便以后使用时,会使用Ref
。通俗地说,如果您只想玩与 dom 相关的东西,例如更新宽度、高度等。
使用 ref 的常见示例:
当您想在不使用 state 的情况下专注于输入和移出输入时(因为您不想再次渲染组件(
动态更新样式(Fox ex:您创建手风琴,然后您想更新高度并在根据打开和关闭时显示过渡(如果您不想显示可以避免此示例((
如果你想创建这种类型的实用程序,那么你不需要玩
states
你只能使用ref
在 React 中,useState
和useRef
都是钩子,允许你在功能组件中管理状态。但是,它们用于不同的目的,应在不同的场景中使用。
当您需要根据状态更改更新和重新呈现组件时,应使用useState
。
另一方面,当您需要存储跨组件呈现保留的可变值或引用时,应使用useRef
。
在以下情况下使用useState
:
- 您需要根据状态更改更新 UI。
- 您需要将状态向下传递到子组件。
- 您希望存储组件本地的少量状态数据。
在以下情况下使用useRef
:
- 您需要存储一个跨组件渲染保留的可变值。
- 您需要访问 DOM 元素或子组件的当前值。
- 您希望存储大量不需要触发重新渲染的数据。
对于大多数用例,您希望通过useState
提供的状态(或作为参数获取的 props(来处理 React 组件的行为。 这就是 React 要走的路。
最终会有需要useRef
的情况,例如,出于某些特殊原因,您可能需要直接访问 DOM 元素。 但它们是例外情况。 如果您发现自己在整个应用程序中调用useRef
,那么您很可能做错了什么。