React第三方组件3(状态管理之Flux的使用①简单使用)
本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件3(状态管理之Flux的使用①简单使用)---2018.03.06
2、React第三方组件3(状态管理之Flux的使用②TodoList上)---2018.03.07
3、React第三方组件3(状态管理之Flux的使用③TodoList中)---2018.03.08
4、React第三方组件3(状态管理之Flux的使用④TodoList下)---2018.03.09
5、React第三方组件3(状态管理之Flux的使用⑤异步操作)---2018.03.12
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
本节课开始前,我们先把工程目录调整下!
目前是这样的
1、我们新建 router 和 refast 文件夹,并把demo1、demo2放到router 文件夹中,demo3-7放到 refast 文件夹中!
然后我们分别在 router 和 refast 中建立 Index文件,并设置路由
router 文件夹 下Index.jsx 完整代码
import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import {BundleFun} from '../../common/Bundle'
import Dome1 from './demo1/Demo1.bundle'
import Dome2 from './demo2/Demo2.bundle'
const Index = ({match}) =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/Router/Dome1" activeClassName="selected">demo1</NavLink>
<NavLink to="/Router/Dome2" activeClassName="selected">demo2</NavLink>
</div>
<Route exact path="/"
render={() => (<Redirect to="/Dome1"/>)}/>
<Route path={`${match.url}/Dome1`} component={() => BundleFun(Dome1)}/>
<Route path={`${match.url}/Dome2`} component={(props) => BundleFun(Dome2, props)}/>
</div>
</HashRouter>
;
export default Index;
refast 文件夹下 Index.jsx 完整代码
import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import Dome3 from './demo3/Index'
import Dome4 from './demo4/Index'
import Dome5 from './demo5/Index'
import Dome6 from './demo6/Index'
import Dome7 from './demo7/Index'
const Index = ({match}) =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/ReFast/Dome3" activeClassName="selected">demo3</NavLink>
<NavLink to="/ReFast/Dome4" activeClassName="selected">demo4</NavLink>
<NavLink to="/ReFast/Dome5" activeClassName="selected">demo5</NavLink>
<NavLink to="/ReFast/Dome6" activeClassName="selected">demo6</NavLink>
<NavLink to="/ReFast/Dome7" activeClassName="selected">demo7</NavLink>
</div>
<Route exact path={`${match.url}`}
render={() => (<Redirect to={`${match.url}/Dome3`}/>)}/>
<Route path={`${match.url}/Dome3`} component={Dome3}/>
<Route path={`${match.url}/Dome4`} component={Dome4}/>
<Route path={`${match.url}/Dome5`} component={Dome5}/>
<Route path={`${match.url}/Dome6`} component={Dome6}/>
<Route path={`${match.url}/Dome7`} component={Dome7}/>
</div>
</HashRouter>
;
export default Index;
demo文件夹下Index.jsx完整代码
import React from 'react';
import {HashRouter, Route, NavLink} from 'react-router-dom'
import Router from './router/Index'
import ReFast from './refast/Index'
import '../../public/css/demo.pcss'
const Index = () =>
<HashRouter>
<div className="content">
<div className="nav">
<NavLink to="/Router" activeClassName="selected">router</NavLink>
<NavLink to="/ReFast" activeClassName="selected">refast</NavLink>
</div>
<br/>
<Route path="/Router" component={Router}/>
<Route path="/ReFast" component={ReFast}/>
</div>
</HashRouter>
;
export default Index;
2、Flux目录
新建flux文件夹,并建立其子文件夹flux1,然后在flux1下建立Index.jsx
Index.jsx 完整代码
import React from 'react';
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
}
render() {
return (
<div>
flux
</div>
);
}
}
export default Index;
在flux目录下建立Index.jsx文件
完整代码如下:
import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import Flux1 from './flux1/Index'
const Index = ({match}) =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/Flux/Flux1" activeClassName="selected">Flux1</NavLink>
</div>
<Route exact path={`${match.url}`}
render={() => (<Redirect to={`${match.url}/Flux1`}/>)}/>
<Route path={`${match.url}/Flux1`} component={Flux1}/>
</div>
</HashRouter>
;
export default Index;
修改 deom 下Index.jsx
import React from 'react';
import {HashRouter, Route, NavLink} from 'react-router-dom'
import Router from './router/Index'
import ReFast from './refast/Index'
import Flux from './flux/Index'
import '../../public/css/demo.pcss'
const Index = () =>
<HashRouter>
<div className="content">
<div className="nav">
<NavLink to="/Router" activeClassName="selected">router</NavLink>
<NavLink to="/ReFast" activeClassName="selected">refast</NavLink>
<NavLink to="/Flux" activeClassName="selected">Flux</NavLink>
</div>
<br/>
<Route path="/Router" component={Router}/>
<Route path="/ReFast" component={ReFast}/>
<Route path="/Flux" component={Flux}/>
</div>
</HashRouter>
;
export default Index;
3、查看浏览器
接下来我们来学习flux
我们结合阮一峰老师的教程来讲讲!
地址:http://www.ruanyifeng.com/blog/2016/01/flux.html
Flux 是什么
简单说,Flux 是一种架构思想,专门解决软件的结构问题。它跟MVC 架构是同一类东西,但是更加简单和清晰。 Flux存在多种实现(至少15种),本文采用的是Facebook官方实现。
基本概念
1、View: 视图层 2、Action(动作):视图层发出的消息(比如mouseClick) 3、Dispatcher(派发器):用来接收Actions、执行回调函数 4、Store(数据层):用来存放应用的状态,一旦发生变动,就提醒Views要更新页面
特点
1、用户访问 View 2、View 发出用户的 Action 3、Dispatcher 收到 Action,要求 Store 进行相应的更新 4、Store 更新后,发出一个"change"事件 5、View 收到"change"事件后,更新页面
我们开始撸码!
1、显示我们建立View 即Main.jsx文件
import React from 'react';
const Main = (props) =>
<div className="todoList">
{props.state || 0}<button onClick={props.add.bind(this,1)}>+</button>
</div>
;
export default Main;
这个Main.jsx 希望能从父组件拿到 state状态、和add方法
2、我们建立Store.js文件
我们需要安装下 flux
npm i -S flux
import {ReduceStore} from 'flux/utils';
import ActionTypes from './ActionTypes';
import Dispatcher from './Dispatcher';
class TodoEditStore extends ReduceStore {
constructor() {
super(Dispatcher);
}
getInitialState() {
return 0;
}
reduce(state, action) {
switch (action.type) {
case ActionTypes.ADD:
return state + action.text;
default:
return state;
}
}
}
export default new TodoEditStore();
3.我们建立ActionTypes.js
const ActionTypes = {
ADD: 'ADD',
};
export default ActionTypes;
4、我们建立Dispatcher.js
import {Dispatcher} from 'flux';
export default new Dispatcher();
5、建立Actions.js
import ActionTypes from './ActionTypes';
import Dispatcher from './Dispatcher';
const Actions = {
add(text) {
Dispatcher.dispatch({
type: ActionTypes.ADD,
text,
});
}
};
export default Actions;
6、建立连接,新建Index.jsx
import Main from './Main';
import {Container} from 'flux/utils';
import Actions from './Actions';
import Store from './Store';
function getStores() {
return [
Store
];
}
function getState() {
return {
state: Store.getState(),
add: Actions.add,
};
}
export default Container.createFunctional(Main, getStores, getState);
7、查看浏览器
- 深度学习界的 “吃鸡挂”——目标检测 SSD 实验
- Hadoop查看所有JOB以及如何Kill指定用户的所有Job
- Java基础-23(01)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- ORA-01427问题的分析和解决(r6笔记第51天)
- 从编程实现角度学习 Faster R-CNN(附极简实现)
- Java基础-23(02)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- 8 个最好的 Java RESTful 框架
- 【C++基础】C++11 lambda 表达式解析
- 大量redo生成的问题原因及改进(r6笔记第50天)
- Java基础-22总结登录注册IO版,数据操作流,内存操作流,打印流,标准输入输出流,
- YOLO,一种简易快捷的目标检测算法
- Java基础-22总结转换流,随机访问流,合并流,序列化流,Properties
- openshift镜像构建
- 关于数据库无法登录的问题反思(r6笔记第49天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac免密码登录linux服务器
- 目标检测算法YOLO-V2详解
- 神经网络架构搜索——可微分搜索(Noisy DARTS)
- 教你使用 Jacoco 统计服务端代码覆盖率
- 如何在树莓派4B上设置EMQX开机自启动
- 如何使用 Ktor 快速开发 Web 项目
- 神经网络架构搜索——二值可微分搜索(BATS)
- UEFI 原理与编程 1 - UEFI开发环境EDK2搭建
- 【Unity】瞎做个宝石迷阵吧!(1)——构建场景
- VUE组件传值案例讲解
- 【JAVA】来写个JAVA的HelloWorld吧!
- 如何发布自己的项目到Maven中央仓库?
- 《闲扯Redis八》Redis字典的哈希表执行Rehash过程分析
- 为什么说在Android中请求权限从来都不是一件简单的事情?
- 小知识:如何赋予用户查看所有存储过程和触发器的权限