四月八日

function lazyInitializer<T>(payload: Payload<T>): T {
  if (payload._status === Uninitialized) {
    const ctor = payload._result;
    const thenable = ctor();
    // Transition to the next state.
    // This might throw either because it's missing or throws. If so, we treat it
    // as still uninitialized and try again next time. Which is the same as what
    // happens if the ctor or any wrappers processing the ctor throws. This might
    // end up fixing it if the resolution was a concurrency bug.
    thenable.then(
      moduleObject => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const resolved: ResolvedPayload<T> = (payload: any);
          resolved._status = Resolved;
          resolved._result = moduleObject;
        }
      },
      error => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const rejected: RejectedPayload = (payload: any);
          rejected._status = Rejected;
          rejected._result = error;
        }
      },
    );
    if (payload._status === Uninitialized) {
      // In case, we're still uninitialized, then we're waiting for the thenable
      // to resolve. Set it as pending in the meantime.
      const pending: PendingPayload = (payload: any);
      pending._status = Pending;
      pending._result = thenable;
    }
  }
  if (payload._status === Resolved) {
    const moduleObject = payload._result;
   
    return moduleObject.default;
  } else {
    throw payload._result;
  }
}

export function lazy<T>(
  ctor: () => Thenable<{default: T, ...}>,
): LazyComponent<T, Payload<T>> {
  const payload: Payload<T> = {
    // We use these fields to store the result.
    _status: -1,
    _result: ctor,
  };

  const lazyType: LazyComponent<T, Payload<T>> = {
    $$typeof: REACT_LAZY_TYPE,
    _payload: payload,
    _init: lazyInitializer,
  };
  
  return lazyType;
}

function mountLazyComponent(_current, workInProgress, elementType, updateLanes, renderLanes) {
  if (_current !== null) {
    // A lazy component only mounts if it suspended inside a non-
    // concurrent tree, in an inconsistent state. We want to treat it like
    // a new mount, even though an empty version of it already committed.
    // Disconnect the alternate pointers.
    _current.alternate = null;
    workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect

    workInProgress.flags |= Placement;
  }

  var props = workInProgress.pendingProps;
  var lazyComponent = elementType;
  var payload = lazyComponent._payload;
  var init = lazyComponent._init;

  // 第一次挂载组件时，因为promise状态不是完成状态，会抛出错误被上层的try catch捕获
  var Component = init(payload);

  workInProgress.type = Component;
  // 如果已经加载成功，分析出异步组件的类型
  var resolvedTag = workInProgress.tag = resolveLazyComponentTag(Component);

  // 合并异步组件的props和通过lazy创建组件时传入的props
  var resolvedProps = resolveDefaultProps(Component, props);
  var child;

  // 根据不同的组件类型处理，如果没有则抛出错误
  switch (resolvedTag) {
      //...
  }
  {
    throw Error( "Element type is invalid. Received a promise that resolves to: " + Component + ". Lazy element type must resolve to a class or function." + hint );
  }
}

function createFiberFromSuspense(pendingProps, mode, lanes, key) {
  var fiber = createFiber(SuspenseComponent, pendingProps, key, mode); // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
  // This needs to be fixed in getComponentName so that it relies on the tag
  // instead.

  fiber.type = REACT_SUSPENSE_TYPE;
  fiber.elementType = REACT_SUSPENSE_TYPE;
  fiber.lanes = lanes;
  return fiber;
}

fallbackChildFragment.return = workInProgress;

primaryChildFragment.sibling = fallbackChildFragment;

workInProgress.child = primaryChildFragment;

return fallbackChildFragment

function renderRootSync(root, lanes) {
  do {
    try {
      workLoopSync();
      break;
    } catch (thrownValue) {
      handleError(root, thrownValue);
    }
  } while (true);
}

function handleError(root, thrownValue) {
  do {
    try {
      ...
      // 继续执行
      throwException(...);
      // 这里完成时   会将wip设置为自己的父节点  也就是 suspense 节点
      workInProgress = completeUnitOfWork(workInProgress);
    } catch (yetAnotherThrownValue) {
      ...
      continue
    }
    // Return to the normal work loop.
    return;
  } while (true);
}

