React-Redux入门学习(三)
来源:互联网 发布:java技术总监 编辑:程序博客网 时间:2024/06/03 21:05
前两篇学习了Redux的基本用法和异步操作,今天学习Redux最后一部分。介绍如何在React项目中使用Redux。
为了方便使用,React-Redux的作者封装了一个React专用的库React-Redux。本文主要介绍它。
这个库是可以选的,实际项目中你可以选择,是直接用Redux,还是使用React-redux。后者虽然提供了遍历,但是需要掌握额外的API,并且要遵守它的组件拆分规范。
一、UI组件
React-Redux将所有组件分成两大类:UI组件(presentational component)和容器组件(container component)。
UI组件有以下几个特征:
只负责UI的呈现,不带有任何业务逻辑没有状态(即不使用 `this.state`这个变量)所有数据都有参数(this.props)提供不使用任何Redux的API
下面就是一个UI组件的例子
<div> {this.props.title}</div>
因为不含状态,UI组件又称‘纯组件’。即它像纯函数一样,纯粹由函数决定它的值。
二、容器组件
容器组件的状态恰恰相反。
负责数据管理和业务逻辑,不负责UI的呈现带有内部状态使用Redux的API
总之,只要记住一句话就可以了,UI组件负责视图的呈现。容器组件负责管理数据和逻辑。
如果一个组件既有UI,又有逻辑该如何处理?
回答是,将它拆分下面的结构:
外面是一个 容器组件,里面包了一个UI组件。前者负责与外部的通信,将数据传给后者,由后者渲染出视图。
React-Redux规定,所有的UI组件都由用户提供,容器组件则由React-Redux自动生成。也就是说,用户负责视觉层,状态管理全部交给它。
三、connect
React-Redux提供了connect方法,用于从UI组件中生成容器组件。connect的意思就是将两种组件连接起来。
import { connect } from 'react-redux';
阅读全文
0 0
- React-Redux入门学习(三)
- react学习之redux(三)
- Redux(三: React-Redux)
- React + Redux 入门(一):抛开 React 学 Redux
- Redux 入门教程(三):React-Redux 的用法
- Redux 入门教程(三):React-Redux 的用法
- Redux 入门教程(三):React-Redux 的用法
- Redux 入门教程(三):React-Redux 的用法
- React全家桶之Redux(三)
- react-redux学习笔记-2-react-redux
- react学习之redux(一)
- react学习之redux(二)
- react学习之redux(四)
- react学习之redux(五)
- React与Redux学习总结(一)
- React && Redux 学习笔记(一)
- react && redux 学习笔记(二)
- react-redux 学习笔记
- 2017.8.17暑假集训第十八天(下午团队训练赛)
- Baby Step Giant Step(好奇怪的名字)及其扩展: 求离散对数
- $_GET['goods_id']+0原理
- C++经验总结(2):函数被多次定义
- myeclipse快捷键
- React-Redux入门学习(三)
- 二代身份证编码规则及校验代码实现
- POJ
- winsock编程框架
- 暑假第16天总结
- 组合数C(m,n)——模板
- hello world 的各种输出方式(1)闲的蛋疼
- leetcode(136). Single Number
- 【jzoj5290】【NOIP2017提高组A组模拟8.17】【行程的交集】