跳到主要内容

RF 调用用户空间

一、作用​

二、在开发环境中调用组件​

export const callComponentInDEV: <Props, Arg, R>(
  Component: (p: Props, arg: Arg) => R,
  props: Props,
  secondArg: Arg,
) => R = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callComponent.react_stack_bottom_frame.bind(callComponent) as any)
  : (null as any);

三、在开发环境调用渲染​

export const callRenderInDEV: <R>(instance: ClassInstance<R>) => R => R =
  __DEV__
    ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技巧来欺骗压缩工具以保留函数名称。
      (callRender.react_stack_bottom_frame.bind(callRender)as any)
    : (null as  any);

四、在开发环境中调用 ComponentDidMount​

export const callComponentDidMountInDEV: (
  finishedWork: Fiber,
  instance: ClassInstance<any>,
) => void = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callComponentDidMount.react_stack_bottom_frame.bind(
      callComponentDidMount,
    ) as any)
  : (null as any);

五、在开发环境中调用 componentDidUpdate​

export const callComponentDidUpdateInDEV: (
  finishedWork: Fiber,
  instance: ClassInstance<any>,
  prevProps: Object,
  prevState: Object,
  snaphot: Object,
) => void = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callComponentDidUpdate.react_stack_bottom_frame.bind(
      callComponentDidUpdate,
    ) as any)
  : (null as any);

六、在开发环境中调用 componentDidCatch​

export const callComponentDidCatchInDEV: (
  instance: ClassInstance<any>,
  errorInfo: CapturedValue<mixed>,
) => void = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callComponentDidCatch.react_stack_bottom_frame.bind(
      callComponentDidCatch,
    ) as any)
  : (null as any);

七、在开发环境中调用 componentWillUnmount​

export const callComponentWillUnmountInDEV: (
  current: Fiber,
  nearestMountedAncestor: Fiber | null,
  instance: ClassInstance<any>,
) => void = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callComponentWillUnmount.react_stack_bottom_frame.bind(
      callComponentWillUnmount,
    ) as any)
  : (null as any);

八、在开发环境中创建调用​

export const callCreateInDEV: (effect: Effect) => (() => void) | void = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callCreate.react_stack_bottom_frame.bind(callCreate) as any)
  : (null as any);

九、在开发环境中调用销毁​


export const callDestroyInDEV: (
  current: Fiber,
  nearestMountedAncestor: Fiber | null,
  destroy: (() => void) | (({...}) => void),
) => void = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (callDestroy.react_stack_bottom_frame.bind(callDestroy) as any)
  : (null as any);

十、在开发环境中调用懒初始化​

export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
  ? // We use this technique to trick minifiers to preserve the function name.
    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit) as any)
  : // 我们使用这种技术来欺骗压缩工具以保留函数名称。
    (null as any);

十一、常量​

1. 调用组件​

备注
// These indirections exists so we can exclude its stack frame in DEV (and anything below it).
// TODO: Consider marking the whole bundle instead of these boundaries.
//
// 存在这些间接引用是为了在开发环境中（以及其以下的环境）排除其堆栈帧。
// 待办事项：考虑标记整个包，而不是这些边界。

const callComponent = {
  react_stack_bottom_frame: function <Props, Arg, R>(
    Component: (p: Props, arg: Arg) => R,
    props: Props,
    secondArg: Arg,
  ): R {
    const wasRendering = isRendering;
    setIsRendering(true);
    try {
      const result = Component(props, secondArg);
      return result;
    } finally {
      setIsRendering(wasRendering);
    }
  },
};

2. 调用渲染​

备注
const callRender = {
  react_stack_bottom_frame: function <R>(instance: ClassInstance<R>): R {
    const wasRendering = isRendering;
    setIsRendering(true);
    try {
      const result = instance.render();
      return result;
    } finally {
      setIsRendering(wasRendering);
    }
  },
};

3. 调用组件已挂载​

备注
const callComponentDidMount = {
  react_stack_bottom_frame: function (
    finishedWork: Fiber,
    instance: ClassInstance<any>,
  ): void {
    try {
      instance.componentDidMount();
    } catch (error) {
      captureCommitPhaseError(finishedWork, finishedWork.return, error);
    }
  },
};

4. 调用组件更新后方法​

备注
const callComponentDidUpdate = {
  react_stack_bottom_frame: function (
    finishedWork: Fiber,
    instance: ClassInstance<any>,
    prevProps: Object,
    prevState: Object,
    snapshot: Object,
  ): void {
    try {
      instance.componentDidUpdate(prevProps, prevState, snapshot);
    } catch (error) {
      captureCommitPhaseError(finishedWork, finishedWork.return, error);
    }
  },
};

5. 调用ComponentDidCatch​

const callComponentDidCatch = {
  react_stack_bottom_frame: function (
    instance: ClassInstance<any>,
    errorInfo: CapturedValue<mixed>,
  ): void {
    const error = errorInfo.value;
    const stack = errorInfo.stack;
    instance.componentDidCatch(error, {
      componentStack: stack !== null ? stack : '',
    });
  },
};

6. 调用组件将要卸载​

备注
const callComponentWillUnmount = {
  react_stack_bottom_frame: function (
    current: Fiber,
    nearestMountedAncestor: Fiber | null,
    instance: ClassInstance<any>,
  ): void {
    try {
      instance.componentWillUnmount();
    } catch (error) {
      captureCommitPhaseError(current, nearestMountedAncestor, error);
    }
  },
};

7. 调用创建​

const callCreate = {
  react_stack_bottom_frame: function (
    effect: Effect,
  ): (() => void) | object | void | null {
    const create = effect.create;
    const inst = effect.inst;
    const destroy = create();
    inst.destroy = destroy;
    return destroy;
  },
};

8. 调用销毁​

备注
const callDestroy = {
  react_stack_bottom_frame: function (
    current: Fiber,
    nearestMountedAncestor: Fiber | null,
    destroy: () => void,
  ): void {
    try {
      destroy();
    } catch (error) {
      captureCommitPhaseError(current, nearestMountedAncestor, error);
    }
  },
};

9. 调用惰性初始化​

const callLazyInit = {
  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
    const payload = lazy._payload;
    const init = lazy._init;
    return init(payload);
  },
};