function throwException(
  root: FiberRoot,
  returnFiber: Fiber,
  sourceFiber: Fiber,
  value: mixed,
  renderExpirationTime: ExpirationTime,
) {
  ...
  if (
    value !== null &&
    typeof value === 'object' &&
    typeof value.then === 'function'
  ) {
    // This is a thenable.
    const thenable: Thenable = (value: any);

    ...
    do {
      if (
        workInProgress.tag === SuspenseComponent &&
        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)
      ) {
        // 一个 set 结构存储在 updateQueue
        const thenables: Set<Thenable> = (workInProgress.updateQueue: any);
        if (thenables === null) {
          const updateQueue = (new Set(): any);
          updateQueue.add(thenable);
          // 第一次新增
          workInProgress.updateQueue = updateQueue;
        } else {
          // 追加
          thenables.add(thenable);
        }
           ...
          // 同步设置
          sourceFiber.expirationTime = Sync;

          return;
        }

        ...
      workInProgress = workInProgress.return;
    } while (workInProgress !== null);
    
  }
  ...
}

function attachSuspenseRetryListeners(finishedWork) {
  // If this boundary just timed out, then it will have a set of wakeables.
  // For each wakeable, attach a listener so that when it resolves, React
  // attempts to re-render the boundary in the primary (pre-timeout) state.
  var wakeables = finishedWork.updateQueue;

  if (wakeables !== null) {
    finishedWork.updateQueue = null;
    var retryCache = finishedWork.stateNode;

    if (retryCache === null) {
      retryCache = finishedWork.stateNode = new PossiblyWeakSet();
    }

    wakeables.forEach(function (wakeable) {
      // Memoize using the boundary fiber to prevent redundant listeners.
      var retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);

      if (!retryCache.has(wakeable)) {
        {
          if (wakeable.__reactDoNotTraceInteractions !== true) {
            retry = tracing.unstable_wrap(retry);
          }
        }

        retryCache.add(wakeable);
        // 通过then方法在resolve之后执行
        wakeable.then(retry, retry);
      }
    });
  }
}

/**
 * 
 * @param {*} Component  需要异步数据的component 
 * @param {*} api        请求数据接口,返回Promise，可以再then中获取与后端交互的数据
 * @returns 
 */
function AysncComponent(Component,api){
    const AysncComponentPromise = () => new Promise(async (resolve)=>{
          const data = await api()
          resolve({
              default: (props) => <Component rdata={data} { ...props}  />
          })
    })
    return React.lazy(AysncComponentPromise)
}

/* 数据模拟 */
const getData=()=>{
    return new Promise((resolve)=>{
        //模拟异步
        setTimeout(() => {
             resolve({
                 name:'alien',
                 say:'let us learn React!'
             })
        }, 1000)
    })
}
/* 测试异步组件 */
function Test({ rdata  , age}){
    const { name , say } = rdata
    console.log('组件渲染')
    return <div>
        <div> hello , my name is { name } </div>
        <div>age : { age } </div>
        <div> i want to say { say } </div>
    </div>
}
/* 父组件 */
export default class Index extends React.Component{
    LazyTest = AysncComponent(Test,getData) 
    /* 需要每一次在组件内部声明，保证每次父组件挂载，都会重新请求数据 ，防止内存泄漏。 */
    render(){
        const { LazyTest } = this
        return <div>
           <Suspense fallback={<div>loading...</div>} >
              <LazyTest age={18}  />
          </Suspense>
        </div>
    }
}

function HOC(WrapComponent){
    return class Advance extends React.Component{
       state={
           name:'alien'
       }
       render(){
           return <WrapComponent  { ...this.props } { ...this.state }  />
       }
    }
}

class Index extends React.Component{
  render(){
    return <div> hello,world  </div>
  }
}
function HOC(Component){
    return class wrapComponent extends Component{ /* 直接继承需要包装的组件 */
        
    }
}
export default HOC(Index) 

function withRouter(Component) {
  const displayName = `withRouter(${Component.displayName || Component.name})`;
  const C = props => {
      /*  获取 */
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <RouterContext.Consumer>
        {context => {
          return (
            <Component
              {...remainingProps} // 组件原始的props 
              {...context}        // 存在路由对象的上下文，history  location 等 
              ref={wrappedComponentRef}
            />
          );
        }}
      </RouterContext.Consumer>
    );
  };

  C.displayName = displayName;
  C.WrappedComponent = Component;
  /* 继承静态属性 */
  return hoistStatics(C, Component);
}
export default withRouter

