对比 React 探究 Vue3 “自带” 的状态管理

Redux 的状态管理

Redux 状态管理的本质就是实现了可订阅变化和发起变化的全局单一数据源，一种封装了的全局变量，Store。

申请修改状态：dispatch (type, payload)

实际修改状态：reducer (PS, f) NS 可以通过 reducer 生成次态

感知状态变化：

• 可以通过 connect 追踪状态变化：

export default connect((state) => ({
  tmpState: filterFunc(state)
}))(ComponentListener);

• 可以通过 reducer 获取现态

• 通过 mapStateToProps 将状态放到 props 中使用

• componentWillReceiveProps（已经抛弃）

• componentDidUpdate

  componentDidUpdate(prevProps) {
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }
  

• 执行副作用（例如，数据提取或动画）以响应 props 中的更改：componentDidUpdate
• 仅在 prop 更改时重新计算某些数据：使用 memoization helper。
• subscribe (listener)：监听一切 dispatch action

Vuex 的状态管理

申请修改状态：Action 提交 mutation

实际修改状态：mutation 内部实现

感知状态变化：

• 通过全局变量获取

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

• 通过 mapState 获取

React Hook 的状态管理

使用 useContext，让需要状态的组件都对其依赖

申请修改状态：调用 useXXX 导出的函数实现

实际修改状态：useXXX 内部通过 setState 实现

感知状态变化：通过 useXXX 内部的 useState 实现

Vue3 Hook 的状态管理

// todo