React 中的 `ref` 对象是一个容器，其 `.current` 属性通常用来持有一个可变值，这个值通常是一个 DOM 元素的引用，但也可以用于存储任何可变的值。`ref` 的 `.current` 属性值在组件的生命周期中发生变化的情况如下：

1. **创建阶段（Mounting）**：在组件被挂载到 DOM 上时，如果 `ref` 是通过 `useRef()` Hook 创建的，或者通过 `React.createRef()` 在构造器中创建的，它的 `.current` 属性会被初始化并指向相关的 DOM 元素或组件实例。

   **例子**：当你在 JSX 中绑定了 `ref`，如 `<div ref={myRef} />`，当这个组件第一次渲染到 DOM 中时，`myRef.current` 将指向这个 `<div>` 元素。

2. **更新阶段（Updating）**：在大多数情况下，`ref.current` 的值在更新阶段是不变的。但如果 `ref` 是被动态赋予不同的元素，比如在条件渲染中，其指向的元素可能会改变。

   **例子**：如果你有条件渲染，如 `{condition ? <div ref={myRef} /> : <span ref={myRef} />}`，根据 `condition` 的值，`myRef.current` 可以在 `<div>` 和 `<span>` 之间切换。

3. **卸载阶段（Unmounting）**：当组件被卸载从 DOM 中移除时，与该组件相关联的 DOM 元素也会被销毁，此时 `ref.current` 的值会变回初始的 `null`。

   **例子**：如果你有一个 `<div ref={myRef} />`，当这个 `<div>` 被卸载时，`myRef.current` 将被设置回 `null`。

要注意的是，`ref.current` 的值的改变是在 React 的渲染流程之外的，也就是说，改变 `ref.current` 的值不会触发组件的再渲染。此外，当你直接修改 `ref.current` 的值时，它也不会触发重新渲染，因为 React 并不监控此类变更。

How do we know when a React ref.current value has changed?

1个答案

你的答案