const HOC = (WrapComponent) =>
  class Index  extends WrapComponent {
    render() {
      if (this.props.visible) {
        return super.render()
      } else {
        return <div>暂无数据</div>
      }
    }
  }

class Index extends React.Component{
  render(){
    return <div>
       <ul>
         <li>react</li>
         <li>vue</li>
         <li>Angular</li>
       </ul>
    </div>
  }
}
function HOC (Component){
  return class Advance extends Component {
    render() {
      const element = super.render()
      const otherProps = {
        name:'alien'
      }
      /* 替换 Angular 元素节点 */
      const appendElement = React.createElement('li' ,{} , `hello ,world , my name  is ${ otherProps.name }` )
      const newchild =  React.Children.map(element.props.children.props.children,(child,index)=>{
           if(index === 2) return appendElement
           return  child
      }) 
      return  React.cloneElement(element, element.props, newchild)
    }
  }
}
export  default HOC(Index)

export default function dynamicHoc(loadRouter) {
  return class Content extends React.Component {
    state = {Component: null}
    componentDidMount() {
      if (this.state.Component) return
      loadRouter()
        .then(module => module.default) // 动态加载 component 组件
        .then(Component => this.setState({Component},
         ))
    }
    render() {
      const {Component} = this.state
      return Component ? <Component {
      ...this.props
      }
      /> : <Loading />
    }
  }
}

function Hoc(Component){
  return class WrapComponent extends React.Component{
      constructor(){
        super()
        this.node = null /* 获取实例，可以做一些其他的操作。 */
      }
      render(){
        return <Component {...this.props}  ref={(node) => this.node = node }  />
      }
  }
}

function ClickHoc (Component){
  return  function Wrap(props){
    const dom = useRef(null)
    useEffect(()=>{
       const handerClick = () => console.log('发生点击事件') 
       dom.current.addEventListener('click',handerClick)
     return () => dom.current.removeEventListener('click',handerClick)
    },[])
    return  <div ref={dom}  ><Component  {...props} /></div>
  }
}

@ClickHoc
class Index extends React.Component{
   render(){
     return <div className='index'  >
       <p>hello，world</p>
       <button>组件内部点击</button>
    </div>
   }
}
export default ()=>{
  return <div className='box'  >
     <Index />
     <button>组件外部点击</button>
  </div>
}

function HOC (Component){
  const proDidMount = Component.prototype.componentDidMount 
  Component.prototype.componentDidMount = function(){
     console.log('劫持生命周期：componentDidMount')
     proDidMount.call(this)
  }
  return  Component
}

const ThemeContext = React.createContext(null) //
const ThemeProvider = ThemeContext.Provider  //提供者
const ThemeConsumer = ThemeContext.Consumer // 订阅消费者

class ConsumerDemo extends React.Component{
    render(){
        const { color,background } = this.context
        return <div style={{ color,background } } >消费者</div> 
    }
 }
 ConsumerDemo.contextType = ThemeContext

function ProviderDemo(){
    const [ contextValue , setContextValue ] = React.useState({  color:'#ccc', background:'pink' })
    return <div>
        <ThemeProvider value={ contextValue } > 
            <ConsumerDemo />
        </ThemeProvider>
    </div>
}

class ConsumerDemo extends React.Component {
    render() {
        return <ThemeConsumer>
            {({ color, background }) => <div style={{ color, background }} >消费者</div>}
        </ThemeConsumer>
    }
}
function ProviderDemo() {
    const [contextValue, setContextValue] = React.useState({ color: '#ccc', background: 'pink' })
    return <div>
        <ThemeProvider value={contextValue} >
            <ConsumerDemo />
        </ThemeProvider>
    </div>
}

function ConsumerDemo() {
    const { color, background } = React.useContext(ThemeContext);
    return <div style={{ color, background }} >消费者</div>
}

function ProviderDemo() {
    const [contextValue, setContextValue] = React.useState({ color: '#ccc', background: 'pink' })
    return <div>
        <ThemeProvider value={contextValue} >
            <ConsumerDemo />
        </ThemeProvider>
    </div>
}

