上图中，markRef 表示的就是标记 ref，相关代码如下：
```js
function markRef(current, workInProgress){
const ref = workInProgress.ref;
if((current === null && ref !== null) || (current !== null && current.ref !== ref)){
// 标记 Reg tag
workInProgress.flags != Ref;
}
}
```
有两种情况会标记 ref：
- mount 阶段并且 ref props 不为空
- update 阶段并且 ref props 发生了变化
标记完 ref 之后，来到了 commit 阶段，会在 mutation 子阶段执行 ref 的删除操作，删除旧的 ref：
```js
function commitMutationOnEffectOnFiber(finishedWork, root){
// ...
if(flags & Ref){
const current = finishedWork.alternate;
if(current !== null){
// 移除旧的 ref
commitDetachRef(current);
}
}
// ...
}
```
上面的代码中，commitDetachRef 方法要做的事情就是移除旧的 ref，相关代码如下：
```js
function commitDetachRef(current){
const currentRef = current.ref;
if(currentRef !== null){
if(typeof currentRef === 'function'){
// 函数类型 ref，执行并传入 null 作为参数
currentRef(null);
} else {
// { current: T } 类型的 ref，重置 current 指向
currentRef.current = null;
}
}
}
```
删除完成后，会在 Layout 子阶段重新赋值新的 ref，相关代码如下：
```js
function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committedLanes){
// 省略代码
if(finishedWork.flags & Ref){
commitAttachRef(finishedWork);
}
}
```
对应的方法 commitAttachRef 就是用来重新赋值新 ref 的，相关代码如下：
```js
function commitAttachRef(finishedWork){
const ref = finishedWork.ref;
if(ref !== null){
const instance = finishedWork.stateNode;
let instanceToUse;
switch(finishedWork.tag){
case HostComponent:
// HostComponent 需要获取对应的 DOM 元素
instanceToUse = getPublicInstance(instance);
break;
default:
// ClassComponent 使用 FiberNode.stateNode 保存实例
instanceToUse = instance;
}
if(typeof ref === 'function'){
// 函数类型，执行函数并将实例传入
let retVal;
retVal = ref(instanceToUse);
} else {
// { current: T } 类型则更新 current 指向
ref.current = instanceToUse;
}
}
}
```
## ref 的失控
当我们使用 ref 保存对 DOM 的引用时，那么就有可能会造成 ref 的失控。
所谓 ref 的失控，开发者通过 ref 操作了 DOM，但是这一行为本来应该是由 React 接管的，两者产生了冲突，这种冲突我们就称之为 ref 的失控。
考虑下面这一段代码：
```js
function App(){
const inputRef = useRef(null);
useEffect(()=>{
// 操作1
inputRef.current.focus();
// 操作2
inputRef.current.getBoundingClientRect();
// 操作3
inputRef.current.style.width = '500px';
}, []);
return ;
}
```
在上面的三个操作中，第三个操作是不推荐的。
React 作为一个视图层框架，接管了大部分和视图相关的操作，这样开发者可以专注于业务上面的开发逻辑。
上面的三个操作中，前面两个并没有被 React 接管，所以当产生这样的操作时，可以百分百确定是来自于开发者的操作。但是在操作三中，并不能确定该操作究竟是 React 的行为还是开发者的行为，甚至两者会产生冲突。
例如我们再聚一个例子：
```js
function App(){
const [isShow, setShow] = useState(true);
const ref = useRef(null);
return (
{isShow &&
);
}
```
上面的代码就是一个典型的 ref 失控的案例。第一个按钮通过 isShow 来控制 p 是否显示，这是 React 的行为，第二个按钮通过 ref 直接拿到了 p 的 DOM 对象，然后进行显隐操作，两者会产生冲突，上面的两个按钮，先点击任意一个，然后再点击另外一个就会报错。
## ref 失控的防治
ref 失控的本质：由于开发者通过 ref 操作了 DOM，而这一行为本来应该是由 React 来进行接管的，两者之间发生了冲突而导致的。
因此我们可以从下面两个方面来进行防治：
- 防：控制 ref 失控的影响范围，使 ref 的失控更加容易被定位
- 治：从 ref 引用的数据结构入手，尽力避免可能引起的失控操作
**防**
在上一章我们介绍过高阶组件，在高阶组件内部是无法将 ref 直接指向 DOM 的，我们需要进行 ref 的转发。可以通过 forwardRef API 进行一个 ref 的转发，将 ref 转发的这个操作，实际上就将 ref 失控的范围控制在了单个组件内，不会出现跨越组件的 ref 失控。
因为是手动的进行 ref 的转发，所以发生 ref 失控的时候，能够更加容易的进行错误的定位
**治**
之前我们介绍过 useImperativeHandle 这个 Hook，它可以在使用 ref 时向父组件传递自定义的引用值：
```js
const MyInput = forwardRef((props, ref) => {
const realInputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus(){
realInputRef.current.focus();
}
}));
return
});
```
在上面的代码中，我们通过 useImperativeHandle 来定制 ref 所引用的内容，那么在外部开发者通过 ref 只能拿到：
```js
{
focus(){
realInputRef.current.focus();
}
}
```
## 真题解答
> 题目：useRef 是干什么的？ref 的工作流程是怎样的？什么叫做 ref 的失控？
>
> 参考答案：
>
> useRef 的主要作用就是用来创建 ref 保存对 DOM 元素的引用。在 React 发展过程中，出现过三种 ref 相关的引用模式：
>
> - String 类型（已不推荐使用）
> - 函数类型
> - { current : T }
>
> 目前最为推荐的是在类组件中使用 createRef，函数组件中使用 useRef 来创建 Ref。
>
> 当开发者调用 useRef 来创建 ref 时，在 mount 阶段，会创建一个 hook 对象，该 hook 对象的 memoizedState 存储的是 { current: initialValue } 对象，之后向外部返回了这个对象。在 update 阶段就是从 hook 对象的 memoizedState 拿到 { current: initialValue } 对象。
>
> ref 内部的工作流程整体上可以分为两个阶段：
>
> - render 阶段：标记 Ref flag，对应的内部函数为 markRef
> - commit 阶段：根据 Ref flag，执行 ref 相关的操作，对应的相关函数有 commitDetachRef、commitAttachRef
>
> 所谓 ref 的失控，本质是由于开发者通过 ref 操作了 DOM，而这一行为本身是应该由 React 来进行接管的，所以两者之间发生了冲突导致的。
>
> ref 失控的防治主要体现在两个方面：
>
> - 防：控制 ref 失控影像的范围，使 ref 失控造成的影响更容易被定位，例如使用 forwardRef
> - 治：从 ref 引用的数据结构入手，尽力避免可能引起失控的操作，例如使用 useImperativeHandleHello
}