如何在vuex中使用react

本篇文章给大家分享的是有关如何在vuex中使用react，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

响应式数据观测系统

vue的一大特色就是响应式数据观测系统，它可以在get数据时收集依赖，在set数据时触发更新。vuex借助于vue的数据观测系统，可以轻松的收集数据依赖，并且依赖可以精细到组件的粒度，也就是说某一状态改变时，只有依赖到这一状态的组件才会触发rerender，这样看来redux体系就比较傻，只要提交action，就会从根组件rerender（react-redux内部自动进行shouldCompoentUpdate判断）。

上图来自于vue官网对vuex架构的说明，链接。

上图中的component是vue component，只要vue component执行render，那么vuex的数据响应系统就可以自动的收集依赖，当状态改变时，依赖于此状态的组件就会重新渲染。既然我们要实现的是一个类vuex的状态管理工具，即支持以get的方式收集依赖，以set的方式触发更新，所以reux利用了vue的响应式数据观测系统，正所谓前人种树，后人乘凉。

如何收集依赖

我们已经有了响应式数据系统，接下来要解决的问题就是如何收集依赖，收集依赖必须要触发get，而触发get的前提是组件可以拿到store，因此第一步是向组件注入store。类似react-redux，reux提供了Provider使子组件可以拿到store。

class Provider extends Component {
 getChildContext() {
  return {store: this.props.store};
 }

 render() {
  const { children } = this.props;
  return children;
 }
}
Provider.childContextTypes = {
 store: PropTypes.object
};

相应的子组件可以context拿到store，如下

class Child extends Component {
 render() {
  // store => this.context.store
 }
}
Child.contextTypes = {
 store: PropTypes.object
};

这样写的缺点显而易见，每个子组件都需要定义contextTypes，同样的类似于react-redux，reux提供了connect函数，用于映射state => props

const connect = (mapStateToProps = () => {}) => {
 return (WrappedComponent) => {
  const Wrapper = class extends Component {
   render() {
    const store = this.context.store;
    const props = Object.assign({}, this.props, mapStateToProps(store.state, this.props), {dispatch: store.dispatch, commit: store.commit});
    return <WrappedComponent {...props} />
   }
  }
  Wrapper.contextTypes = {
   store: PropTypes.object
  };
  reaturn Wrapper;
 }
}

这样一来，只要组件执行render方法，便会触发get钩子，从而使得store自动收集依赖，我们再想下依赖是什么，其实依赖应该是组件实例，那么当set钩子触发时，每个依赖（即组件实例）只要执行forceUpdate方法就可以达到rerender的效果。

但是问题是，get钩子触发时，如何确定依赖到底是谁呢？借鉴vue，我们定义一个stack，当componentWillMount时进栈，当componentDidMount时出栈

componentWillMount() {
 pushTarget(this);
}

componentDidMount() {
 popTarget(this);
}

这样当get钩子触发时，当前target就是目标依赖。同时应当注意，当组件update时应当重新收集依赖，因为update之后依赖关系很可能已经变化了

update() {
 // 清空依赖
 this.clear();
 pushTarget(this);
 this.forceUpdate(() => {
  popTarget(this);
 })
}

以上就是如何在vuex中使用react，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。