const MyContext = React.createContext(/* 初始化内容 */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" 在 DevTools 中
<MyContext.Consumer> // "MyDisplayName.Consumer" 在 DevTools 中

function createContext(defaultValue, calculateChangedBits) {
  var context = {
    $$typeof: REACT_CONTEXT_TYPE,
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    Provider: null,
    Consumer: null
  };
  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE,
    _context: context
  };

  {
    var Consumer = {
      $$typeof: REACT_CONTEXT_TYPE,
      _context: context,
    }; 
    Object.defineProperties(Consumer, {
      // 添加getter 和 setter
    });

    context.Consumer = Consumer;
  }

  return context;
}

function updateContextProvider(current, workInProgress, renderLanes) {
  // 通过type属性获取Provider组件
  var providerType = workInProgress.type;
  // 拿到createContext定义的上下文
  var context = providerType._context;
  
  // 获取传递到Provider组件的属性
  var newProps = workInProgress.pendingProps;
  var oldProps = workInProgress.memoizedProps;
  var newValue = newProps.value;

  // 方法内部通过context._currentValue = nextValue 给context赋值
  pushProvider(workInProgress, newValue);
  
  // 上一次props有值得时候需要判断是否进行子元素的调度
  if (oldProps !== null) {
    var oldValue = oldProps.value;

    // 1.判断引用是否相同
    // 2.尝试使用自定义函数判断是否相同 changedBits & MAX_SIGNED_31_BIT_INT) !== changedBits 如果不是有效数字则报错
    // 3 通过 |0 操作将非法结果强制转换成0；
    var changedBits = calculateChangedBits(context, newValue, oldValue);

    if (changedBits === 0) {
      // context没有变化，且子节点没有变化，legacy context没改变，则退出更新
      // No change. Bailout early if children are the same.
      if (oldProps.children === newProps.children && !hasContextChanged()) {
        // 子元素引用没有变化则停止调度
        return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
      }
    } else {
      // The context value changed. Search for matching consumers and schedule
      // them to update.
      propagateContextChange(workInProgress, context, changedBits, renderLanes);
    }
  }

  // 获取到子节点并继续在子节点上调度
  var newChildren = newProps.children;
  reconcileChildren(current, workInProgress, newChildren, renderLanes);
  return workInProgress.child;
}

function updateContextConsumer(current, workInProgress, renderLanes) {
  var context = workInProgress.type;

  var newProps = workInProgress.pendingProps;
  var render = newProps.children;

  // 如果子元素不是一个函数则抛出错误
  {
    if (typeof render !== 'function') {
      error('A context consumer was rendered with multiple children, or a child ' + "that isn't a function. A context consumer expects a single child " + 'that is a function. If you did pass a function, make sure there ' + 'is no trailing or leading whitespace around it.');
    }
  }
  
  prepareToReadContext(workInProgress, renderLanes);
  // 获取最新的值
  var newValue = readContext(context, newProps.unstable_observedBits);
  var newChildren;

  // 执行函数获取下一个节点
  {
    ReactCurrentOwner$1.current = workInProgress;
    setIsRendering(true);
    newChildren = render(newValue);
    setIsRendering(false);
  } // React DevTools reads this flag.

  //继续在下一个节点上调度
  workInProgress.flags |= PerformedWork;
  reconcileChildren(current, workInProgress, newChildren, renderLanes);
  return workInProgress.child;
}

export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  return refObject;
}

const ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher),
};
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  return ((dispatcher: any): Dispatcher);
}
export function useRef<T>(initialValue: T): {|current: T|} {
  const dispatcher = resolveDispatcher();
  return dispatcher.useRef(initialValue);
}

function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
    if (current !== null && current.memoizedState !== null) {
        ReactCurrentDispatcher.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.
        ReactCurrentDispatcher.current = HooksDispatcherOnMountWithHookTypesInDEV;
    } else {
        ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
    }
}

class MyComponent extends Component {
  renderRow = (index) => {
    // This won't work. Ref will get attached to DataTable rather than MyComponent:
    return <input ref={'input-' + index} />;

    // This would work though! Callback refs are awesome.
    return <input ref={input => this['input-' + index] = input} />;
  }
 
  render() {
    return <DataTable data={this.props.data} renderRow={this.renderRow} />
  }
}

