35、React中Refs和Portals的使用

React中Refs和Portals的使用

1. Refs与组件生命周期

在React中，Refs直到组件的 render 方法被调用后才会被赋值。如果使用 createRef 方法，在组件渲染内容之前， current 属性不会被赋值。同样，回调Refs在组件渲染完成之前也不会调用其方法。

Refs的赋值在组件生命周期中看似较晚，这是因为Refs用于访问DOM元素，而这些元素直到渲染阶段才会被创建。也就是说，在 render 方法被调用之前，React还未创建Refs所引用的元素。与Ref关联的元素只能在 componentDidMount 和 componentDidUpdate 生命周期方法中访问，因为这些方法在渲染完成且DOM已填充或更新后才会执行。

使用Refs会带来一个问题：当React替换DOM中组件渲染的元素时，组件不能依赖状态特性来保留其上下文。虽然React会尽量减少DOM的更改，但在应用的整个生命周期中，不能保证始终使用同一个元素。例如，更改组件渲染的顶级元素会导致React替换其在DOM中的元素。

以下是一个示例代码，展示了如何在 Editor 组件中使用Refs：

import React, { Component } from "react";
import { ValidationDisplay } from "./Validation