React实战-深入源码了解Redux用法之Connect

男娘i 2022-09-25 12:25 275阅读 0赞

React实战\-深入源码了解Redux用法之Connect

Redux结构并不复杂，用法也较之Flux更为简单，使得Redux成为ReactJS的标配。虽然我并不赞成用个windows就得搞清楚windows内存/线程怎么管的，用个算法函数就要知道算法怎么写的，但是如果不去看看Redux的源码，不先了解Flux的用法，在使用Redux的时候，你会感到迷惑。再者，Redux源码并不太多，但蕴含了巧妙的设计思想，使得我们在使用Redux编码时，更加简单，比Flux的代码量少了很多，另外我们常用的Redux函数并不太多，主要有Action,Reducers,store,provider,conner等（微信：react-javascript）。

即使之前用过Flux，在使用Redux时，也会有不明就理的感觉。因为Redux为我们做了很多事情。在Redux里面，我们很少用到ReactJs component的那些事件了，连componentDidMount、componentUnMount这些主要的事件都少见了，还有涉及数据的更像操作与事件，涉及state的操作，store中require('events').EventEmitter的事件绑定与触发等等都不知所踪，但是无论怎么变，这个数据流方式是不可改变的，这也就成为我们在学习和使用Redux过程中的雾水，让我们只知其然，不知其所以然了。

只能硬着头皮去看看Redux源码的处理方式，会让我们知道它的实现方式，写起代码来不再那么晕头晕脑了。首先是connect,为什么是它，因为这是一个将操作和数据与我们的componet进行关联的函数，成为理解Redux的一个至关重要和迷惑的函数，但是不知什么原因，在Redux的官网中并没有做为头号重心来介绍，甚至在主目录中都没有出现。

首先，看看在传统Rejeact component编码中的实现方式。

1.ReactJS + Flux中组件数据更新方式。

store中的事件如下：

addChangedListener(callback)

this.on(CHANGE\_EVENT, callback);

\},

removeChangedListener(callback)\{

this.removeListener(CHANGE\_EVENT, callback);

component中的事件与数据更新方式：

var PersionList= React.createClass(\{

getInitialState: function () \{

return getPersions();

\},

componentDidMount()\{

PersonStore.addChangedListener(this.\_onChange);

\},

componentWillUnmount()\{

PersonStore.removeChangedListener(this.\_onChange);

\},

onSearch()

PersonAction.searchByName(this.refs.organizeName.getValue());

\},

\_onChange()\{

this.setState(getPersons());

\},

render()

return (

<div >

</div>

</div>

);

\});

2.在Redux中的实现方式

let AddTodo = (\{ dispatch \}) => \{

let input

return (

<div>

<form onSubmit=\{e => \{

e.preventDefault()

if (!input.value.trim()) \{

return

dispatch(addTodo(input.value))

input.value = ''

\}\}>

<input ref=\{node => \{

input = node

\}\} />

Add Todo

</button>

</form>

</div>

)

AddTodo = connect()(AddTodo)

以上可以看出采用connect方式省去了很多代码和操作，数据更新不需要自己主动触发了，事件处理不需要自己去绑定和解除绑定了。但是任何事都有利有弊，如同我们采用java编码，一上来就来个eclipse，自动生成一大堆的文件，顿时蒙了，不如自己写个helloworld.java清晰。

上面的connect更是莫名其妙了，数据、事件全没有，componnet怎么实现事件提交、数据更新的？！

3.Redux中connect源码分析

还是看看一般的connect的写法吧。

function mapStateToProps(state) \{

return \{ todos: state.todos \}

function mapDispatchToProps(dispatch) \{

return \{ actions: bindActionCreators(actionCreators, dispatch) \}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

扩展的参数就暂时不说了，主要是mapStateToProps，mapDispatchToProps。

mapStateToProps：负责将state中的有用数据，外加组件自生的props传人关联组件。

mapDispatchToProps：主要负责传人组件关联的事件，这里暂时也不讲reduce事件了。

理解这两点，好像有点明白了，对于一个ReactJS组件，能获得组件的数据，绑定事件函数，似乎就足够了。但是问题来了，在传统方法中，我们还会绑定数据的更新操作，这里没有reactJS的state数据变化引起的组件重绘，更奇怪的是代码2中connect参数为空？！

还是看看connect的源码实现吧：

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = \{\}) \{

.......

return function wrapWithConnect(WrappedComponent) \{

.......

以上是connect的函数主题结构。可以看出connect是采用了闭包的方式实现了两次操作。

a.第一次：实现对mapStateToProps, mapDispatchToProps, mergeProps, options = \{\}等输入参数的处理。

mapStateToProps的处理方式：

进一步往里看，我们可以到对mapStateToProps参数的处理

const defaultMapStateToProps = state => (\{\})；

const mapState = mapStateToProps || defaultMapStateToProps；

这里可以看出对mapStateToProps是有默认值处理的，如果mapStateToProps为空或者null，则默认为\{\}了。

mapDispatchToProps的处理方式：

const defaultMapDispatchToProps = dispatch => (\{ dispatch \})

mapDispatch = defaultMapDispatchToProps

这里可以看出对mapDispatchToProps是有默认值处理的，如果mapDispatchToProps为空或者null，则默认为\{ dispatch \}了。

其它参数类似处理了，看到这里，我们至少明白了代码2中为什么为空了。

因为componet只是添加操作，不需要数据绑定，所有参数为\{\}，事件为submit中执行dispatch(addTodo(input.value))，参数应为\{dispatch\}。如果采用完整的方式，应该为：

AddTodo = connect(\{\}，\{dispatch\})(AddTodo)才对。

而看看connect  源码知道，为null和不为null的结果是一样的。因此采用AddTodo = connect()(AddTodo)的方式了。

b.第二步才是真正建立commponent与数据源以及事件的关联。

在采用Redux的代码中我们看不到事件绑定与解除绑定，根本原因是connect已经我们的component自己生成了新的组件，已经不再是以前你定义的组件了，在新的组件中增加了事件操作等。看看connect源码：

return function wrapWithConnect(WrappedComponent) \{

......

class Connect extends Component \{

shouldComponentUpdate() \{

return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged

........

componentDidMount() \{

this.trySubscribe()

componentWillUnmount() \{

this.tryUnsubscribe()

this.clearCache()

从上面的代码可以看出，新创建的component中这些事件操作全了。

迷雾是不是少了很多，更多细节需要我们更加深入了解，跟随函数调用顺序，深入代码中，你会对框架的结构更加清楚。

React实战-深入源码了解Redux用法之Connect

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ⑧ React Redux 基本用法

相关 React实战-通过ToDo源码分析Redux的数据模型设计

相关 React实战-深入源码了解Redux用法之Reducers

相关 React实战-深入源码了解Redux用法之Provider

相关 React实战-深入源码了解Redux用法之Connect

相关「HearLing」React学习之路-redux、react-redux

相关 React实战-深入了解JSX

相关 React实战-深入源码了解Redux用法之Middleware

相关深入理解React、Redux

相关 react-redux的connect()方法