redux的原始碼解析

一、 redux出現的動機

1. Javascript 需要管理比任何時候都要多的state
2. state 在什麼時候，由於什麼原因，如何變化已然不受控制。
3. 來自前端開發領域的新需求
4. 我們總是將兩個難以理清的概念混淆在一起：變化和非同步。
5. Redux 檢視讓state 的變化變得可預測。

二、 核心概念

 1. 想要更新state中的資料，你需要發起一個action,Action就是一個普通的JavaScript 物件用來描述發生了什麼。為了把actin 和state串起來開發一些函式，就是redcer。

三、 三大原則

1. 單一資料來源 整個應用的state被儲存在一棵objecttree中， 並且這個 object tree 只 存在於一個唯一的store 中。

2. state 是隻讀的，唯一改變state的方法就是觸發action，action 是一個用於描述已發 生事件的普通物件。（確保了檢視和網路請求不能直接修改state，只能表達想要修改的意圖）

3. 使用純函式來執行修改為了描述action如何改變state tree ，你需要編寫reducers。

四、 原始碼解析

1. 入口檔案index.js

import createStore from `./createStore`
import combineReducers from `./combineReducers`
import bindActionCreators from `./bindActionCreators`
import applyMiddleware from `./applyMiddleware`
import compose from `./compose`
import warning from `./utils/warning`
import __DO_NOT_USE__ActionTypes from `./utils/actionTypes`

/*
 * This is a dummy function to check if the function name has been altered by minification.
 * If the function has been minified and NODE_ENV !== `production`, warn the user.
 */

// 判斷檔案是否被壓縮了
function isCrushed() {}

if (
  process.env.NODE_ENV !== `production` &&
  typeof isCrushed.name === `string` &&
  isCrushed.name !== `isCrushed`
) {
  warning(
    `You are currently using minified code outside of NODE_ENV === "production". ` +
      `This means that you are running a slower development build of Redux. ` +
      `You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ` +
      `or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ` +
      `to ensure you have the correct code for your production build.`
  )
}
/*
  從入口檔案可以看出 redux 對外暴露了5個API。
  createStore ,
  combineReducers,
  bindActionCreators,
 applyMiddleware,
 compose,
 */
export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}

2. 對外暴露的第一個API createStore => createStore.js

import $$observable from `symbol-observable`

import ActionTypes from `./utils/actionTypes`
import isPlainObject from `./utils/isPlainObject`

/**
 * Creates a Redux store that holds the state tree.
 * The only way to change the data in the store is to call `dispatch()` on it.
 *
 * There should only be a single store in your app. To specify how different
 * parts of the state tree respond to actions, you may combine several reducers
 * into a single reducer function by using `combineReducers`.
 *
 * @param {Function} reducer A function that returns the next state tree, given
 * the current state tree and the action to handle.
 *
 * @param {any} [preloadedState] The initial state. You may optionally specify it
 * to hydrate the state from the server in universal apps, or to restore a
 * previously serialized user session.
 * If you use `combineReducers` to produce the root reducer function, this must be
 * an object with the same shape as `combineReducers` keys.
 *
 * @param {Function} [enhancer] The store enhancer. You may optionally specify it
 * to enhance the store with third-party capabilities such as middleware,
 * time travel, persistence, etc. The only store enhancer that ships with Redux
 * is `applyMiddleware()`.
 *
 * @returns {Store} A Redux store that lets you read the state, dispatch actions
 * and subscribe to changes.
 */
/*
  從原始碼上可以看出 createStore 是一個函式。接收三個引數 reducer, preloadeState, enhancer
 */
