关于react.js:react-hooks本质探索-useRef源码详解

先要晓得几点前提要点

1. 在functional component中，每一次props的变动、执行setState操作都会导致组件办法从新执行。
2. 基于1，组件办法执行后，所有的间接定义的const、let变量都会从新定义。
3. 所以对于不须要变动的常量，个别用useRef封装起来。

常见的应用办法：
const a = useRef(initalValue);
在执行组件办法的时候，a不会被从新赋值。那么useRef在这里实质上干了什么呢？

useRef实质上是ReactCurrentDispatcher.current上的一个办法，这个办法接管一个初始值，返回一个对象，这个对象中只有一个current属性。

在执行组件办法的时候，这个current的值不会被重置，也就是说，每一次执行组件办法，用到的都是同一个值。

当然这里有一个问题，返回的这个对象为什么不会被重置？

应该是react用了一种时序的保留办法，在初始化时，将值记录在一个对象中；反复执行组件办法的时候，再从这个对象中取出来赋值到了a上。

上面看源码片段，这是初始化ref的源码：

useRef: function (initialValue) {
  currentHookNameInDev = 'useRef';
  mountHookTypesDev();
  return mountRef(initialValue);
},

function mountRef(initialValue) {
  var hook = mountWorkInProgressHook();
  var ref = {
    current: initialValue
  };

  {
    Object.seal(ref);
  }

  hook.memoizedState = ref;
  return ref;
}

附：Object.seal只是让ref里的key无奈删除，value能够扭转。

上面是更新ref（第二次当前执行组件办法）的代码片段：

useRef: function (initialValue) {
  currentHookNameInDev = 'useRef';
  updateHookTypesDev();
  return updateRef(); // 能够留神到这里是update
},

这里mountHookTypesDev和updateHookTypesDev不重要。次要逻辑是mountRef和updateRef办法。
能够看到，updateRef其实就是返回了hook里记录的memoizedState
至于mountWorkInProgressHook和updateWorkInProgressHook，是两个比较复杂的办法。波及到hook的实质，实际上useState也是用这个形式存储值的。

详见另一篇文章：react hooks源码外围：workInProgressHook函数