react-redux总结

redux是什么?
  redux是一种处理应用程序数据的方式。redux要求应用中只有一份数据state,state放在一个叫store的对象中,所有对数据的操作都要通过store来执行。react有三大原则:
   1.单一数据源:整个应用的state被储存在一棵object tree中,并且这个object tree只存在于唯一一个store中。
  2.state是只读的:唯一改变state的方法是触发action,action是一个描述已发生事件的普通对象。
  3.使用纯函数来执行修改:为了描述action如何改变object tree,需要编写纯函数reducers。
 
react和redux是什么关系?
  react和redux没有任何直接的关系,redux只是处理数据的方式,可以使用在react中也可以使用在其它任何地方。与react配合使用时可以使用react-redux库提供的方法来提高效率。
 
为什么要使用react-redux?
  react提供了很好的视图层的解决方案,但在数据的处理方式是没有提供有效的办法。使用react-redux可以采用redux思想在react应用中管理数据,同一根组件下的所有组件共享一份数据,
数据放在本组件树中唯一一个store对象中,所有对数据的操作都要通过store执行,通过使用connect创建的容器组件有了监听state变化和派发事件修改state的能力。这样就避免了子组件为了
获取数据需要数据层层传递的不便。
 
如何使用react-redux?
  react-redux库的开发思想是使容器组件和展示组件分离。展示组件描述界面如何展现,与redux无关,数据来源是父节点传入的props,修改数据通过props调用回调函数,展示组件由自己手
动创建。容器组件描述应用如何运行,使用redux提供的功能,数据来源是redux提供的state,修改数据是通过redux派发action,容器组件时通过react-redux提供的connect创建。在使用组件
搭建视图时不需要关心从何处获取数据,一切数据均通过this.props获取,所以可以做到组件的复用。视图搭建完成后使用connect方法创建容器组件来和数据交互,connect接收两个函数作为参数,
第一个mapStateToProps 定义了如何把stor中的state映射到展示组件的props中,第二个mapDispatchToProps 方法接收dispatch方法,然后返回期望注入到展示组件props中的回调函数,
在回调函数中可以使用dispatch派发action,从而修改state。connect函数返回一个函数接收一个展示组件作为参数,返回一个容器组件。connect函数内部创建了一个组件并在render方法中渲染
传入的展示组件,并通过context提供了访问store的能力,从而可以通过store实现获取、监听数据和派发action的能力。store通过redux包提供的createStore方法创建,createStore接收
reducer方法作为参数。reducer由我们自己来定义,reducer是一个存函数,接收state和action两个参数,功能仅仅是通过action来返回一个新的state,一定要是一个新的state,不允许在原state
上进行修改。redux包还提供了combineReducers方法来合并多个reducer函数返回一个传入createStore中的reducer,采用多个reducer函数可以分别管理对action的处理,但state有且仅有一份。
最后redux还提供了Provider组件,用于存放store对象,并通过context为子组件提供store对象,store以Provider的属性方式传递进去。
 
注意事项!!!
  state的更新可能是异步的,处于性能考虑react可能会把多个setState调用合并成一个调用。因为this.state和this.props的值可能会异步更新,所以不要依赖它们的值来更新下一个状态。
所以setState函数也可以传入一个函数作为参数,传入函数的第一个参数是上一个状态的state,第二个参数是本次组件更新时的props。参考:https://react.docschina.org/docs/state-and-lifecycle.html
 
 
这里有一个redux的简单实现https://www.cnblogs.com/ssw-men/p/10870569.html
 
posted @ 2019-05-30 14:52  你好前端  阅读(1270)  评论(0编辑  收藏  举报