export default class Index extends React.Component{
    render=()=> <div>
        <div ref={(node)=> this.currentDom = node } >hello word</div>
        <Children ref={(node) => this.currentComponentInstance = node  }  />
    </div>
}

export default class Index extends React.Component{
    currentDom = React.createRef(null)
    currentComponentInstance = React.createRef(null)
 
    render=()=> <div>
         <div ref={ this.currentDom } >hello word</div>
        <Children ref={ this.currentComponentInstance }  />
   </div>
}

class Level1 extends React.Component{
    render(){
        return <Level2 topRef={this.props.topRef}/>
    }
}

class Level2 extends React.Component{
    render(){
        return <input name='level2' ref={this.props.topRef}/>
    }
}

class TopLevel extends React.Component{
    topRef = React.createRef();
    componentDidMount(){
        console.log(this.topRef.current)
    }
    render(){
        return <Level1 topRef={this.topRef}/> 
    }
}

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));class Level1 extends React.Component{
    render(){
        return <Level2 topRef={this.props.topRef}/>
    }
}
const Level1Ref = React.forwardRef((props,ref)=> <Level1 {...props} topRef={ref}/>)
class Level2 extends React.Component{
    render(){
        return <input name='level2' ref={this.props.topRef}/>
    }
}

class TopLevel extends React.Component{
    topRef = React.createRef();
    componentDidMount(){
        console.log(this.topRef.current)
    }
    render(){
        return <Level1Ref ref={this.topRef}/> 
    }
}
export default TopLevel;

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

class Level1 extends React.Component{
    render(){
        return <Level2 topRef={this.props.topRef}/>
    }
}
const Level1Ref = React.forwardRef((props,ref)=> <Level1 {...props} topRef={ref}/>)
class Level2 extends React.Component{
    render(){
        return <input name='level2' ref={this.props.topRef}/>
    }
}

class TopLevel extends React.Component{
    topRef = React.createRef();
    componentDidMount(){
        console.log(this.topRef.current)
    }
    render(){
        return <Level1Ref ref={this.topRef}/> 
    }
}

// 表单组件
class Form extends React.Component{
    render(){
       return <div>{...}</div>
    }
}
// index 组件
class Index extends React.Component{ 
    componentDidMount(){
        const { forwardRef } = this.props
        forwardRef.current={
            form:this.form,      // 给form组件实例 ，绑定给 ref form属性 
            index:this,          // 给index组件实例 ，绑定给 ref index属性 
            button:this.button,  // 给button dom 元素，绑定给 ref button属性 
        }
    }
    form = null
    button = null
    render(){
        return <div   > 
          <button ref={(button)=> this.button = button }  >点击</button>
          <Form  ref={(form) => this.form = form }  />  
      </div>
    }
}
const ForwardRefIndex = React.forwardRef(( props,ref )=><Index  {...props} forwardRef={ref}  />)
// home 组件
export default function Home(){
    const ref = useRef(null)
     useEffect(()=>{
         console.log(ref.current)
     },[])
    return <ForwardRefIndex ref={ref} />
}

function logProps(WrappedComponent) {
    class LogProps extends React.Component {
        render() {
            return <WrappedComponent {...this.props} />;
        }
    }
    return LogProps;
}

class FancyButton extends React.Component {
    focus() {
        console.log('focus')
    }
    render(){
        return <div>wefwef</div>
    }
}

const HOCFancyButton = logProps(FancyButton);

class MyComponent extends React.Component {
    ref = React.createRef();
    componentDidMount(){
        console.log(this.ref.current)
    }
    render(){
        // 使用高阶组件的时候 ref指向的是LogProps，而不是FancyButton
        return <HOCFancyButton ref={this.ref}/>
    }
}

function logProps(WrappedComponent) {
    class LogProps extends React.Component {
        render() {
            const { forwardedRef, ...rest } = this.props;
            return <WrappedComponent {...rest} ref={forwardedRef} />;
        }
    }
    return React.forwardRef((props, ref) => <LogProps {...props} forwardRef={ref} />);
}

class FancyButton extends React.Component {
    focus() {
        console.log('focus')
    }
    render() {
        return <div>wefwef</div>
    }
}

const HOCFancyButton = logProps(FancyButton);

