React原理及其工作流程

levy9527 发布于2019-08-23 15:32 / 1400人阅读

摘要：再次将子返回的单个进行合并成一个新的完整的。此时发生了变化。如果不相同则调用触发组件的更新，传入组件，触发组件的更新，此时组件获得新的，的一次流程结束。

react-redux提供了connect和provider两个好方式，provider将组件和redux关联起来，将store传给组件，组件通过dispatch发出action，store根据action的type属性，调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听store发生变化，调用setState更新组件，此时组件的props也就跟着发生变化

connect，Provider，mapStateToProps,mapDispatchToProps,是react-redux提供的，redux本身和react没有关系，它只是数据处理中心，是react-redux让它们联系在一起。
redux由store，reducer，action组成

store是一个对象，它主要有四个方法

dispatch：用于action的分发，在creactStore中对dispatch进行改造，比如当action传入dispatch中会立即触发reducer，有时我们不希望立即触发，而是等待异步操作结束后触发，这时不是只能传入一个对象，而是能传入一个函数，在函数里我们dispatch一个action对象，实现了异步

subscribe：监听state的变化，这个函数调用dispatch时会注册一个listener监听state变化当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听，let unsubscribe=store.subscribe(()=>{console.log("state发生了变化")})

getState：
两个需要用到的地方：
1.获取store中的state，用action触发reducer改变了state时，并将数据传给reducer这个过程是自动执行的
2.利用subscribe监听到state发生变化后调用它来获取新的state数据

replaceReducer:
替换reducer，改变state修改的逻辑

store通过createStore()方法创建，接受三个参数，经过combineReducers合并的reducer和state初始状态以及改变dispatch的中间件，后两个参数不是必须的，store的主要作用是将action和reducer联系起来并改变state，

action

action是一个对象，其中type属性是必须的，同时可以传入一些数据，action可以用actionCreator进行创造，dispatch就是把action对象发送出去

reducer

reducer是一个函数，它接受一个state和一个action，根据action的type返回一个新的state根据业务逻辑可以分为多个reducer，然后通过combineReducers将它们合并，state中有很多对象，每个state对象对应一个reducer，
eg：
const reducer =combineReducers(
{
    a:doSomethingWithA,
    b:processB,
    c:c
}
)

combineReducers:

其实它也是一个reducer，它接受整个state和一个action，然后将整个state拆分发送给对应的reducer进行处理，所有的reducer会收到相同的action，不过他们会根据action的type进行判断，有这个就进行处理然后返回新的state，没有就返回默认值，然后分散的state又会整合在一起返回一个新的state，

connect

connect（mapStateToProps,mapDispatchToProps,mergeProps,options）是一个函数，它接受
四个参数并且再返回一个函数，wrapWithConnect，wrapWithConnect接受一个组件作为参数，它的内部定义一个新组件，并将传入的组件作为Connect的子组件然后return回去。

完整写法：
connect（mapStateToProps,mapDispatchToProps,mergeProps,options）（component）

mapStateToProps（state，[ownProps]）

1.mapStateToProps接受两个参数，store的state和自定义的props，
2.并返回一个新的对象，这个对象会作为props的一部分传入ui组件，
3.我们可以根据组件所需要的数据自定义返回一个对象，ownProps的变化也会触发mapStateProps
function mapStateToProps(state){
    return {todos:state.todos};
}

mapDispatchToProps(dispatch,[ownProps])

1.mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入ui组件
2.如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入ui组件，
3.所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的。
4.mapDispatchToProps返回的对象属性其实就是一个个actionCeator，因为已经和dispatch绑定，所以当调用actionCreator时会立即发送action，而不是手动dispatch，
5.ownProps的变化也会触发mapDispatchToProps

mergeProps(tateProps,dispatchProps,ownProps)

将 mapStateToProps()和mapDispatchToProps()返回的对象和组件自身的props合并成新的props并传入组件，默认返回stateProps和dispatchProps的结果之和

options：

