微信公众号首发
本教程总共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 Reactfrom '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}) =>
className="nav">
to="/Router/Dome1" activeClassName="selected">demo1
to="/Router/Dome2" activeClassName="selected">demo2
exact path="/"
render={() => ()}/>
path={`${match.url}/Dome1`}component={() =>BundleFun(Dome1)}/>
path={`${match.url}/Dome2`}component={(props) =>BundleFun(Dome2, props)}/>
;
export default Index;
refast 文件夹下 Index.jsx 完整代码
import Reactfrom '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}) =>
className="nav">
to="/ReFast/Dome3" activeClassName="selected">demo3
to="/ReFast/Dome4" activeClassName="selected">demo4
to="/ReFast/Dome5" activeClassName="selected">demo5
to="/ReFast/Dome6" activeClassName="selected">demo6
to="/ReFast/Dome7" activeClassName="selected">demo7
exact path={`${match.url}`}
render={() => ()}/>
path={`${match.url}/Dome3`}component={Dome3}/>
path={`${match.url}/Dome4`}component={Dome4}/>
path={`${match.url}/Dome5`}component={Dome5}/>
path={`${match.url}/Dome6`}component={Dome6}/>
path={`${match.url}/Dome7`}component={Dome7}/>
;
export default Index;
demo文件夹下Index.jsx完整代码
import Reactfrom '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 = () =>
className="content">
className="nav">
to="/Router" activeClassName="selected">router
to="/ReFast" activeClassName="selected">refast
path="/Router" component={Router}/>
path="/ReFast" component={ReFast}/>
;
export default Index;
2、Flux目录
新建flux文件夹，并建立其子文件夹flux1，然后在flux1下建立Index.jsx
Index.jsx 完整代码
import Reactfrom 'react';
class Indexextends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
}
render() {
return (
flux
);
}
}
export default Index;
在flux目录下建立Index.jsx文件
完整代码如下：
import Reactfrom 'react';
import {HashRouter, Route, NavLink, Redirect}from 'react-router-dom';
import Flux1from './flux1/Index'
const Index = ({match}) =>
className="nav">
to="/Flux/Flux1" activeClassName="selected">Flux1
exact path={`${match.url}`}
render={() => ()}/>
path={`${match.url}/Flux1`}component={Flux1}/>
;
export default Index;
修改 deom 下Index.jsx
import Reactfrom 'react';
import {HashRouter, Route, NavLink}from 'react-router-dom'
import Router from './router/Index'
import ReFast from './refast/Index'
import Fluxfrom './flux/Index'
import '../../public/css/demo.pcss'
const Index = () =>
className="content">
className="nav">
to="/Router" activeClassName="selected">router
to="/ReFast" activeClassName="selected">refast
to="/Flux" activeClassName="selected">Flux
path="/Router" component={Router}/>
path="/ReFast" component={ReFast}/>
path="/Flux" component={Flux}/>
;
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 Reactfrom 'react';
const Main = (props) =>
{props.state ||0}+
;
export default Main;
这个Main.jsx 希望能从父组件拿到 state状态、和add方法
2、我们建立Store.js文件
我们需要安装下 flux
npm i -S flux
import {ReduceStore}from 'flux/utils';
import ActionTypesfrom './ActionTypes';
import Dispatcherfrom './Dispatcher';
class TodoEditStoreextends 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 ActionTypesfrom './ActionTypes';
import Dispatcherfrom './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 Actionsfrom './Actions';
import Storefrom './Store';
function getStores() {
return [
Store
];
}
function getState() {
return {
state: Store.getState(),
add: Actions.add,
};
}
export default Container.createFunctional(Main, getStores, getState);
7、查看浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论