export default function createStore(reducer, preloadedState, enhancer) {
  // 如果 preloadeState 是一個函式 && enhancer未定義preloadeState 和 enhancer交換位置
  if (typeof preloadedState === `function` && typeof enhancer === `undefined`) {
    enhancer = preloadedState
    preloadedState = undefined
  }
  //
  if (typeof enhancer !== `undefined`) {
    if (typeof enhancer !== `function`) {
      throw new Error(`Expected the enhancer to be a function.`)
    }
    // 上面兩個判斷是為了確保 enchancer是個函式
    return enhancer(createStore)(reducer, preloadedState)
  }

  // reducer必須是 個函式，如果不是個函式給出友好的 提示
  if (typeof reducer !== `function`) {
    throw new Error(`Expected the reducer to be a function.`)
  }

  let currentReducer = reducer    // 把reducer 暫存起來
  let currentState = preloadedState // 把preloadeState暫存起來
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false   //判斷是否正處於dispatch中

  // 如果 nextListeners 和 currrentListeners 都指向一個記憶體空間的時候， 深複製一份出來。確保兩個之間不會相互影響。
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  /**
   * Reads the state tree managed by the store.
   *
   * @returns {any} The current state tree of your application.
   */
  // 獲取目前的 state的值。
  function getState() {
    if (isDispatching) {
      throw new Error(
        `You may not call store.getState() while the reducer is executing. ` +
          `The reducer has already received the state as an argument. ` +
          `Pass it down from the top reducer instead of reading it from the store.`
      )
    }

    return currentState
  }

  /**
   * Adds a change listener. It will be called any time an action is dispatched,
   * and some part of the state tree may potentially have changed. You may then
   * call `getState()` to read the current state tree inside the callback.
   *
   * You may call `dispatch()` from a change listener, with the following
   * caveats:
   *
   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
   * If you subscribe or unsubscribe while the listeners are being invoked, this
   * will not have any effect on the `dispatch()` that is currently in progress.
   * However, the next `dispatch()` call, whether nested or not, will use a more
   * recent snapshot of the subscription list.
   *
   * 2. The listener should not expect to see all state changes, as the state
   * might have been updated multiple times during a nested `dispatch()` before
   * the listener is called. It is, however, guaranteed that all subscribers
   * registered before the `dispatch()` started will be called with the latest
   * state by the time it exits.
   *
   * @param {Function} listener A callback to be invoked on every dispatch.
   * @returns {Function} A function to remove this change listener.
   */
  // 經典的訂閱函式
  function subscribe(listener) {
    if (typeof listener !== `function`) {
      throw new Error(`Expected the listener to be a function.`)
    }

    if (isDispatching) {
      throw new Error(
        `You may not call store.subscribe() while the reducer is executing. ` +
          `If you would like to be notified after the store has been updated, subscribe from a ` +
          `component and invoke store.getState() in the callback to access the latest state. ` +
          `See https://redux.js.org/api-reference/store#subscribe(listener) for more details.`
      )
    }
    // 閉包的經典應用 每次訂閱一個事件的時候，都有一個內部狀態， 用於後續的取消訂閱
    let isSubscribed = true
    // 深複製一份監聽物件
    ensureCanMutateNextListeners()
    // 把每個監聽物件都放置於一個陣列中，儲存下來，（精華之處，對閉包的使用登峰造極）
    nextListeners.push(listener)
    // 當註冊一個監聽事件的返回一個函式，呼叫這個函式可以取消訂閱，具體操作方法就是從監聽的陣列中移出掉。
    return function unsubscribe() {
      // 防止重複取消訂閱
      if (!isSubscribed) {
        return
      }

      if (isDispatching) {
        throw new Error(
          `You may not unsubscribe from a store listener while the reducer is executing. ` +
            `See https://redux.js.org/api-reference/store#subscribe(listener) for more details.`
        )
      }
      // 對應上面那條，防止重複取消訂閱
      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
        // 刪除陣列中某一項的方法 splice
      nextListeners.splice(index, 1)
    }
  }

  /**
   * Dispatches an action. It is the only way to trigger a state change.
   *
   * The `reducer` function, used to create the store, will be called with the
   * current state tree and the given `action`. Its return value will
   * be considered the **next** state of the tree, and the change listeners
   * will be notified.
   *
   * The base implementation only supports plain object actions. If you want to
   * dispatch a Promise, an Observable, a thunk, or something else, you need to
   * wrap your store creating function into the corresponding middleware. For
   * example, see the documentation for the `redux-thunk` package. Even the
   * middleware will eventually dispatch plain object actions using this method.
   *
   * @param {Object} action A plain object representing “what changed”. It is
   * a good idea to keep actions serializable so you can record and replay user
   * sessions, or use the time travelling `redux-devtools`. An action must have
   * a `type` property which may not be `undefined`. It is a good idea to use
   * string constants for action types.
   *
   * @returns {Object} For convenience, the same action object you dispatched.
   *
   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
   * return something else (for example, a Promise you can await).
   */
  // 派發一個事件
  function dispatch(action) {
    // p、判斷action是否是個物件
    if (!isPlainObject(action)) {
      throw new Error(
        `Actions must be plain objects. ` +
          `Use custom middleware for async actions.`
      )
    }
    // 嚴格控制 action 的書寫格式  { type: `INCREMENT`}
    if (typeof action.type === `undefined`) {
      throw new Error(
        `Actions may not have an undefined "type" property. ` +
          `Have you misspelled a constant?`
      )
    }

    if (isDispatching) {
      throw new Error(`Reducers may not dispatch actions.`)
    }
    // isDipatching 也是閉包的經典用法
      /*
        觸發 dispatch的時候 把 isDispatching 改為 true。 照應全篇中對 dispatching 正在觸發的時候的判斷
        finally 執行完畢的時候 置為 false
       */
    try {
      isDispatching = true
      // 獲取最新 的state 值。 currentState 經典之處閉包
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    // 對監聽物件從新賦值 其實裡面每個listener都是一個函式。 於subscribe相對應
    // 當每發生一個dispatch 事件的時候， 都迴圈呼叫,觸發監聽事件
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

  /**
   * Replaces the reducer currently used by the store to calculate the state.
   *
   * You might need this if your app implements code splitting and you want to
   * load some of the reducers dynamically. You might also need this if you
   * implement a hot reloading mechanism for Redux.
   *
   * @param {Function} nextReducer The reducer for the store to use instead.
   * @returns {void}
   */
  // 替換 reducer 用 新的 reducer替換以前的reducer 引數同樣必須是函式
  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== `function`) {
      throw new Error(`Expected the nextReducer to be a function.`)
    }

    currentReducer = nextReducer
    dispatch({ type: ActionTypes.REPLACE })
  }

  /**
   * Interoperability point for observable/reactive libraries.
   * @returns {observable} A minimal observable of state changes.
   * For more information, see the observable proposal:
   * https://github.com/tc39/proposal-observable
   */
  // 觀察模式
  function observable() {
    const outerSubscribe = subscribe
    return {
      /**
       * The minimal observable subscription method.
       * @param {Object} observer Any object that can be used as an observer.
       * The observer object should have a `next` method.
       * @returns {subscription} An object with an `unsubscribe` method that can
       * be used to unsubscribe the observable from the store, and prevent further
       * emission of values from the observable.
       */
      subscribe(observer) {
        if (typeof observer !== `object` || observer === null) {
          throw new TypeError(`Expected the observer to be an object.`)
        }

        function observeState() {
          if (observer.next) {
            observer.next(getState())
          }
        }

        observeState()
        const unsubscribe = outerSubscribe(observeState)
        return { unsubscribe }
      },

      [$$observable]() {
        return this
      }
    }
  }

  // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates
  // the initial state tree.
    // 觸發一state 樹
  dispatch({ type: ActionTypes.INIT })
  /*
     由此可以看出 呼叫 createStore(); 後。對外暴露的方法
     1. dispatch
     2. subscribe
     3. getState
     4. replaceReducer
     5.觀察模式
     const store = createStore(reducer, preloadedState, enchancer);
     store.dispatch(action);
     store.getState(); // 為什麼這個方法能夠獲得 state的值。因為 currentState 的閉包實現。
     store.subscribe(() => console.log(store.getState()));
     store.replaceReducer(reducer);
     總結：縱觀createStore方法的實現，其實都是建立在閉包的基礎之上。可謂是把閉包用到了極致。
   */
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

3. combineReducers.js

import ActionTypes from `./utils/actionTypes`
import warning from `./utils/warning`
import isPlainObject from `./utils/isPlainObject`

function getUndefinedStateErrorMessage(key, action) {
  const actionType = action && action.type
  const actionDescription =
    (actionType && `action "${String(actionType)}"`) || `an action`

  return (
    `Given ${actionDescription}, reducer "${key}" returned undefined. ` +
    `To ignore an action, you must explicitly return the previous state. ` +
    `If you want this reducer to hold no value, you can return null instead of undefined.`
  )
}

function getUnexpectedStateShapeWarningMessage(
  inputState,
  reducers,
  action,
  unexpectedKeyCache
) {
  const reducerKeys = Object.keys(reducers)
  const argumentName =
    action && action.type === ActionTypes.INIT
      ? `preloadedState argument passed to createStore`
      : `previous state received by the reducer`

  if (reducerKeys.length === 0) {
    return (
      `Store does not have a valid reducer. Make sure the argument passed ` +
      `to combineReducers is an object whose values are reducers.`
    )
  }

  if (!isPlainObject(inputState)) {
    return (
      `The ${argumentName} has unexpected type of "` +
      {}.toString.call(inputState).match(/s([a-z|A-Z]+)/)[1] +
      `". Expected argument to be an object with the following ` +
      `keys: "${reducerKeys.join(`", "`)}"`
    )
  }

  const unexpectedKeys = Object.keys(inputState).filter(
    key => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]
  )

  unexpectedKeys.forEach(key => {
    unexpectedKeyCache[key] = true
  })

  if (action && action.type === ActionTypes.REPLACE) return

  if (unexpectedKeys.length > 0) {
    return (
      `Unexpected ${unexpectedKeys.length > 1 ? `keys` : `key`} ` +
      `"${unexpectedKeys.join(`", "`)}" found in ${argumentName}. ` +
      `Expected to find one of the known reducer keys instead: ` +
      `"${reducerKeys.join(`", "`)}". Unexpected keys will be ignored.`
    )
  }
}