pure=true表示Connect容器组件将在shouldComponentUpdate中对store的state和ownProps进行浅对比，判断是否发生变化，优化性能，为false则不对比。

完整的React--Redux--React流程

一.Provider组件接受redux的store作为props，然后通过context往下传

二.connect函数在初始化的时候会将mapDispatchToProps对象绑定到store，

如果mapDispatchToProps是函数则在Connect组件获得store之后，
根据传入的store.dispatch和action通过bindActionCreators进行绑定，再将返回的对象绑定到store，connect函数会返回一个wrapWithConnect函数，
同时wrapWithConnect会被调用且传入一个ui组件，wrapWithConnect内部定义了一个Connect组件，传入的ui组件是Connect的子组件，

然后Connect组件会通过context获得store，并通过store.getState获得完整的state对象，将state传入mapStateToProps返回stateProps对象，

然后Connect组件会通过context获得store，并通过store.getState获得完整的state对象，将state传入mapStateToProps返回stateProps对象、mapDispatchToProps对象或mapDispatchToProps函数会返回一个dispatchProps对象，stateProps、dispatchProps以及Connect组件的props

三.
此时ui组件就可以在props中找到actionCreator，

当我们调用actionCreator时会自动调用dispatch，

在dispatch中会调用getState获取整个state，同时注册一个listener监听state的变化，
store将获得的state和action传给combineReducers，

combineReducers会将state依据state的key值分别传给子reducer，并将action传给全部子reducer，

reducer会被依次执行进行action.type的判断，如果有则返回一个新的state，如果没有则返回默认。

combineReducers再次将子reducer返回的单个state进行合并成一个新的完整的state。此时state发生了变化。

dispatch在state返回新的值之后会调用所有注册的listener函数其中包括handleChange函数，

handleChange函数内部首先调用getState获取新的state值并对新旧两个state进行浅对比，如果相同直接return，

如果不同则调用mapStateToProps获取stateProps并将新旧两个stateProps进行浅对比，如果相同，直接return结束，不进行后续操作。
如果不相同则调用this.setState()触发Connect组件的更新，传入ui组件，触发ui组件的更新，此时ui组件获得新的props，

react --> redux --> react 的一次流程结束。

GPU云服务器云服务器人工智能原理及其应用工作原理网络工作原理爬虫工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102199.html

JavaScript 是如何工作的：编写自己的 Web 开发框架 + React 及其虚拟 DOM

摘要：与大多数全局对象不同，没有构造函数。为什么要设计更加有用的返回值早期写法写法函数式操作早期写法写法可变参数形式的构造函数一般写法写法当然还有很多，大家可以自行到上查看什么是代理设计模式代理模式，为其他对象提供一种代理以控制对这个对象的访问。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇。如果你错过了前面的章节，可以在这里找到它们：想阅读更多优质文章请...

余学文 2019-08-26 13:30 评论0 收藏0
JavaScript 是如何工作的系列文章已更新到22篇

摘要：为了方便大家共同学习，整理了之前博客系列的文章，目前已整理是如何工作这个系列，可以请猛戳博客查看。以下列出该系列目录，欢迎点个星星，我将更友动力整理理优质的文章，一起学习。为了方便大家共同学习，整理了之前博客系列的文章，目前已整理 JavaScript 是如何工作这个系列，可以请猛戳GitHub博客查看。以下列出该系列目录，欢迎点个星星，我将更友动力整理理优质的文章，一起学习。 J...

lx1036 2019-08-26 13:48 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研发体系...

isaced 2019-05-21 19:50 评论0 收藏0
你要的 React 面试知识点，都在这了

摘要：是流行的框架之一，在年及以后将会更加流行。于年首次发布，多年来广受欢迎。下面是另一个名为的高阶函数示例，该函数接受另外两个函数，分别是和。将所有较小的函数组合成更大的函数，最终，得到一个应用程序，这称为组合。 React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高...

klinson 2019-08-23 17:52 评论0 收藏0