```
**｜-------end---------｜**
#### Ref 的处理特性
接下来看一下 ref 的一些特性，首先来看一下，上述没有提及的一个问题，React 被 ref 标记的 fiber，那么每一次 fiber 更新都会调用 **commitDetachRef** 和 **commitAttachRef** 更新 Ref 吗 ？
**答案是否定的，只有在 ref 更新的时候，才会调用如上方法更新 ref ，究其原因还要从如上两个方法的执行时期说起**
**更新 ref**
在 commit 阶段 commitDetachRef 和 commitAttachRef 是在什么条件下被执行的呢 ？ 来一起看一下：
**`commitDetachRef` 调用时机**
> react-reconciler/src/ReactFiberWorkLoop.js
```js
function commitMutationEffects(){
if (effectTag & Ref) {
const current = nextEffect.alternate;
if (current !== null) {
commitDetachRef(current);
}
}
}
```
**`commitAttachRef` 调用时机**
```js
function commitLayoutEffects(){
if (effectTag & Ref) {
commitAttachRef(nextEffect);
}
}
```
* 从上可以清晰的看到只有含有 `Ref` tag 的时候，才会执行更新 ref，那么是每一次更新都会打 `Ref` tag 吗？ 跟着我的思路往下看，什么时候标记的 Ref 。
> react-reconciler/src/ReactFiberBeginWork.js
```js
function markRef(current: Fiber | null, workInProgress: Fiber) {
const ref = workInProgress.ref;
if (
(current === null && ref !== null) || // 初始化的时候
(current !== null && current.ref !== ref) // ref 指向发生改变
) {
workInProgress.effectTag |= Ref;
}
}
```
首先 `markRef` 方法执行在两种情况下：
* 第一种就是类组件的更新过程中。
* 第二种就是更新 `HostComponent` 的时候，什么是 HostComponent 就不必多说了，比如 `
` 等元素。
`markRef` 会在以下两种情况下给 effectTag 标记 Ref，只有标记了 Ref tag 才会有后续的 `commitAttachRef` 和 `commitDetachRef` 流程。（ current 为当前调和的 fiber 节点 ）
* 第一种 `current === null && ref !== null`：就是在 fiber 初始化的时候，第一次 ref 处理的时候，是一定要标记 Ref 的。
* 第二种 `current !== null && current.ref !== ref`：就是 fiber 更新的时候，但是 ref 对象的指向变了。
只有在 Ref tag 存在的时候才会更新 ref ，那么回到最初的 **DemoRef** 上来，为什么每一次按钮，都会打印 ref ，那么也就是 ref 的回调函数执行了，ref 更新了。
```js
{
this.node = node
console.log('此时的参数是什么：', this.node )
}} >ref元素节点
```
* 如上很简单，每一次更新的时候，都给 ref 赋值了新的函数，那么 `markRef` 中就会判断成 `current.ref !== ref`，所以就会重新打 Ref 标签，那么在 commit 阶段，就会更新 ref 执行 ref 回调函数了。
如果给 **DemoRef** 做如下修改：
```js
export default class Index extends React.Component{
state={ num:0 }
node = null
getDom= (node)=>{
this.node = node
console.log('此时的参数是什么：', this.node )
}
render(){
return
ref元素节点
}
}
```
* 这个时候，在点击按钮更新的时候，由于此时 ref 指向相同的函数 `getDom` ，所以就不会打 Ref 标签，不会更新 ref 逻辑，直观上的体现就是 `getDom` 函数不会再执行。
**卸载 ref**
上述讲了 ref 更新阶段的特点，接下来分析一下当组件或者元素卸载的时候，ref 的处理逻辑是怎么样的。
> react-reconciler/src/ReactFiberCommitWork.js
```js
this.state.isShow &&
this.node = node} >元素节点
```
* 如上，在一次更新的时候，改变 `isShow` 属性，使之由 `true` 变成了 `false`， 那么 `div` 元素会被卸载，那么 ref 会怎么处理呢？
被卸载的 fiber 会被打成 `Deletion` effect tag ，然后在 commit 阶段会进行 commitDeletion 流程。对于有 ref 标记的 ClassComponent （类组件） 和 HostComponent （元素），会统一走 `safelyDetachRef` 流程，这个方法就是用来卸载 ref。
> react-reconciler/src/ReactFiberCommitWork.js
```js
function safelyDetachRef(current) {
const ref = current.ref;
if (ref !== null) {
if (typeof ref === 'function') { // 函数式 ｜ 字符串
ref(null)
} else {
ref.current = null; // ref 对象
}
}
}
```
* 对于字符串 `ref="dom"` 和函数类型 `ref={(node)=> this.node = node }` 的 ref，会执行传入 null 置空 ref 。
* 对于 ref 对象类型，会清空 ref 对象上的 current 属性。
借此完成卸载 ref 流程。
#### 逻辑流程图
### 五 总结
这节学习了如下知识。
* 明白了 Ref 对象的二种创建方式，以及三种获取 ref 方法。
* 详细介绍 forwardRef 用法。
* ref 组件通信-函数组件和类组件两种方式。
* useRef 缓存数据。
* Ref 的处理逻辑原理
下一节，我们一起走进 React context 的世界。