从源码深度理解 `React-Redux` 中 `Connect` 的工作原理（下）

2023-10-26 16:32:42

ConnectAdvanced：连接器的高阶组件

ConnectAdvanced 是一个用于将 Redux 状态和 dispatch 函数与 React 组件进行连接的高阶组件。它接受两个参数：mapStateToProps 和 mapDispatchToProps，并返回一个新的组件，该组件能够访问 Redux 状态和 dispatch 函数。

ConnectAdvanced 的实现主要涉及以下几个步骤：

检查 mapStateToProps 和 mapDispatchToProps 的类型，并抛出错误信息，如果它们不是函数。
创建一个 connectHOC 函数，该函数将 mapStateToProps 和 mapDispatchToProps 应用于给定的 React 组件，并返回一个新的组件。
创建一个 selectorFactory 函数，该函数将 mapStateToProps 应用于 Redux 状态，并返回一个新的状态对象。
创建一个 subscriptionKey，该键用于唯一标识组件的订阅。
将组件连接到 Redux 存储，并订阅 Redux 状态的变化。
返回 connectHOC 函数，该函数可以被其他组件使用来连接到 Redux 状态。

`ConnectFunction`：连接器的核心逻辑

ConnectFunction 是 Connect 函数的核心逻辑，它接受两个参数：mapStateToProps 和 mapDispatchToProps，并返回一个新的组件，该组件能够访问 Redux 状态和 dispatch 函数。

ConnectFunction 的实现主要涉及以下几个步骤：

检查 mapStateToProps 和 mapDispatchToProps 的类型，并抛出错误信息，如果它们不是函数。
创建一个 WrappedComponent 组件，该组件将 mapStateToProps 和 mapDispatchToProps 应用于给定的 React 组件，并返回一个新的组件。
返回 WrappedComponent 组件，该组件可以被其他组件使用来连接到 Redux 状态。

`checkForUpdates`：检查组件更新

checkForUpdates 函数用于检查组件是否需要更新。它接受两个参数：component 和 nextState，并返回一个布尔值，指示组件是否需要更新。

checkForUpdates 函数的实现主要涉及以下几个步骤：

比较组件的当前状态和新的状态，如果它们不同，则返回 true，否则返回 false。
如果组件订阅了 Redux 状态的变化，则检查 Redux 状态是否已更改。如果 Redux 状态已更改，则返回 true，否则返回 false。

总结

通过分析 ConnectAdvanced、ConnectFunction 和 checkForUpdates 函数，我们深入了解了 React-Redux 中 Connect 函数的内部工作原理。Connect 函数作为一个高阶组件，通过将 mapStateToProps 和 mapDispatchToProps 应用于 React 组件，实现了组件与 Redux 状态的连接。ConnectAdvanced 函数负责创建高阶组件，而 ConnectFunction 函数负责实现高阶组件的核心逻辑。checkForUpdates 函数用于检查组件是否需要更新。