React学习(10)——React-Redux库

 学习 React  原创  管理员  2017-09-09 08:51

概要:Redux的作者封装了一个React专用的库React-Redux,这个库是可选的。实际项目中,你应该权衡一下,是直接使用Redux,还是使用React-Redux。后者虽然提供了便利,但是需要掌握额外的 API,并且要遵守它的组件拆分规范。

前面我们了解了改进React应用的两个方法,一是把一个组件拆分成容器组件与展示组件,二是使用Context来提供一个所有组件都可以访问的Context,也不难发现,这两种方法都有套路。我们完全可以把套路的部分抽取出来复用,这样每个组件的开发只需要关注于不同的部分就可以了。

这就是我们即将要说的一个React库——react-redux。

我们不再使用自己实现的Provider,而是从react-redux库中导入Provider。如下:

import {Provider} from 'react-redux';

react-redux的两个最主要的功能:

  • connect:连接容器组件与展示组件
  • Provider:提供包含store的context
context
  • 把Store上的状态转化为内层展示组件的prop(内层组件的数据输入)
  • 把内层展示组件中的用户动作转化为派送给Store的动作(内层组件的数据输出)
Provider

react-redux对store的要求:

  • 是一个object
  • 包含subscribe函数
  • 包含dispatch函数
  • 包含getState函数

另外,react-redux定义了Provider的componentWillReceiveProps函数,在React组件的生命周期中,该函数在每次重新渲染时都会被调用到,react-redux在该函数中会检查这一次渲染时代表store的prop和上一次是否一样。如果不一样,就会给出警告,这样做是为了避免多次渲染用了不同的store。每个redux应用只能有一个store,在整个redux的生命周期中都应该保持store的唯一性。

 

深入浅出React和Redux  

编辑:myweb   最后更新于:2017-09-11 21:12


版权声明:本站所有原创内容受到法律的严格保护,版权归本站所有。如果您觉得我们的内容有价值,您仍然可以进行自由传播,但必须显著地标识或说明此内容在本站的链接地址。




联系我:help@wodeabc.com鄂ICP备14016278号-2
©2016-2021 我的ABC All Rights Reserved.
友情链接: 一起编程网
点击这里给我发消息
我的ABC交流群