ConsolePatchDev 控制台补丁开发

开发者寄语

• 帮助函数，用于修补 console.log ，以避免在渲染函数无副作用重放期间记录日志。
• 目前这仅是懒加载地修补对象，如果 log 函数被提前提取，则无法覆盖。
• 我们也可以选择提前修补该方法。

一、 禁用日志

export function disableLogs(): void {
  if (__DEV__) {
    if (disabledDepth === 0) {
      prevLog = console.log;
      prevInfo = console.info;
      prevWarn = console.warn;
      prevError = console.error;
      prevGroup = console.group;
      prevGroupCollapsed = console.groupCollapsed;
      prevGroupEnd = console.groupEnd;
      // https://github.com/facebook/react/issues/19099
      const props = {
        configurable: true,
        enumerable: true,
        value: disabledLog,
        writable: true,
      };
      Object.defineProperties(console, {
        info: props,
        log: props,
        warn: props,
        error: props,
        group: props,
        groupCollapsed: props,
        groupEnd: props,
      });
    }
    disabledDepth++;
  }
}

二、开启日志

export function reenableLogs(): void {
  if (__DEV__) {
    disabledDepth--;
    if (disabledDepth === 0) {
      const props = {
        configurable: true,
        enumerable: true,
        writable: true,
      };
      Object.defineProperties(console, {
        log: { ...props, value: prevLog },
        info: { ...props, value: prevInfo },
        warn: { ...props, value: prevWarn },
        error: { ...props, value: prevError },
        group: { ...props, value: prevGroup },
        groupCollapsed: { ...props, value: prevGroupCollapsed },
        groupEnd: { ...props, value: prevGroupEnd },
      });
    }
    if (disabledDepth < 0) {
      console.error(
        'disabledDepth fell below zero. ' +
          'This is a bug in React. Please file an issue.',
      );
    }
  }
}

三、常数

1. en

// 禁用深度
let disabledDepth = 0;
// 上一个日志
let prevLog;
// 上一个信息
let prevInfo;
// 上次警告
let prevWarn;
// 上一个错误
let prevError;
// 上一个组
let prevGroup;
// 上一个组已折叠
let prevGroupCollapsed;
// 上一个组结束
let prevGroupEnd;

// 已禁用日志
function disabledLog() {}

disabledLog.__reactDisabledLog = true;