关于javascript:react-hooks核心hooktype和ReactCurrentDispatcher

这里波及整个hooks的一个入口函数：renderWithHooks
这个函数中只截取跟hookstype无关的局部：

{    if (current !== null && current.memoizedState !== null) {      // 如果是更新中，那么用HooksDispatcherOnUpdateInDEV      ReactCurrentDispatcher$1.current = HooksDispatcherOnUpdateInDEV;    } else if (hookTypesDev !== null) {      // This dispatcher handles an edge case where a component is updating,      // but no stateful hooks have been used.      // We want to match the production code behavior (which will use HooksDispatcherOnMount),      // but with the extra DEV validation to ensure hooks ordering hasn't changed.      // This dispatcher does that.            // 如果是hookTypesDev不为空，那么用HooksDispatcherOnMountWithHookTypesInDEV      ReactCurrentDispatcher$1.current = HooksDispatcherOnMountWithHookTypesInDEV;    } else {      // 默认状况：用HooksDispatcherOnMountInDEV，这也是个别的初始化的时候用的。      ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;    }  }

接下来有7个对象：
HooksDispatcherOnMountInDEV
HooksDispatcherOnMountWithHookTypesInDEV
HooksDispatcherOnUpdateInDEV
HooksDispatcherOnRerenderInDEV
InvalidNestedHooksDispatcherOnMountInDEV
InvalidNestedHooksDispatcherOnUpdateInDEV
InvalidNestedHooksDispatcherOnRerenderInDEV
这7个对象里都实现了一整套的useMemo、useCallback等，一整套的hooks。
然而构造都很类似，咱们用useState来比照每个的不同。

先看HooksDispatcherOnMountInDEV

useState: function (initialState) {    // 扭转以后的hookname为useState      currentHookNameInDev = 'useState';      // 把hookname放进一个数组hookTypesDev里      mountHookTypesDev();      // 上面两行是迭代dispatch的。等于是把以后的存到prev里，而后让以后变成InvalidNestedHooksDispatcherOnMountInDEV      var prevDispatcher = ReactCurrentDispatcher$1.current;      ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;      try {        return mountState(initialState);      } finally {        // 必然执行，将prev放到以后，因为不能再应用InvalidNestedHooksDispatcherOnMountInDEV了。        // 前面会说为什么不能再应用InvalidNestedHooksDispatcherOnMountInDEV        ReactCurrentDispatcher$1.current = prevDispatcher;      }    },

附：
mountHookTypesDev办法，很简略，就是把以后的hookname放进一个数组hookTypesDev里。

function mountHookTypesDev() {  {    var hookName = currentHookNameInDev;    if (hookTypesDev === null) {      hookTypesDev = [hookName];    } else {      hookTypesDev.push(hookName);    }  }}

再来看HooksDispatcherOnMountWithHookTypesInDEV
和HooksDispatcherOnMountInDEV只有一句的区别

useState: function (initialState) {      currentHookNameInDev = 'useState';      // 和HooksDispatcherOnMountInDEV只有这一行不同，这里的更新。其余齐全一样。      updateHookTypesDev();      var prevDispatcher = ReactCurrentDispatcher$1.current;      // 这里和HooksDispatcherOnMountInDEV一样。      ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;      try {        return mountState(initialState);      } finally {        ReactCurrentDispatcher$1.current = prevDispatcher;      }    },

再看HooksDispatcherOnUpdateInDEV
和HooksDispatcherOnMountWithHookTypesInDEV只有一句的区别

useState: function (initialState) {      currentHookNameInDev = 'useState';      updateHookTypesDev();      var prevDispatcher = ReactCurrentDispatcher$1.current;      // 这里也是有区别的。但不太重要      ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;      try {        // 和HooksDispatcherOnMountWithHookTypesInDEV只有这一句的区别        return updateState(initialState);      } finally {        ReactCurrentDispatcher$1.current = prevDispatcher;      }    },

再看HooksDispatcherOnRerenderInDEV
这里须要阐明，HooksDispatcherOnRerenderInDEV在renderWithHooks办法中是在前面赋值的，能够了解为是render是执行的。
和HooksDispatcherOnUpdateInDEV比，又只有一句的区别

useState: function (initialState) {      currentHookNameInDev = 'useState';      updateHookTypesDev();      var prevDispatcher = ReactCurrentDispatcher$1.current;      // 这里也是有区别的。但不太重要      ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnRerenderInDEV;      try {        // 只有这一句的区别          return rerenderState(initialState);      } finally {        ReactCurrentDispatcher$1.current = prevDispatcher;      }    },

InvalidNested的mount、update、render
这三个一块说。
InvalidNestedHooksDispatcherOnMountInDEV

useState: function (initialState) {      currentHookNameInDev = 'useState';      // 都减少了这行      warnInvalidHookAccess();      mountHookTypesDev();      var prevDispatcher = ReactCurrentDispatcher$1.current;      // 这行略有不同      ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;      try {        return mountState(initialState);      } finally {        ReactCurrentDispatcher$1.current = prevDispatcher;      }    },

InvalidNestedHooksDispatcherOnUpdateInDEV：

useState: function (initialState) {      currentHookNameInDev = 'useState';      // 都减少了这行      warnInvalidHookAccess();      updateHookTypesDev();      var prevDispatcher = ReactCurrentDispatcher$1.current;      // 这行略有不同，留神这里是update，不是render      ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;      try {        return rerenderState(initialState);      } finally {        ReactCurrentDispatcher$1.current = prevDispatcher;      }    },

这三局部，都是为了warnInvalidHookAccess这个正告代码：
不要在useEffect、useMemo里创立hooks，你只能在顶层的react组件中创立hooks。
源码如下：

var warnInvalidHookAccess = function () {    error('Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' + 'You can only call Hooks at the top level of your React function. ' + 'For more information, see ' + 'https://reactjs.org/link/rules-of-hooks');  };

总结

能够了解，每一个都是，如果在mountState、updateState、renderState区间，又做了mount、update、render的话，就会报正告，同时下一次还是在InvalidNested。
这个性能在state里，一个比拟典型的场景是当setState办法里又执行了hooks办法，就会报error。
或者在useMemo、useEffect办法里创立hooks，也会报error。