React
关注
分享
扫一扫
文章平均质量分 81
LiuJun2Son
专注前端开发,熟悉移动端和后端开发
展开
-
React Router导航组件（一）
1.React Router导航组件简介React Router是一组导航组件，它们与您的应用程序进行声明。无论你是想为你的web应用程序设置书签的url，还是想要一个可组合的方式来进行本地反应，无论你的反应是什么，路由器都可以做出反应——所以，你可以选择! 简单的说React Router是处理界面之间跳转的组件。( 处理 web 和 native 界面的跳转 )官网：htt...原创 2018-04-12 16:01:47 · 2436 阅读 · 0 评论 -
手写精简版的 Redux 状态容器
1.Redux的简单使用如果下面的代码看不懂，可以看前面的 Redux简单入门 这篇博客。/*==================action=====================*/var add=(number)=>{ return{ type:'add', number:number, }}/*==========...原创 2018-04-19 16:31:31 · 638 阅读 · 0 评论 -
React 使用 JS 动画
上一篇博客讲了React官方提供的TransitionGroup动画库，它实现的原理是典型的CC3方式，现在再来了解一下如何使用脚本的方式来实现动画。要使用脚本的方式实现动，我们可以采用react-motion这个动画库，它是一个很优秀的动画库，并且采用的是脚本的方式来实现动画。(motion是运动的意思)react-motion : https://github.com/chenglou/...原创 2018-04-14 10:31:53 · 1336 阅读 · 0 评论 -
React 使用CCS3动画
在网页中实现动画有两种方式：CCS3的方式 和 脚本的方式。然而在React中提供了一个叫做ReactCSSTransitionGroup的功能帮助实现动画, 为了使用这个功能需要安装react-addons-css-transition-group 这个库来实现CCS3的动画。1.安装react-addons-css-transition-group在控制台进入项目的根目录执行：...原创 2018-04-13 12:31:04 · 577 阅读 · 0 评论 -
React + Redux + React-Redux 实现计算案例
这个篇博客是对上一篇博客 React + Redux实现计算案例（优化） 的进一步优化。在上一篇博客中主要实现两个功能：1.容器组件 和 UI组件分离; 2.使用了Provider组件来提供context上下文。其实这两个功能已经有一个库帮我们实现了，这个库就是下面将要介绍的React-Redux这个库。 React + Redux实现计算案例（优化）这篇篇博客实现的原理与React-R...原创 2018-04-18 19:45:50 · 713 阅读 · 0 评论 -
React + Redux实现计算案例（优化）
这个篇博客是对上一篇博客 React + Redux实现计算案例 的进一步优化, 完成UI组件和容器组件分离 和 将store对象存在React的context中 项目代码下载 地址 1.UI组件和容器组件分离1.UI 组件特征只负责 UI 的呈现，不带有任何业务逻辑没有状态（即不使用this.state这个变量）所有数据都由参数（this.props）提供不使用...原创 2018-04-18 18:53:23 · 371 阅读 · 0 评论 -
React + Redux实现计算案例
简单的实现计算的案例: 案例代码下载 地址1.新建一个react项目create-react-app react-redux-sample //使用create-react-app脚手架创建一个react项目cd react-redux-sample //进入react-redux-sample项目根目录npm start ...原创 2018-04-18 16:15:29 · 1199 阅读 · 0 评论 -
Redux 简单入门
1.什么是Redux?Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外...原创 2018-04-18 16:04:14 · 358 阅读 · 0 评论 -
React Router导航组件（三）
1.react-router-dom使用案例3案例的执行的效果：( 这个案例主要演示使用Switch , Redirect 和 location )1.搭建界面布局案例3是是在案例1的基础上进行开发，没有看过案例1的看上一篇博客1.下面将案例1中的全部的代码拷贝到案例3中，并指定demo3中的Main.js为应用的首页（如下图：）2.底部添加两个按钮 ...原创 2018-04-12 20:25:52 · 573 阅读 · 0 评论 -
React Router导航组件（二）
1.react-router-dom使用案例2案例执行的效果: ( 点击item1和item2实现切换中间的内容: 用到了Router ，Route，NavLink，Link, match ，history ) 1.搭建界面布局案例2是是在案例1的基础上进行开发，没有看过案例1的看上一篇博客1.下面将案例1中的全部的代码拷贝到案例2中，并指定demo2中的Main.js为应...原创 2018-04-12 17:24:08 · 479 阅读 · 0 评论 -
Redux的扩展-中间件
1.什么是中间件？如果有学习过Node的Express框架的童孩应该对中间件不陌生。在Express框架中，中间件就是一个函数，这个函数是用来处理请求的过程的，那么在Redux中的中间件也基本类似。Redux的中间件是专门用来处理dispatch分发的action。例如，Redux中间件的使用：ui-->action-->store-->中间件-->中间件(...原创 2018-04-20 17:22:33 · 725 阅读 · 0 评论