function assertReducerShape(reducers) {
  Object.keys(reducers).forEach(key => {
    const reducer = reducers[key]
    const initialState = reducer(undefined, { type: ActionTypes.INIT })

    if (typeof initialState === `undefined`) {
      throw new Error(
        `Reducer "${key}" returned undefined during initialization. ` +
          `If the state passed to the reducer is undefined, you must ` +
          `explicitly return the initial state. The initial state may ` +
          `not be undefined. If you don`t want to set a value for this reducer, ` +
          `you can use null instead of undefined.`
      )
    }

    if (
      typeof reducer(undefined, {
        type: ActionTypes.PROBE_UNKNOWN_ACTION()
      }) === `undefined`
    ) {
      throw new Error(
        `Reducer "${key}" returned undefined when probed with a random type. ` +
          `Don`t try to handle ${
            ActionTypes.INIT
          } or other actions in "redux/*" ` +
          `namespace. They are considered private. Instead, you must return the ` +
          `current state for any unknown actions, unless it is undefined, ` +
          `in which case you must return the initial state, regardless of the ` +
          `action type. The initial state may not be undefined, but can be null.`
      )
    }
  })
}

/**
 * Turns an object whose values are different reducer functions, into a single
 * reducer function. It will call every child reducer, and gather their results
 * into a single state object, whose keys correspond to the keys of the passed
 * reducer functions.
 *
 * @param {Object} reducers An object whose values correspond to different
 * reducer functions that need to be combined into one. One handy way to obtain
 * it is to use ES6 `import * as reducers` syntax. The reducers may never return
 * undefined for any action. Instead, they should return their initial state
 * if the state passed to them was undefined, and the current state for any
 * unrecognized action.
 *
 * @returns {Function} A reducer function that invokes every reducer inside the
 * passed object, and builds a state object with the same shape.
 */