class MyComponent extends React.Component {
    ref = React.createRef();
    componentDidMount() {
        console.log(this.ref.current)
    }
    render() {
        return <HOCFancyButton ref={this.ref} />
    }
}

class Child extends React.Component{
    receiveMessageFromParent = (msg)=>{
        console.log(msg)
    }
    render(){
        return <>
            <button onClick={()=>this.receiveMessageFromParent('MessageFromChild')}>发消息给父组件</button>
            <div>child</div>
        </> 
    }
}

class Parent extends React.Component {
    childRef = React.createRef();
    sendMessageToChild = ()=>{
        this.childRef.current.receiveMessageFromParent('MessageFromParent')
    }
    receiveMessageFromChild = (msg)=>{
        console.log(msg);
    }
    render(){
        return <>
            <button type='button' onClick={this.sendMessageToChild}>发消息给子组件</button>
            <Child ref={this.childRef} receiveMessageFromChild={this.receiveMessageFromChild}/>
        </> 
    }
}

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

function Child(props, ref) {
    const inputRef = React.useRef();
    const sayChild = useCallback(()=>{
        console.log('child')
    },[])
    React.useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        },
        sayChild
    }));
    return <>
        <button onClick={()=> props.receiveMessageFromChild('MessageFromChild')}>发消息给父组件</button>
        <input ref={ref}/>
    </>
}
Child = React.forwardRef(Child)

const Parent = () => {
    const ref = React.useRef();
    React.useEffect(()=>{
        // 可以拿到子组件定义的方法,或者操作子组件的DOM元素
        console.log(ref.current)
    },[ref])
    const receiveMessageFromChild =useCallback((msg)=>{
        console.log(msg);
    },[])
    return <>
        <Child ref={ref} receiveMessageFromChild={receiveMessageFromChild}/>
    </>
}

// 在 commit 的 mutation 阶段会清空Ref
function commitDetachRef(current: Fiber) {
  const currentRef = current.ref;
  if (currentRef !== null) {
    if (typeof currentRef === 'function') {
      currentRef(null); 
    } else {
      currentRef.current = null;
    }
  }
}

function commitAttachRef(finishedWork: Fiber) {
  const ref = finishedWork.ref;
  if (ref !== null) {
    const instance = finishedWork.stateNode;
    let instanceToUse;
    switch (finishedWork.tag) {
      case HostComponent: //元素节点 获取元素
        instanceToUse = getPublicInstance(instance);
        break;
      default:  // 类组件直接使用实例
        instanceToUse = instance;
    }
    if (typeof ref === 'function') {
      ref(instanceToUse);  //* function 和 字符串获取方式。 */
    } else {
      ref.current = instanceToUse; /* ref对象方式 */
    }
  }
}

function coerceRef(returnFiber, current, element) {
    // 会用_stringRef给函数做标记，如果相同则直接返回原来的函数引用
    if (current !== null && current.ref !== null && typeof current.ref === 'function' && current.ref._stringRef === stringRef) {
        return current.ref;
    }

    var ref = function (value) {
        var refs = inst.refs;

        if (refs === emptyRefsObject) {
            // This is a lazy pooled frozen object, so we need to initialize.
            refs = inst.refs = {};
        }

        if (value === null) {
            delete refs[stringRef];
        } else {
            refs[stringRef] = value;
        }
    };

    ref._stringRef = stringRef;
    return ref;
}

function commitMutationEffects(){
     if (effectTag & Ref) {
      const current = nextEffect.alternate;
      if (current !== null) {
        commitDetachRef(current);
      }
    }
}

function commitLayoutEffects(){
     if (effectTag & Ref) {
      commitAttachRef(nextEffect);
    }
}

function markRef(current, workInProgress) {
  var ref = workInProgress.ref;

  if (
      // fiber初始化的时候，且定义了ref属性
      current === null && ref !== null
      // fiber更新的时候，ref对象的引用已经改变
      || current !== null && current.ref !== ref
    ) {
    // Schedule a Ref effect
    workInProgress.flags |= Ref;
  }
}

// 可以把函数定义为类的方法
<div ref={(node)=>{
    this.node = node
    console.log('此时的参数是什么：', this.node )
}}  >ref元素节点</div>

function safelyDetachRef(current) {
  const ref = current.ref;
  if (ref !== null) {
    if (typeof ref === 'function') {  // 函数式 ｜ 字符串
        ref(null)
    } else {
      ref.current = null;  // ref 对象
    }
  }
}

