/* provider 組件代碼 */function Provider({ store, context, children }) {   /* 利用useMemo，跟據(jù)store變化創(chuàng)建出一個(gè)contextValue 包含一個(gè)根元素訂閱器和當(dāng)前store  */   const contextValue = useMemo(() => {      /* 創(chuàng)建了一個(gè)根 Subscription 訂閱器 */    const subscription = new Subscription(store)    /* subscription 的 notifyNestedSubs 方法 ，賦值給  onStateChange方法 */    subscription.onStateChange = subscription.notifyNestedSubs      return {      store,      subscription    } /*  store 改變創(chuàng)建新的contextValue */  }, [store])  /*  獲取更新之前的state值 ，函數(shù)組件里面的上下文要優(yōu)先于組件更新渲染  */  const previousState = useMemo(() => store.getState(), [store])
  useEffect(() => {    const { subscription } = contextValue    /* 觸發(fā)trySubscribe方法執(zhí)行，創(chuàng)建listens */    subscription.trySubscribe() // 發(fā)起訂閱    if (previousState !== store.getState()) {        /* 組件更新渲染之后，如果此時(shí)state發(fā)生改變，那么立即觸發(fā) subscription.notifyNestedSubs 方法  */      subscription.notifyNestedSubs()     }    /*   */    return () => {      subscription.tryUnsubscribe()  // 卸載訂閱      subscription.onStateChange = null    }    /*  contextValue state 改變出發(fā)新的 effect */  }, [contextValue, previousState])
  const Context = context || ReactReduxContext  /*  context 存在用跟元素傳進(jìn)來(lái)的context ，如果不存在 createContext創(chuàng)建一個(gè)context  ，這里的ReactReduxContext就是由createContext創(chuàng)建出的context */  return <Context.Provider value={contextValue}>{children}</Context.Provider>}

/* 發(fā)布訂閱者模式 */export default class Subscription {  constructor(store, parentSub) {    this.store = store    this.parentSub = parentSub    this.unsubscribe = null    this.listeners = nullListeners
    this.handleChangeWrapper = this.handleChangeWrapper.bind(this)  }  /* 負(fù)責(zé)檢測(cè)是否該組件訂閱，然后添加訂閱者也就是listener */  addNestedSub(listener) {    this.trySubscribe()    return this.listeners.subscribe(listener)  }  /* 向listeners發(fā)布通知 */  notifyNestedSubs() {    this.listeners.notify()  }  /* 對(duì)于 provide onStateChange 就是 notifyNestedSubs 方法，對(duì)于 connect 包裹接受更新的組件 ，onStateChange 就是 負(fù)責(zé)更新組件的函數(shù) 。*/  handleChangeWrapper() {    if (this.onStateChange) {      this.onStateChange()    }  }   /* 判斷有沒(méi)有開啟訂閱 */  isSubscribed() {    return Boolean(this.unsubscribe)  }  /* 開啟訂閱模式 首先判斷當(dāng)前訂閱器有沒(méi)有父級(jí)訂閱器 ， 如果有父級(jí)訂閱器(就是父級(jí)Subscription)，把自己的handleChangeWrapper放入到監(jiān)聽者鏈表中 */  trySubscribe() {    /*    parentSub  即是provide value 里面的 Subscription 這里可以理解為 父級(jí)元素的 Subscription    */    if (!this.unsubscribe) {      this.unsubscribe = this.parentSub        ? this.parentSub.addNestedSub(this.handleChangeWrapper)        /* provider的Subscription是不存在parentSub，所以此時(shí)trySubscribe 就會(huì)調(diào)用 store.subscribe   */        : this.store.subscribe(this.handleChangeWrapper)      this.listeners = createListenerCollection()    }  }  /* 取消訂閱 */  tryUnsubscribe() {    if (this.unsubscribe) {      this.unsubscribe()      this.unsubscribe = null      this.listeners.clear()
      this.listeners = nullListeners    }  }}

subscription.onStateChange = subscription.notifyNestedSubs

/* 向listeners發(fā)布通知 */notifyNestedSubs() {  this.listeners.notify()}

function createListenerCollection() {   /* batch 由getBatch得到的 unstable_batchedUpdates 方法 */  const batch = getBatch()  let first = null  let last = null
  return {    /* 清除當(dāng)前l(fā)isteners的所有l(wèi)istener */    clear() {      first = null      last = null    },    /* 派發(fā)更新 */    notify() {      batch(() => {        let listener = first        while (listener) {          listener.callback()          listener = listener.next        }      })    },    /* 獲取listeners的所有l(wèi)istener */    get() {      let listeners = []      let listener = first      while (listener) {        listeners.push(listener)        listener = listener.next      }      return listeners    },     /* 接收訂閱，將當(dāng)前的callback（handleChangeWrapper）存到當(dāng)前的鏈表中  */    subscribe(callback) {      let isSubscribed = true
      let listener = (last = {        callback,        next: null,        prev: last      })
      if (listener.prev) {        listener.prev.next = listener      } else {        first = listener      }      /* 取消當(dāng)前 handleChangeWrapper 的訂閱*/      return function unsubscribe() {        if (!isSubscribed || first === null) return        isSubscribed = false
        if (listener.next) {          listener.next.prev = listener.prev        } else {          last = listener.prev        }        if (listener.prev) {          listener.prev.next = listener.next        } else {          first = listener.next        }      }    }  }}

import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'setBatch(batch)

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?

const mapStateToProps = state => ({ todos: state.todos })

const mapDispatchToProps = dispatch => {  return {    increment: () => dispatch({ type: 'INCREMENT' }),    decrement: () => dispatch({ type: 'DECREMENT' }),    reset: () => dispatch({ type: 'RESET' })  }}

/** stateProps , state 映射到 props 中的內(nèi)容* dispatchProps， dispatch 映射到 props 中的內(nèi)容。* ownProps 組件本身的 props*/(stateProps, dispatchProps, ownProps) => Object

{  context?: Object,   // 自定義上下文  pure?: boolean, // 默認(rèn)為 true , 當(dāng)為 true 的時(shí)候 ，除了 mapStateToProps 和 props ,其他輸入或者state 改變，均不會(huì)更新組件。  areStatesEqual?: Function, // 當(dāng)pure true , 比較引進(jìn)store 中state值 是否和之前相等。(next: Object, prev: Object) => boolean  areOwnPropsEqual?: Function, // 當(dāng)pure true , 比較 props 值, 是否和之前相等。(next: Object, prev: Object) => boolean  areStatePropsEqual?: Function, // 當(dāng)pure true , 比較 mapStateToProps 后的值 是否和之前相等。(next: Object, prev: Object) => boolean  areMergedPropsEqual?: Function, // 當(dāng) pure 為 true 時(shí)， 比較 經(jīng)過(guò) mergeProps 合并后的值 ， 是否與之前等  (next: Object, prev: Object) => boolean  forwardRef?: boolean, //當(dāng)為true 時(shí)候,可以通過(guò)ref 獲取被connect包裹的組件實(shí)例。}

export function createConnect({  connectHOC = connectAdvanced,  mapStateToPropsFactories = defaultMapStateToPropsFactories,  mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,  mergePropsFactories = defaultMergePropsFactories,  selectorFactory = defaultSelectorFactory} = {}) {  return function connect(    mapStateToProps,    mapDispatchToProps,    mergeProps,    {      pure = true,      areStatesEqual = strictEqual,      areOwnPropsEqual = shallowEqual,      areStatePropsEqual = shallowEqual,      areMergedPropsEqual = shallowEqual,      ...extraOptions    } = {}) {        /* 經(jīng)過(guò)代理包裝后的 mapStateToProps */    const initMapStateToProps = match( mapStateToProps, mapStateToPropsFactories,'mapStateToProps' )    /* 經(jīng)過(guò)代理包裝后的 mapDispatchToProps */    const initMapDispatchToProps = match(  mapDispatchToProps, mapDispatchToPropsFactories,'mapDispatchToProps')     /* 經(jīng)過(guò)代理包裝后的 mergeProps */    const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')
    return connectHOC(selectorFactory, {           methodName: 'connect',      getDisplayName: name => `Connect(${name})`,      shouldHandleStateChanges: Boolean(mapStateToProps),      initMapStateToProps,      initMapDispatchToProps,      initMergeProps,      pure,      areStatesEqual,      areOwnPropsEqual,      areStatePropsEqual,      areMergedPropsEqual,      ...extraOptions    })  }}
export default /*#__PURE__*/ createConnect()

export function defaultMergeProps(stateProps, dispatchProps, ownProps) {  return { ...ownProps, ...stateProps, ...dispatchProps }}

export default function finalPropsSelectorFactory(  dispatch,  { initMapStateToProps, initMapDispatchToProps, initMergeProps, ...options }) {  // mapStateToProps mapDispatchToProps mergeProps 為真正connect 經(jīng)過(guò)一層代理的 proxy 函數(shù)  const mapStateToProps = initMapStateToProps(dispatch, options)  const mapDispatchToProps = initMapDispatchToProps(dispatch, options)  const mergeProps = initMergeProps(dispatch, options)
  const selectorFactory = options.pure ? pureFinalPropsSelectorFactory : impureFinalPropsSelectorFactory   // 返回一個(gè) 函數(shù)用于生成新的 props   return selectorFactory(    mapStateToProps,    mapDispatchToProps,    mergeProps,    dispatch,    options  )}

/** pure組件處理 ， 對(duì)比 props 是否發(fā)生變化 然后 合并props */export function pureFinalPropsSelectorFactory(  mapStateToProps,  mapDispatchToProps,  mergeProps,  dispatch,  { areStatesEqual, areOwnPropsEqual, areStatePropsEqual } //判斷 state prop 是否相等) {  let hasRunAtLeastOnce = false  let state  let ownProps  let stateProps  let dispatchProps  let mergedProps   /* 第一次 直接形成 ownProps  stateProps  dispatchProps 合并  形成新的 props */  function handleFirstCall(firstState, firstOwnProps) {    state = firstState    ownProps = firstOwnProps    stateProps = mapStateToProps(state, ownProps)    dispatchProps = mapDispatchToProps(dispatch, ownProps)    mergedProps = mergeProps(stateProps, dispatchProps, ownProps)    hasRunAtLeastOnce = true    return mergedProps  }    function handleNewPropsAndNewState() {    //  props 和 state 都改變  mergeProps   }
  function handleNewProps() {    // props 改變  mergeProps  }
  function handleNewState() {     // state 改變 mergeProps  }
  /*  不是第一次的情況 props 或者 store.state 發(fā)生改變的情況。*/  function handleSubsequentCalls(nextState, nextOwnProps) {      /* 判斷兩次 props 是否相等 */    const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps)       /* 判斷兩次 store.state 是否相等 */    const stateChanged = !areStatesEqual(nextState, state)    state = nextState    ownProps = nextOwnProps        if (propsChanged && stateChanged) return handleNewPropsAndNewState()    if (propsChanged) return handleNewProps()    if (stateChanged) return handleNewState()    return mergedProps  }
  return function pureFinalPropsSelector(nextState, nextOwnProps) {    return hasRunAtLeastOnce      ? handleSubsequentCalls(nextState, nextOwnProps)      : handleFirstCall(nextState, nextOwnProps)  }}

const mapStateToProp = (store) => ({ userInfo: store.root.userInfo })
function Index(){    /* ..... */    return <div> { /* .... */ } </div>}export default connect(mapStateToProp)(Index)

const mapStateToProp = (store) => ({ userInfo: store.root.userInfo })
@connect(mapStateToProp)class Index extends React.Component{    /* .... */    render(){        return <div> { /* .... */ } </div>    }}

export default function connectAdvanced(  selectorFactory, // 每次 props,state改變執(zhí)行 ，用于生成新的 props。  {    getDisplayName = name => `ConnectAdvanced(${name})`,    //可能被包裝函數(shù)（如connect（））重寫    methodName = 'connectAdvanced',    //如果定義了，則傳遞給包裝元素的屬性的名稱，指示要呈現(xiàn)的調(diào)用。用于監(jiān)視r(shí)eact devtools中不必要的重新渲染。    renderCountProp = undefined,    shouldHandleStateChanges = true,  //確定此HOC是否訂閱存儲(chǔ)更改    storeKey = 'store',    withRef = false,    forwardRef = false, // 是否 用 forwarRef 模式    context = ReactReduxContext,// Provider 保存的上下文    ...connectOptions  } = {}) {  /* ReactReduxContext 就是store存在的context */  const Context = context   /* WrappedComponent 為connect 包裹的組件本身  */     return  function wrapWithConnect(WrappedComponent){      // WrappedComponent 被 connect 的業(yè)務(wù)組件本身  }}

// 我們可以講下面的表達(dá)式分解connect(mapStateToProp)(Index)
// 執(zhí)行 connectconnect(mapStateToProp) //返回  connectAdvanced()//返回HOCwrapWithConnect

function wrapWithConnect(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) {      // 合并函數(shù) mergeprops 得到最新的props      return selectorFactory(store.dispatch, selectorFactoryOptions)    }    //判斷是否是pure純組件模式 如果是 將用 useMemo 提升性能    const usePureOnlyMemo = pure ? useMemo : callback => callback()    // 負(fù)責(zé)更新的容器子組件    function ConnectFunction (props){        // props 為 業(yè)務(wù)組件 真正的 props     }    const Connect = pure ? React.memo(ConnectFunction) : ConnectFunction      Connect.WrappedComponent = WrappedComponent    Connect.displayName = displayName    /* forwardRef */    if (forwardRef) {      const forwarded = React.forwardRef(function forwardConnectRef(        props,        ref) {        return <Connect {...props} reactReduxForwardedRef={ref} />      })        forwarded.displayName = displayName      forwarded.WrappedComponent = WrappedComponent      return hoistStatics(forwarded, WrappedComponent)    }      return hoistStatics(Connect, WrappedComponent)  }}

const mapStateToProp = (store) => ({ userInfo: store.root.userInfo })
class Child extends React.Component{    render(){        /* ... */    }}export default connect(mapStateToProp)(Child)

class Father extends React.Compoent{    child = null     render(){        return <Child ref={(cur)=> this.child = cur }  { /* 獲取到的不是`Child`本身 */ } />    }}

  function ConnectFunction(props) {      /* TODO:  第一步 把 context ForwardedRef props 取出來(lái) */      const [        reactReduxForwardedRef,        wrapperProps // props 傳遞的props      ] = useMemo(() => {               const { reactReduxForwardedRef, ...wrapperProps } = props        return [reactReduxForwardedRef, wrapperProps]      }, [props])           // 獲取 context內(nèi)容 里面含有  redux 中store 和 subscription      const contextValue = useContext(Context)
      //TODO: 判斷 store 是否來(lái)此 props  didStoreComeFromProps ,正常情況下 ，prop 中是不存在 store 所以  didStoreComeFromProps = false      const didStoreComeFromProps =        Boolean(props.store) &&        Boolean(props.store.getState) &&        Boolean(props.store.dispatch)      const didStoreComeFromContext =        Boolean(contextValue) && Boolean(contextValue.store)        // 獲取 redux 中 store      const store = didStoreComeFromProps ? props.store : contextValue.store       // 返回merge函數(shù) 用于生成真正傳給子組件 props      const childPropsSelector = useMemo(() => {        return createChildSelector(store)      }, [store])

      // TODO:  第二步  subscription 監(jiān)聽者實(shí)例        const [subscription, notifyNestedSubs] = useMemo(() => {          // 如果沒(méi)有訂閱更新，那么直接返回。        if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY          const subscription = new Subscription(          store,          didStoreComeFromProps ? null : contextValue.subscription // 和 上級(jí) `subscription` 建立起關(guān)系。this.parentSub = contextValue.subscription        )        // notifyNestedSubs 觸發(fā) noticy 所有子代 listener 監(jiān)聽者 -> 觸發(fā)batch方法,觸發(fā) batchupdate方法 ,批量更新        const notifyNestedSubs = subscription.notifyNestedSubs.bind(          subscription        )          return [subscription, notifyNestedSubs]      }, [store, didStoreComeFromProps, contextValue])
      /*  創(chuàng)建出一個(gè)新的contextValue ,把父級(jí)的 subscription 換成自己的 subscription   */      const overriddenContextValue = useMemo(() => {           if (didStoreComeFromProps) {           return contextValue        }        return {          ...contextValue,          subscription        }      }, [didStoreComeFromProps, contextValue, subscription])      const [        [previousStateUpdateResult],        forceComponentUpdateDispatch  /*  */      ] = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates)  
      // TODO: 第三步       const lastChildProps = useRef() //保存上一次 合并過(guò)的 props信息（經(jīng)過(guò) ownprops ,stateProps , dispatchProps 合并過(guò)的 ）      const lastWrapperProps = useRef(wrapperProps) // 保存本次上下文執(zhí)行 業(yè)務(wù)組件的 props       const childPropsFromStoreUpdate = useRef()      const renderIsScheduled = useRef(false) // 當(dāng)前組件是否處于渲染階段      // actualChildProps 為當(dāng)前真正處理過(guò)后，經(jīng)過(guò)合并的 props      const actualChildProps = usePureOnlyMemo(() => {          // 調(diào)用 mergeProps 進(jìn)行合并，返回合并后的最新 porps        return childPropsSelector(store.getState(), wrapperProps)      }, [store, previousStateUpdateResult, wrapperProps])
     /* 負(fù)責(zé)更新緩存變量，方便下一次更新的時(shí)候比較 */      useEffect(()=>{        captureWrapperProps(...[            lastWrapperProps,            lastChildProps,            renderIsScheduled,            wrapperProps,            actualChildProps,            childPropsFromStoreUpdate,            notifyNestedSubs         ])      })           useEffect(()=>{          subscribeUpdates(...[          shouldHandleStateChanges,          store,          subscription,          childPropsSelector,          lastWrapperProps,          lastChildProps,          renderIsScheduled,          childPropsFromStoreUpdate,          notifyNestedSubs,          forceComponentUpdateDispatch         ])      },[store, subscription, childPropsSelector])


      // TODO: 第四步：reactReduxForwardedRef 是處理父級(jí)元素是否含有 forwardRef 的情況 這里可以忽略。      const renderedWrappedComponent = useMemo(        () => (          <WrappedComponent            {...actualChildProps}            ref={reactReduxForwardedRef}          />        ),        [reactReduxForwardedRef, WrappedComponent, actualChildProps]      )      const renderedChild = useMemo(() => {        //shouldHandleStateChanges 來(lái)源 connect是否有第一個(gè)參數(shù)        if (shouldHandleStateChanges) {          return (            // ContextToUse 傳遞 context             <ContextToUse.Provider value={overriddenContextValue}>              {renderedWrappedComponent}            </ContextToUse.Provider>          )        }          return renderedWrappedComponent      }, [ContextToUse, renderedWrappedComponent, overriddenContextValue])        return renderedChild    }

//獲取包裝的props function captureWrapperProps(  lastWrapperProps,  lastChildProps,  renderIsScheduled,  wrapperProps,  actualChildProps,  childPropsFromStoreUpdate,  notifyNestedSubs) {  lastWrapperProps.current = wrapperProps  //子props   lastChildProps.current = actualChildProps //經(jīng)過(guò) megeprops 之后形成的 prop  renderIsScheduled.current = false  // 當(dāng)前組件渲染完成}

function subscribeUpdates(  shouldHandleStateChanges,  store,  subscription,  childPropsSelector,  lastWrapperProps,  //子props   lastChildProps, //經(jīng)過(guò) megeprops 之后形成的 prop  renderIsScheduled,  childPropsFromStoreUpdate,  notifyNestedSubs,  forceComponentUpdateDispatch) {  if (!shouldHandleStateChanges) return
   // 捕獲值以檢查此組件是否卸載以及何時(shí)卸載  let didUnsubscribe = false  let lastThrownError = null   //store更新訂閱傳播到此組件時(shí)，運(yùn)行此回調(diào)  const checkForUpdates = ()=>{      //....  }  subscription.onStateChange = checkForUpdates  //開啟訂閱者 ，當(dāng)前是被connect 包轉(zhuǎn)的情況 會(huì)把 當(dāng)前的 checkForceUpdate 放在存入 父元素的addNestedSub中。  subscription.trySubscribe()  //在第一次呈現(xiàn)之后從存儲(chǔ)中提取數(shù)據(jù)，以防存儲(chǔ)從我們開始就改變了。  checkForUpdates()  /* 卸載訂閱起 */  const unsubscribeWrapper = () => {    didUnsubscribe = true    subscription.tryUnsubscribe()    subscription.onStateChange = null  }
  return unsubscribeWrapper}

  //store更新訂閱傳播到此組件時(shí)，運(yùn)行此回調(diào)  const checkForUpdates = () => {    if (didUnsubscribe) {      //如果寫在了      return    }     // 獲取 store 里state    const latestStoreState = store.getState()q    let newChildProps, error    try {      /* 得到最新的 props */      newChildProps = childPropsSelector(        latestStoreState,        lastWrapperProps.current      )    }     //如果新的合并的 props沒(méi)有更改，則此處不做任何操作-層疊訂閱更新    if (newChildProps === lastChildProps.current) {       if (!renderIsScheduled.current) {          notifyNestedSubs() /* 通知子代 subscription 觸發(fā) checkForUpdates 來(lái)檢查是否需要更新。*/      }    } else {      lastChildProps.current = newChildProps      childPropsFromStoreUpdate.current = newChildProps      renderIsScheduled.current = true      // 此情況 可能考慮到 代碼運(yùn)行到這里 又發(fā)生了 props 更新 所以觸發(fā)一個(gè) reducer 來(lái)促使組件更新。      forceComponentUpdateDispatch({        type: 'STORE_UPDATED',        payload: {          error        }      })    }  }

const renderedWrappedComponent = useMemo(    () => (        <WrappedComponent        {...actualChildProps}        ref={reactReduxForwardedRef}        />    ),    [reactReduxForwardedRef, WrappedComponent, actualChildProps])