text: import hoistStatics from 'hoist-non-react-statics'
  import React, { useContext, useMemo, useRef, useReducer } from 'react'
  import { isValidElementType, isContextConsumer } from 'react-is'
  import Subscription from '../utils/Subscription'
  import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
  
  import { ReactReduxContext } from './Context'
  
  // Define some constant arrays just to avoid re-creating these
  const EMPTY_ARRAY = []
  const NO_SUBSCRIPTION_ARRAY = [null, null]
  
  const stringifyComponent = (Comp) => {
    try {
      return JSON.stringify(Comp)
    } catch (err) {
      return String(Comp)
    }
  }
  
  function storeStateUpdatesReducer(state, action) {
    const [, updateCount] = state
    return [action.payload, updateCount + 1]
  }
  
  function useIsomorphicLayoutEffectWithArgs(
    effectFunc,
    effectArgs,
    dependencies
  ) {
    useIsomorphicLayoutEffect(() => effectFunc(...effectArgs), dependencies)
  }
  
  function captureWrapperProps(
    lastWrapperProps,
    lastChildProps,
    renderIsScheduled,
    wrapperProps,
    actualChildProps,
    childPropsFromStoreUpdate,
    notifyNestedSubs
  ) {
    // We want to capture the wrapper props and child props we used for later comparisons
    lastWrapperProps.current = wrapperProps
    lastChildProps.current = actualChildProps
    renderIsScheduled.current = false
  
    // If the render was from a store update, clear out that reference and cascade the subscriber update
    if (childPropsFromStoreUpdate.current) {
      childPropsFromStoreUpdate.current = null
      notifyNestedSubs()
    }
  }
  
  function subscribeUpdates(
    shouldHandleStateChanges,
    store,
    subscription,
    childPropsSelector,
    lastWrapperProps,
    lastChildProps,
    renderIsScheduled,
    childPropsFromStoreUpdate,
    notifyNestedSubs,
    forceComponentUpdateDispatch
  ) {
    // If we're not subscribed to the store, nothing to do here
    if (!shouldHandleStateChanges) return
  
    // Capture values for checking if and when this component unmounts
    let didUnsubscribe = false
    let lastThrownError = null
  
    // We'll run this callback every time a store subscription update propagates to this component
    const checkForUpdates = () => {
      //如果已经取消订阅/已经卸载，就直接去跳过执行。
      if (didUnsubscribe) {
        // Don't run stale listeners.
        // Redux doesn't guarantee unsubscriptions happen until next dispatch.
        return
      }
     //先获取到上一次的store的存储的值
      const latestStoreState = store.getState()
  
      let newChildProps, error
      try {
        // Actually run the selector with the most recent store state and wrapper props
        // to determine what the child props should be
        //计算新的childProps
        newChildProps = childPropsSelector(
          latestStoreState,
          lastWrapperProps.current
        )
      } catch (e) {
        error = e
        lastThrownError = e
      }
  
      if (!error) {
        lastThrownError = null
      }
  
      // If the child props haven't changed, nothing to do here - cascade the subscription update
      if (newChildProps === lastChildProps.current) {
        //r如果新的props并未发生变化，这时需要去通知子组件的subScription，触发checkForUpdates来决定是否需要更新
        if (!renderIsScheduled.current) {
          notifyNestedSubs()
        }
      } else {
        // Save references to the new child props.  Note that we track the "child props from store update"
        // as a ref instead of a useState/useReducer because we need a way to determine if that value has
        // been processed.  If this went into useState/useReducer, we couldn't clear out the value without
        // forcing another re-render, which we don't want.
        lastChildProps.current = newChildProps
        childPropsFromStoreUpdate.current = newChildProps
        renderIsScheduled.current = true
  
        // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
        //如果新的props已经发生了变化，需要让当前的这个connect高阶组件重新渲染。
        forceComponentUpdateDispatch({
          type: 'STORE_UPDATED',
          payload: {
            error,
          },
        })
      }
    }
  
    // Actually subscribe to the nearest connected ancestor (or store)
    //当store更新时，将会执行checkForUpdates函数。
    subscription.onStateChange = checkForUpdates
    //这个会将订阅函数onSateChange 绑定到父subscription的监听函数队列中，那么父级更新时，会触发onStateCnage（即checkForUpdates，来计算最新的props，触发真正的业务组件的更新）
    subscription.trySubscribe()
  
    // Pull data from the store after first render in case the store has
    // changed since we began.
    checkForUpdates()
  
    const unsubscribeWrapper = () => {
      didUnsubscribe = true
      subscription.tryUnsubscribe()
      subscription.onStateChange = null
  
      if (lastThrownError) {
        // It's possible that we caught an error due to a bad mapState function, but the
        // parent re-rendered without this component and we're about to unmount.
        // This shouldn't happen as long as we do top-down subscriptions correctly, but
        // if we ever do those wrong, this throw will surface the error in our tests.
        // In that case, throw the error from here so it doesn't get lost.
        throw lastThrownError
      }
    }
  
    return unsubscribeWrapper
  }
  
  const initStateUpdates = () => [null, 0]
  
  export default function connectAdvanced(
    /*
      selectorFactory is a func that is responsible for returning the selector function used to
      compute new props from state, props, and dispatch. For example:
  
        export default connectAdvanced((dispatch, options) => (state, props) => ({
          thing: state.things[props.thingId],
          saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
        }))(YourComponent)
  
      Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
      outside of their selector as an optimization. Options passed to connectAdvanced are passed to
      the selectorFactory, along with displayName and WrappedComponent, as the second argument.
  
      Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
      props. Do not use connectAdvanced directly without memoizing results between calls to your
      selector, otherwise the Connect component will re-render on every state or props change.
    */
    selectorFactory,
    // options object:
    {
      // the func used to compute this HOC's displayName from the wrapped component's displayName.
      // probably overridden by wrapper functions such as connect()
      getDisplayName = (name) => `ConnectAdvanced(${name})`,
  
      // shown in error messages
      // probably overridden by wrapper functions such as connect()
      methodName = 'connectAdvanced',
  
      // REMOVED: if defined, the name of the property passed to the wrapped element indicating the number of
      // calls to render. useful for watching in react devtools for unnecessary re-renders.
      renderCountProp = undefined,
  
      // determines whether this HOC subscribes to store changes
      shouldHandleStateChanges = true,
  
      // REMOVED: the key of props/context to get the store
      storeKey = 'store',
  
      // REMOVED: expose the wrapped component via refs
      withRef = false,
  
      // use React's forwardRef to expose a ref of the wrapped component
      forwardRef = false,
  
      // the context consumer to use
      context = ReactReduxContext,
  
      // additional options are passed through to the selectorFactory
      ...connectOptions
    } = {}
  ) {
    if (process.env.NODE_ENV !== 'production') {
      if (renderCountProp !== undefined) {
        throw new Error(
          `renderCountProp is removed. render counting is built into the latest React Dev Tools profiling extension`
        )
      }
      if (withRef) {
        throw new Error(
          'withRef is removed. To access the wrapped instance, use a ref on the connected component'
        )
      }
  
      const customStoreWarningMessage =
        'To use a custom Redux store for specific components, create a custom React context with ' +
        "React.createContext(), and pass the context object to React Redux's Provider and specific components" +
        ' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' +
        'You may also pass a {context : MyContext} option to connect'
  
      if (storeKey !== 'store') {
        throw new Error(
          'storeKey has been removed and does not do anything. ' +
            customStoreWarningMessage
        )
      }
    }
   /* ReactReduxContext 就是store存在的context */
    const Context = context
   /* WrappedComponent其实就是业务组件。例如connect(mapStateToProp)(BizIndex)，这里的 WrappedComponent ===  BizIndex */  
    return function wrapWithConnect(WrappedComponent) {
      if (
        process.env.NODE_ENV !== 'production' &&
        !isValidElementType(WrappedComponent)
      ) {
        throw new Error(
          `You must pass a component to the function returned by ` +
            `${methodName}. Instead received ${stringifyComponent(
              WrappedComponent
            )}`
        )
      }
  
      const wrappedComponentName =
        WrappedComponent.displayName || WrappedComponent.name || 'Component'
  
      const displayName = getDisplayName(wrappedComponentName)
  
      const selectorFactoryOptions = {
        ...connectOptions,
        getDisplayName,
        methodName,
        renderCountProp,
        shouldHandleStateChanges,
        storeKey,
        displayName,
        wrappedComponentName,
        WrappedComponent,
      }
  
      const { pure } = connectOptions
  
      function createChildSelector(store) {
        //这里会返回一个合并props的函数，函数的原型类似(nextState，nextProps) =》 mergedProps 
        return selectorFactory(store.dispatch, selectorFactoryOptions)
      }
  
      // If we aren't running in "pure" mode, we don't want to memoize values.
      // To avoid conditionally calling hooks, we fall back to a tiny wrapper
      // that just executes the given callback immediately.
      const usePureOnlyMemo = pure ? useMemo : (callback) => callback()
      /**
       * 该函数就是connect（mapStateToProps，...）(BizComponent) 最终返回的HOC组件，这里的props实际上就是业务组件的props
      */ 
      function ConnectFunction(props) {
        //这里会将ref 取出来。 因为如果forwardRef为true，ref 最终传递到该业务组件时，key为reactReduxForwardedRef。
        const [
          propsContext,
          reactReduxForwardedRef,
          wrapperProps,
        ] = useMemo(() => {
          // Distinguish between actual "data" props that were passed to the wrapper component,
          // and values needed to control behavior (forwarded refs, alternate context instances).
          // To maintain the wrapperProps object reference, memoize this destructuring.
          const { reactReduxForwardedRef, ...wrapperProps } = props
          return [props.context, reactReduxForwardedRef, wrapperProps]
        }, [props])
  
        //根据props是否传入了context，来决定使用的context
        const ContextToUse = useMemo(() => {
          // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
          // Memoize the check that determines which context instance we should use.
          return propsContext &&
            propsContext.Consumer &&
            isContextConsumer(<propsContext.Consumer />)
            ? propsContext
            : Context
        }, [propsContext, Context])
  
        // Retrieve the store and ancestor subscription via context, if available
        //这里的contextValue 包含 store + subScription。 其实就Provider时，创建的context的值。
        //但是如果是调用者传入的Context，如何保证也有这两个值呢？
        const contextValue = useContext(ContextToUse)
  
        // The store _must_ exist as either a prop or in context.
        // We'll check to see if it _looks_ like a Redux store first.
        // This allows us to pass through a `store` prop that is just a plain value.
        //这里是用来判断props中是否存在store，一般来说，props中都不会存在有 store
        const didStoreComeFromProps =
          Boolean(props.store) &&
          Boolean(props.store.getState) &&
          Boolean(props.store.dispatch)
        //判断contextValue 中是否存在 store。
        const didStoreComeFromContext =
          Boolean(contextValue) && Boolean(contextValue.store)
  
        if (
          process.env.NODE_ENV !== 'production' &&
          !didStoreComeFromProps &&
          !didStoreComeFromContext
        ) {
          throw new Error(
            `Could not find "store" in the context of ` +
              `"${displayName}". Either wrap the root component in a <Provider>, ` +
              `or pass a custom React context provider to <Provider> and the corresponding ` +
              `React context consumer to ${displayName} in connect options.`
          )
        }
        
        //经过判断处理，决定store数据的来源，是props中，还是context中。
        // Based on the previous check, one of these must be true
        const store = didStoreComeFromProps ? props.store : contextValue.store
        //返回merge函数，用于生成真实传递给自组件的props
        const childPropsSelector = useMemo(() => {
          // The child props selector needs the store reference as an input.
          // Re-create this selector whenever the store changes.
          return createChildSelector(store)
        }, [store])
        //创建子subscription示例，这样就能做到在contextValue 变化时，决定子组件是否需要重新渲染
        const [subscription, notifyNestedSubs] = useMemo(() => {
          //如果不需要处理更新，直接跳过。 一般这个值默认为真。
          if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY
  
          // This Subscription's source should match where store came from: props vs. context. A component
          // connected to the store via props shouldn't use subscription from context, or vice versa.
         //创建子subscription实例。并让其的parentSub = contextValue.subscription
          const subscription = new Subscription(
            store,
            didStoreComeFromProps ? null : contextValue.subscription
          )
  
          // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
          // the middle of the notification loop, where `subscription` will then be null. This can
          // probably be avoided if Subscription's listeners logic is changed to not call listeners
          // that have been unsubscribed in the  middle of the notification loop.
          //该方法将会触发当前subscription上的所有监听函数。
          const notifyNestedSubs = subscription.notifyNestedSubs.bind(
            subscription
          )
          return [subscription, notifyNestedSubs]
        }, [store, didStoreComeFromProps, contextValue])
  
        // Determine what {store, subscription} value should be put into nested context, if necessary,
        // and memoize that value to avoid unnecessary context updates.
        //覆写contextValue，将父级的subscription，替换成自己的subscription
        const overriddenContextValue = useMemo(() => {
          if (didStoreComeFromProps) {
            // This component is directly subscribed to a store from props.
            // We don't want descendants reading from this store - pass down whatever
            // the existing context value is from the nearest connected ancestor.
            return contextValue
          }
  
          // Otherwise, put this component's subscription instance into context, so that
          // connected descendants won't update until after this component is done
          return {
            ...contextValue,
            subscription,
          }
        }, [didStoreComeFromProps, contextValue, subscription])
  
        // We need to force this wrapper component to re-render whenever a Redux store update
        // causes a change to the calculated child component props (or we caught an error in mapState)
        //当redux的store 发生变化时，去重新计算子组件的props，并让connect后的容器组件重新渲染
        const [
          [previousStateUpdateResult],
          forceComponentUpdateDispatch,
        ] = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates)
  
        // Propagate any mapState/mapDispatch errors upwards
        //在重新渲染过程中，碰到的问题，会被存放在该results上，因此如果当前重新渲染的过程中如果有错误时，需要抛出该错误。
        if (previousStateUpdateResult && previousStateUpdateResult.error) {
          throw previousStateUpdateResult.error
        }
  
        // Set up refs to coordinate values between the subscription effect and the render logic
        const lastChildProps = useRef() //保存上一次合并后的props信息。
        const lastWrapperProps = useRef(wrapperProps) ///保存本次执行时业务组件的props。
        const childPropsFromStoreUpdate = useRef() 
        const renderIsScheduled = useRef(false) //组件是否处于渲染阶段。
        //当前实际上的业务组件的props
        const actualChildProps = usePureOnlyMemo(() => {
          // Tricky logic here:
          // - This render may have been triggered by a Redux store update that produced new child props
          // - However, we may have gotten new wrapper props after that
          // If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
          // But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
          // So, we'll use the child props from store update only if the wrapper props are the same as last time.
          if (
            childPropsFromStoreUpdate.current &&
            wrapperProps === lastWrapperProps.current
          ) {
            return childPropsFromStoreUpdate.current
          }
  
          // TODO We're reading the store directly in render() here. Bad idea?
          // This will likely cause Bad Things (TM) to happen in Concurrent Mode.
          // Note that we do this because on renders _not_ caused by store updates, we need the latest store state
          // to determine what the child props should be.
          //根据当前的state+ 业务组件的props，计算出最终的props
          return childPropsSelector(store.getState(), wrapperProps)
        }, [store, previousStateUpdateResult, wrapperProps])
  
        // We need this to execute synchronously every time we re-render. However, React warns
        // about useLayoutEffect in SSR, so we try to detect environment and fall back to
        // just useEffect instead to avoid the warning, since neither will run anyway.
        //每次重新渲染后，都需要去更新一次缓存变量们，用于后续的比较
        useIsomorphicLayoutEffectWithArgs(captureWrapperProps, [
          lastWrapperProps,
          lastChildProps,
          renderIsScheduled,
          wrapperProps,
          actualChildProps,
          childPropsFromStoreUpdate,
          notifyNestedSubs,
        ])
  
        // Our re-subscribe logic only runs when the store/subscription setup changes
        //当当前计算出的合并后的props 与前一次的不同时，需要触发当前subscription上的lisners函数执行。
        useIsomorphicLayoutEffectWithArgs(
          subscribeUpdates,
          [
            shouldHandleStateChanges,
            store,
            subscription,
            childPropsSelector,
            lastWrapperProps,
            lastChildProps,
            renderIsScheduled,
            childPropsFromStoreUpdate,
            notifyNestedSubs,
            forceComponentUpdateDispatch,
          ],
          [store, subscription, childPropsSelector]
        )
  
        // Now that all that's done, we can finally try to actually render the child component.
        // We memoize the elements for the rendered child component as an optimization.
        const renderedWrappedComponent = useMemo(
          () => (
            <WrappedComponent
              {...actualChildProps}
              ref={reactReduxForwardedRef}
            />
          ),
          [reactReduxForwardedRef, WrappedComponent, actualChildProps]
        )
  
        // If React sees the exact same element reference as last time, it bails out of re-rendering
        // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
        const renderedChild = useMemo(() => {
          if (shouldHandleStateChanges) {
            // If this component is subscribed to store updates, we need to pass its own
            // subscription instance down to our descendants. That means rendering the same
            // Context instance, and putting a different value into the context.
            return (
              <ContextToUse.Provider value={overriddenContextValue}>
                {renderedWrappedComponent}
              </ContextToUse.Provider>
            )
          }
  
          return renderedWrappedComponent
        }, [ContextToUse, renderedWrappedComponent, overriddenContextValue])
  
        return renderedChild
      }
  
      // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
      const Connect = pure ? React.memo(ConnectFunction) : ConnectFunction
  
      Connect.WrappedComponent = WrappedComponent
      Connect.displayName = displayName
  
      if (forwardRef) {
        const forwarded = React.forwardRef(function forwardConnectRef(
          props,
          ref
        ) {
          //这时，ConnectFunction会通过reactReduxForwardedRef 接受到ref属性并处理
          return <Connect {...props} reactReduxForwardedRef={ref} />
        })
  
        forwarded.displayName = displayName
        forwarded.WrappedComponent = WrappedComponent
        return hoistStatics(forwarded, WrappedComponent)
      }
  
      return hoistStatics(Connect, WrappedComponent)
    }
  }
  