program
    // 通过 node xxx-cli.js -v 可以查看指定版本
	.version(require('../package').version, "-v, --version")

    // 可以修改首行的信息
    // 默认 Usage: sun-cra-cli [options] [command]
    // 修改为： sun-cra-cli [options-my] [command-my]
    .usage('<options-my> [command-my]')

    // 如果指定了-h 选项，默认-h 选项会被覆盖
    // .option('-h, --help', 'help information')
    .option('-s, --small', 'small pizza size')
    .option('-p, --pizza-type <type>', 'flavour of pizza')

    // 一定要放在参数处理的逻辑之前,否则不能执行
    program.parse(process.argv);

    // 获取选项执行其他的逻辑
    const options = program.opts();
    if (options.small) console.log('- small pizza size');
    if (options.pizzaType) console.log(`- ${options.pizzaType}`);

function help () {
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}
help()

program
    .command('init', 'generate a new project from a template')

program
  // 如果想让命令带上参数，就不能把命令描述写在第二个参数上，要用description方法
  .command('init')
  .description('clone a repository into a newly created directory')
  // 两个都是必选参数
  .argument('<username>', 'user to login')
  .argument('<password>', 'password for user, if required')

  // 这时执行 `node xxx-cli.js init` 并不会自动执行init命令所对应的文件
  // 需要在action中处理执行逻辑
  .action((username, password) => {
    console.log('username:', username);
    console.log('password:', password);
  });

program.parse(process.argv);

spinner.start('waiting')
spinner.succeed('successfully')
spinner.start('waiting')
spinner.succeed('successfully')

/**
✔ Initialization successful.
✔ Initialization successful.
*/

#!/usr/bin/env node
const { program } = require("commander");

/**
 * Usage: create-bigdata-frontend [options] <name>
 * name 项目名称 --ts 是否使用ts模板
 */
program
	.version(require('../package').version, "-v, --version") // 定义版本选项
	// .command('create [name]', 'create a project') // 定义命令+描述
	.arguments("<name>") // 定义命令参数
	.option("--ts", "using the typescript template") // 定义可提供的选项+描述: 是否使用ts
	.description("Create a project", { name: "Project name" }) // 描述+参数，描述
	.action((name, options, command) => { // 处理函数：(命令声明的所有参数, 选项, 命令对象自身)
		require("../lib/create.js")(name, options && options.ts);
	})
	.program.parse();

const CLIManager = require("./CLIManager");
module.exports = async (appName, ts) => {
  const cliM = new CLIManager({ appName });
  await cliM.downloadTemplate('https//:xxx.xxx.xxx/xx.git'); // 获取远程模板
  await cliM.writePackageJson(); // 修改package.json
  await cliM.rmGit(); // 移除原有.git信息
  await cliM.install(); // 安装依赖
};

const fs = require("fs");
const path = require("path");
const { exec } = require("child_process");
module.exports = class CLIManager {
  constructor({ appName }) {
    this.appName = appName;
    // 获取当前命令执行是的目录
    this.cwd = process.cwd();
    this.targetDir = path.join(process.cwd(), appName);
  }

  // 执行命令
  run(command, options, cb) {
    exec(command, options, (error, stdout, stderr) => {
      if (error !== null) {
        console.log(chalk.red("X"), "exec error: " + error);
        return;
      }
      cb(stdout);
    });
  }

  // 拉取远程模板
  downloadTemplate(repositiry) {
    return new Promise((resolve, reject) => {
      exec(
        `git clone https://github.com/jquery/jquery.git ${this.appName}`,
        (error, stdout, stderr) => {
          if (error !== null) {
            spinner.fail(`Failed fetching remote git repo`);
            reject(error);
            return;
          }
          resolve(stdout);
        }
      );
    });
  }

  // 删除.git
  rmGit() {
    return new Promise((resolve) => {
      this.run("rm -rf .git", { cwd: this.targetDir }, (stdout) => {
        resolve(stdout);
      });
    });
  }

  // 安装依赖
  install() {
    return new Promise((resolve) => {
      this.run("npm ci", { cwd: this.targetDir }, (stdout) => {
        resolve(stdout);
      });
    });
  }
};