/*
  combineReducers 顧名思義就是合併reduces的一個方法。
  1. 為了專案便於維護與管理我們就需要拆按模組拆分reducers。
  2. 而combineReducers就是為了解決這個的問題的。

 */
export default function combineReducers(reducers) { // 引數reducers 是一個物件
  const reducerKeys = Object.keys(reducers) // 獲取reducers的k
  const finalReducers = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    if (process.env.NODE_ENV !== `production`) {
      if (typeof reducers[key] === `undefined`) {
        warning(`No reducer provided for key "${key}"`)
      }
    }

    // 深複製一份reducers出來， 防止後續操作出現不可控因素
    if (typeof reducers[key] === `function`) {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  let unexpectedKeyCache
  if (process.env.NODE_ENV !== `production`) {
    unexpectedKeyCache = {}
  }

  let shapeAssertionError
  try {
    assertReducerShape(finalReducers)
  } catch (e) {
    shapeAssertionError = e
  }
  // 閉包的運用， 把合併的 reducer儲存下來。
  return function combination(state = {}, action) {
    if (shapeAssertionError) {
      throw shapeAssertionError
    }

    if (process.env.NODE_ENV !== `production`) {
      const warningMessage = getUnexpectedStateShapeWarningMessage(
        state,
        finalReducers,
        action,
        unexpectedKeyCache
      )
      if (warningMessage) {
        warning(warningMessage)
      }
    }

    let hasChanged = false
    const nextState = {}
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      // 把合併的時候的key值作為Key值為標準。 在迴圈遍歷的時候取出對應的 reducers 觸發 reducer函式。
      /*
        其實對應的createStore.js中的
        try {
          isDispatching = true
          // 獲取最新 的state 值。 currentState 經典之處閉包
          currentState = currentReducer(currentState, action)
        } finally {
          isDispatching = false
        }  
       */
      const nextStateForKey = reducer(previousStateForKey, action)
      if (typeof nextStateForKey === `undefined`) {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}
/**
 * 使用方法
 * const reducers = combineReducers({ reducer1, reducer2 });
 * const store = createStore(reducers, preloadedState, enchancer);
 */

4. bindActionCreators.js

// 主要這個函式
function bindActionCreator(actionCreator, dispatch) {
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}

/**
 * Turns an object whose values are action creators, into an object with the
 * same keys, but with every function wrapped into a `dispatch` call so they
 * may be invoked directly. This is just a convenience method, as you can call
 * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
 *
 * For convenience, you can also pass a single function as the first argument,
 * and get a function in return.
 *
 * @param {Function|Object} actionCreators An object whose values are action
 * creator functions. One handy way to obtain it is to use ES6 `import * as`
 * syntax. You may also pass a single function.
 *
 * @param {Function} dispatch The `dispatch` function available on your Redux
 * store.
 *
 * @returns {Function|Object} The object mimicking the original object, but with
 * every action creator wrapped into the `dispatch` call. If you passed a
 * function as `actionCreators`, the return value will also be a single
 * function.
 */

/*
   接受兩個引數，一個action creator， 一個是 value的 action creator的物件。
   dispatch 。 一個由 Store 實列 提供的dispatch的函式。 看createStore.js原始碼就可以做知道其中原理。
 */
export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === `function`) {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== `object` || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${
        actionCreators === null ? `null` : typeof actionCreators
      }. ` +
        `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === `function`) {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  /*
     一個與原物件類似的物件，只不過這個物件的 value 都是會直接 dispatch 原 action creator 返回的結果的函式。
     如果傳入一個單獨的函式作為 actionCreators，那麼返回的結果也是一個單獨的函式。
     本來觸發 action 的方法是 store.dispatch(action);
     經過這個方法封裝後 可以直接呼叫函式名字
     aa(`引數`);
   */
  return boundActionCreators
}

5. applyMiddleware.js  在redux 中最難理解的一個函式。

import compose from `./compose`
import createStore from "./createStore";

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 *
 * See `redux-thunk` package as an example of the Redux middleware.
 *
 * Because middleware is potentially asynchronous, this should be the first
 * store enhancer in the composition chain.
 *
 * Note that each middleware will be given the `dispatch` and `getState` functions
 * as named arguments.
 *
 * @param {...Function} middlewares The middleware chain to be applied.
 * @returns {Function} A store enhancer applying the middleware.
 */
// 通過看原始碼知道 applyMiddleware返回一個高階函式。
/*
  applyMiddleware的使用地方
  const store = createStore(reducer,{}, applyMiddleware(...middlewares));
  
  由此可以看出 applyMiddlewares 的使用方法主要是和 createStore.js 中 createStore方法的第三個引數對應。翻開原始碼
  if (typeof enhancer !== `undefined`) {
    if (typeof enhancer !== `function`) {
      throw new Error(`Expected the enhancer to be a function.`)
    }
    // 上面兩個判斷是為了確保 enchancer是個函式
    return enhancer(createStore)(reducer, preloadedState)
  }
 */
export default function applyMiddleware(...middlewares) {
  // createSotre 中 的第三個引數 enhancer
  return createStore => (...args) => {
    // 通過對應的程式碼可以發現其實 ...aregs 對應的是  reducer, preloadedState
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this dispatch.`
      )
    }
      // 定義中介軟體必須滿足的條件。 API   getState, dispatch();
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)  
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))

      /**
       * 

      export default function compose(...funcs) {
          if (funcs.length === 0) {
              return arg => arg
          }

          if (funcs.length === 1) {
              return funcs[0]
          }

          return funcs.reduce((a, b) => (...args) => a(b(...args)))
      }
       compose函式 主要是 利用陣列 reducer 方法對引數的處理。

  */
      dispatch = compose(...chain)(store.dispatch)
    // 通過這個返回值我們可以知道 在createStore.js中enchancer的返回值。
    return {
      ...store,
      dispatch
    }
  }
}

/**
 *  applyMiddlewares函式比較難理解。 多看幾個中介軟體，比如 logger 和 redux-thunk 等。對該方法能夠更深的理解。
 */

五、 redux的總結

通過閱讀redux的原始碼，印象最深的就是如何手動寫個訂閱模式，資料改變的時候，如何觸發所有監聽事件。閉包的運用登峰造極。其中最難的兩個函式 applyMiddlewares 和compose.js 還需要細細體會。沒有真正領悟到其精華之處。

謝謝大家。