createRef 和 useRef

2023-01-17 18:35:34

createRef

createRef 底层只做了一件事，就是创建了一个对象，在对象的 current 属性保存获取的 DOM 元素

export function createRef() {
  const refObject = {
    current: null
  }
  return refObject
}

useRef

由于函数组件每次更新都是一次新的开始，所有变量重新声明，所以 useRef 不能像 createRef 把 ref 对象直接暴露出去，如果这样每一次函数组件执行就会重新声明 Ref，此时 ref 就会随着函数组件执行被重置，hooks 和函数组件对应的 fiber 对象建立起关联，将 useRef 产生的 ref 对象挂到函数组件对应的 fiber 上，函数组件每次执行，只要组件不被销毁，函数组件对应的 fiber 对象一直存在，所以 ref 等信息就会被保存下来