详解关于react

#详解关于react| 来源: 网络整理| 查看: 265

不管是 stateProps 还是 dispatchProps，都需要和 ownProps merge 之后才会被赋给组件。connect 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数，connect 就会使用 Object.assign 替代该方法。

[options] (Object) 如果指定这个参数，可以定制 connector 的行为。一般不用。

原理解析

首先connect之所以会成功，是因为Provider组件：

在原应用组件上包裹一层，使原来整个应用成为Provider的子组件接收Redux的store作为props，通过context对象传递给子孙组件上的connect

那connect做了些什么呢？

它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。

关于它的源码

connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件，该组件具有如下特点:

通过props.store获取祖先Component的store props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互 shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState componentWillUnmount时移除注册的事件this.handleChange

由于connect的源码过长，我们只看主要逻辑：

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) { return function wrapWithConnect(WrappedComponent) { class Connect extends Component { constructor(props, context) { // 从祖先Component处获得store this.store = props.store || context.store this.stateProps = computeStateProps(this.store, props) this.dispatchProps = computeDispatchProps(this.store, props) this.state = { storeState: null } // 对stateProps、dispatchProps、parentProps进行合并 this.updateState() } shouldComponentUpdate(nextProps, nextState) { // 进行判断，当数据发生改变时，Component重新渲染 if (propsChanged || mapStateProducedChange || dispatchPropsChanged) { this.updateState(nextProps) return true } } componentDidMount() { // 改变Component的state this.store.subscribe(() = { this.setState({ storeState: this.store.getState() }) }) } render() { // 生成包裹组件Connect return ( ) } } Connect.contextTypes = { store: storeShape } return Connect; } }

connect使用实例

这里我们写一个关于计数器使用的实例：

Component/Counter.js

import React, {Component} from 'react' class Counter extends Component { render() { //从组件的props属性中导入四个方法和一个变量 const {increment, decrement, counter} = this.props; //渲染组件，包括一个数字，四个按钮 return (

Clicked: {counter} times {' '} + {' '} - {' '}

) } } export default Counter;

Container/App.js

import { connect } from 'react-redux' import Counter from '../components/Counter' import actions from '../actions/counter'; //将state.counter绑定到props的counter const mapStateToProps = (state) => { return { counter: state.counter } }; //将action的所有方法绑定到props上 const mapDispatchToProps = (dispatch, ownProps) => { return { increment: (...args) => dispatch(actions.increment(...args)), decrement: (...args) => dispatch(actions.decrement(...args)) } }; //通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上 export default connect(mapStateToProps, mapDispatchToProps)(Counter)

完整代码

Github：https://github.com/lipeishang/react-redux-connect-demo

相关文章详解webpack2+React 实例demoreact-native 完整实现登录功能的示例代码React-Native中禁用Navigator手势返回的示例代码浅谈React Native 中组件的生命周期React如何将组件渲染到指定DOM节点详解react-native-tab-navigator组件的基本使用示例代码详解React native全局变量的使用(跨组件的通信)react-native使用react-navigation进行页面跳转导航的示例详解使用Vue Router导航钩子与Vuex来实现后退状态保JS和jQuery通过this获取html标签中的属性值(实例代猜您喜欢

详解使用Vue Router导航钩子与Vuex来实现后退状态保存

本篇文章主要引见了详解运用Vue Router导航钩子与Vuex来完成后退状态保管，具有一定的参考价值，有兴味的能够理解一下..

详解webpack2+React 实例demo

本篇文章主要引见了详解webpack2+React 实例demo，小编觉得挺不错的，如今分享给大家，也给大家做个参考。一同跟随小编过来看看吧.. 05-16详解webpack2+React 实例demo 05-16react-native 完整实现登录功能的示例代码 05-16Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数 05-16Vuejs 页面的区域化与组件封装的实现 05-16js封装成插件的步骤方法 05-16vue.js移动端app之上拉加载以及下拉刷新实战网友评论推荐文章

细数软件工程各阶段必不可少的那些图

各种反弹shell方法总结

Mabitis

Unable to preventDefault inside passive event listener due to target being treated as passive

各种反弹shell方法总结

Java中的循环语句

MySQL 索引

git recommend(alive)

[白话解析] 深入浅出支持向量机(SVM)之核函数

html小工具——文章注释编辑器

最新文章 1Chrome调试折腾记之JS断点调试技巧 2JS中的Replace()传入函数时的用法详解 3浅谈vue+webpack项目调试方法步骤 4JS实现快速比较两个字符串中包含有相同数字的方法 5node.js 利用流实现读写同步,边读边写的方法 6checkbox:click事件触发span元素内容改变的方法 7Node.js 使用流实现读写同步边读边写功能 8node.js 核心http模块,起一个服务器,返回一个页面的实例 9简单谈谈JS中的正则表达式 10详解Vue双向数据绑定原理解析

声明：所有软件和文章来自软件开发商或者作者如有异议请与本站联系联系我们

【本文地址】

公司简介

联系我们