react 学习前期用到的插件
prop-types------展示组件的props类型检测:
import PropTypes from 'prop-types'
...
Link.propTypes = {
active: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired
}
react-dom------组件渲染:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux' let store = createStore(todoApp) render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
react-redux------全局访问store 和 生成容器组件:
import { connect } from 'react-redux'
...
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
redux------组装Reducer 和 生成store:
// ./reducers
import { combineReducers } from 'redux' const todoApp = combineReducers({
todos,
visibilityFilter
}) export default todoApp // index.js
import { createStore } from 'redux'
import todoApp from './reducers' let store = createStore(todoApp)
redux-thunk 中间件实现异步action:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; let store = createStore(
getW,
applyMiddleware(thunk)
)
异步action实际上是在action creator中生成一个函数,这个函数执行后会生成一个action。我们知道,在redux中action从(dispatch)-(reducer)-(return state)-( store state)的date flow是同步的,但是我们可以调用第三方的中间件(如redux-thunk),在dispacth(action)的时候,由中间件截获action,判断它是不是纯对象。如果是,就直接送到reducer去更新state。如果是函数,就执行它。这个函数我们可以设计为一个异步任务,等异步返回的时候再生成一个纯对象action送到reducer。这就实现了异步操作。
redux-thunk的作用是让dispatch可以接受函数作为参数。如果是函数,就执行它。
react 学习前期用到的插件的更多相关文章
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- React学习总结(一)
React学习总结 一.什么是React? 是Facebook公司开发的一套JS库 React的详细介绍https://www.jianshu.com/p/ae482813b791 二.老版本Reac ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
随机推荐
- Apache Rewrite实现URL的跳转和域名跳转
Apache Rewrite实现URL的跳转和域名跳转 Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基 于服务器级的(httpd.conf)和目录级的 (.h ...
- 【Linux网络基础】 DNS:介绍、作用、解析原理
1. DNS是什么? DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去+·记住能够被机器直接读 ...
- Java 线程池(ThreadPoolExecutor)原理分析与实际运用
在我们的开发中"池"的概念并不罕见,有数据库连接池.线程池.对象池.常量池等等.下面我们主要针对线程池来一步一步揭开线程池的面纱. 有关java线程技术文章还可以推荐阅读:< ...
- #Week3 Linear Regression with Multiple Variables
一.Multiple Features 这节课主要引入了一些记号,假设现在有n个特征,那么: 为了便于用矩阵处理,令\(x_0=1\): 参数\(\theta\)是一个(n+1)*1维的向量,任一个训 ...
- 图论--2-SAT--HDU/HDOJ 1814 Peaceful Commission
Peaceful Commission Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- eclipse手动添加SVN插件
最近使用eclipse时,用help下自动下载更新svn总是出错,网上找到手动安装方法,记录下一种可行的 1.手动下载svn插件(百度SVNsite-1.8.18) 2.将下载好的SVNsite-1. ...
- andorid jar/库源码解析之Bolts
目录:andorid jar/库源码解析 Bolts: 作用: 用于链式执行跨线程代码,且传递数据 栗子: Task.call(new Callable<Boolean>() { @Ove ...
- windows远程执行命令总结
1. 利用Impacket Impacket是一个Python类库,用于对SMB1-3或IPv4 / IPv6 上的TCP.UDP.ICMP.IGMP,ARP,IPv4,IPv6,SMB,MSRPC, ...
- 支付宝小程序serverless---获取用户信息(头像)并保存到云数据库
支付宝小程序serverless---获取用户信息(头像)并保存到云数据库 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 我又 ...
- E. Sasha and Array 矩阵快速幂 + 线段树
E. Sasha and Array 这个题目没有特别难,需要自己仔细想想,一开始我想了一个方法,不对,而且还很复杂,然后lj提示了我一下说矩阵乘,然后再仔细想想就知道怎么写了. 这个就是直接把矩阵放 ...