说说你对Redux的理解?和react-redux有什么区别?

简介: 说说你对Redux的理解?和react-redux有什么区别?

Redux

redux只是一种架构模式,它可以应用到任意需要使用它的框架,react,vue等等。它是为了解决相对复杂的应用中不同组件之间共享状态而产生的,比如react中两个组件要访问同一个状态,可以把它提到最近的父组件,然后向下传递,但应用一旦复杂了,这样就会变得繁琐。redux这种模式就解决了类似这样的问题。

redux就是提供了一个叫store的容器里面的state存放了全局的数据状态,对外提供了三个方法getState(), dispatch(), subscribe()

getState(): 用来获取state的值,dispatch(action)用来发起一个action告诉一个叫reducer的函数怎么去更新state,同时把上一次的state作为参数也传给reducer, reducer拿到参数后,返回更新后的state, 得到新的state后就需要渲染组件,可以手动去调用render方法,但这样恒麻烦,通过subscribe接受一个调用render的函数放在一个数组中,每次dispatch的时候除了会通过reducer改变state,还会遍历还数组中的函数去调用,这样每次数据发生变化就可以重新去渲染组件。

react-redux

react-redux跟redux不同的是,它是专门为react服务的,它将redux中store的概念和React中context的概念结合起来,解决了相对复杂的react应用中不同组件共享状态传值的问题,它提供一个Provider的容器组件,该组件接收外界通过props将store传给它,并将store放在context中。

子组件可以在connect的时候取到store,Connect接收mapStateToProps(该诉高阶组件需要什么样的数据,是一个接收state值作为参数返回所需state对象的函数), mapDispatchToProps(该诉高阶组件怎么样去触发dispatch,是一个函数,接收dispatch作为参数返回包含触发dispatch的函数的对象)作为参数返回一个以当前业务组件作为参数的高阶组件,明白了redux的实现原理,熟悉React,react-redux中间件的原理也就明白了。


相关文章
|
25天前
|
JavaScript 前端开发 算法
vue与react的区别?
vue与react的区别?
13 1
|
2月前
|
JavaScript 前端开发 API
vue和react的区别是什么
vue和react的区别是什么
31 2
|
3月前
|
前端开发
React Component和Purecomponent区别
React Component和Purecomponent区别
19 0
|
3月前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
20 0
|
3月前
|
JavaScript 前端开发
React 和 Vue 在技术层面有哪些区别?
这些是 React 和 Vue 在技术层面上的一些主要区别,但两者都是优秀的前端框架,都有自己的优点和适用场景。选择框架时,应根据实际需求和团队技术栈进行选择。
18 0
|
3月前
|
JavaScript 前端开发
说说你对@reduxjs/toolkit的理解?和react-redux有什么区别?
@reduxjs/toolkit是一个Redux官方推荐的工具集,它的主要目的是简化和加速Redux开发流程,提供了一组工具和约定,以减少样板代码和提高开发效率。以下是对@reduxjs/toolkit的理解以及它与react-redux之间的区别:
34 0
|
3月前
|
前端开发 JavaScript
vue、react、angular 区别
vue、react、angular 区别
|
3月前
|
存储 缓存 JavaScript
【面试题】当面试官让我回答React和Vue框架的区别......
【面试题】当面试官让我回答React和Vue框架的区别......
|
3月前
|
XML JavaScript 前端开发
VUE基础知识:Vue.js和React的主要区别是什么?
VUE基础知识:Vue.js和React的主要区别是什么?
466 0
|
3月前
|
前端开发 JavaScript 容器
React 之元素与组件的区别
React 之元素与组件的区别
25 1