微信公众号首发
本教程总共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、查看浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!