TypeScript react-fiber-export.IRenderer類代碼示例

function renderSubtreeIntoContainer(reconciler: IRenderer,
                                    contextSymbol: symbol,
                                    rootContainerSymbol: symbol,
                                    parentComponent: React.Component<any, any> | null,
                                    children: any,
                                    container: any,
                                    forceHydrate: boolean,
                                    callback: () => void) {
  if (forceHydrate) {
    throw new Error("forceHydrate not implemented yet");
  }

  let root = container[rootContainerSymbol];

  if (!root) {
    const newRoot = reconciler.createContainer(container);

    container[rootContainerSymbol] = newRoot;

    const renderActionsForContainer: RenderAction[] = [];

    if (container[contextSymbol] === undefined) {
      // noinspection UnnecessaryLocalVariableJS
      const rootContext: IHostContext = {
        triggerRender() {
          // console.log("render triggered for", renderActionsForContainer);

          renderActionsForContainer.forEach((action: RenderAction) => {
            action.triggerRender();
          });
        },
        renderActionFound(action: RenderAction) {
          // console.log("render action found", action);
          renderActionsForContainer.push(action);
        },
      };

      container[contextSymbol] = rootContext;
    }

    root = newRoot;

    reconciler.unbatchedUpdates(() => {
      reconciler.updateContainer(children, newRoot, parentComponent, callback);
    });
  } else {
    reconciler.updateContainer(children, root, parentComponent, callback);
  }

  return reconciler.getPublicRootInstance(root);
}

  public findHostObject(componentOrElement: any) {
    if (componentOrElement == null) {
      return null;
    }

    if (componentOrElement[this.reconcilerConfig.getFiberSymbol()] !== undefined) {
      // must be a host instance already then
      return componentOrElement;
    }

    const fiber: IFiber = componentOrElement._reactInternalFiber;
    if ((fiber != null)) {
      return this.reconciler.findHostInstance(fiber);
    }

    if (typeof componentOrElement.render === "function") {
      throw new Error("Unable to find node on an unmounted component.");
    } else {
      throw new Error("Element appears to be" +
        " neither ReactComponent nor DOMNode. Keys: %s" + Object.keys(componentOrElement));
    }
  }

  public unmountComponentAtNode(container: any, callback?: () => void): any {
    if (container[this.reconcilerConfig.getRootContainerSymbol()]) {
      // if (__DEV__) {
      //   const rootEl = getReactRootElementInContainer(container);
      //   const renderedByDifferentReact =
      //     rootEl && !ReactDOMComponentTree.getInstanceFromNode(rootEl);
      //   warning(
      //     !renderedByDifferentReact,
      //     "unmountComponentAtNode(): The node you're attempting to unmount " +
      //     'was rendered by another copy of React.',
      //   );
      // }

      // Unmount should not be batched.
      this.reconciler.unbatchedUpdates(() => {
        renderSubtreeIntoContainer(this.reconciler,
          this.reconcilerConfig.getContextSymbol(),
          this.reconcilerConfig.getRootContainerSymbol(),
          null,
          null,
          container,
          false,
          () => {
            delete container[this.reconcilerConfig.getRootContainerSymbol()];

            if (callback != null) {
              callback();
            }
          });
      });
      // If you call unmountComponentAtNode twice in quick succession, you'll
      // get `true` twice. That's probably fine?
      return true;
    } else {
      if (callback != null) {
        callback();
      }
      // if (__DEV__) {
      //   const rootEl = getReactRootElementInContainer(container);
      //   const hasNonRootReactChild = !!(rootEl &&
      //     ReactDOMComponentTree.getInstanceFromNode(rootEl));
      //
      //   // Check if the container itself is a React root node.
      //   const isContainerReactRoot =
      //     container.nodeType === 1 &&
      //     isValidContainer(container.parentNode) &&
      //     !!container.parentNode._reactRootContainer;
      //
      //   warning(
      //     !hasNonRootReactChild,
      //     "unmountComponentAtNode(): The node you're attempting to unmount " +
      //     'was rendered by React and is not a top-level container. %s',
      //     isContainerReactRoot
      //       ? 'You may have accidentally passed in a React root node instead ' +
      //       'of its container.'
      //       : 'Instead, have the parent component update its state and ' +
      //       'rerender in order to remove this component.',
      //   );
      // }

      return false;
    }
  }

 reconciler.unbatchedUpdates(() => {
   reconciler.updateContainer(children, newRoot, parentComponent, callback);
 });