菜鸟小玩flux-------------凤独影

Posted 2021-01-16 huyice

1，首先安装react大环境（脚手架）：cnpm install create-react-app -g    //淘宝镜像安装

2，创建项目名称：create-react-app + myflux；//flux ：本人自己定义的项目名称，可随意更改，本文以myflux为例

　　成功后如下图：

　　然后cd myflux 到创建的文件夹中安装flux

　　命令：cnpm install flux --save-dev

3，安装完成后，将myflux文件夹拖到VSCODE工作区

　　1>打开src文件夹 此时会有index.css 、app.js 、index.js等等文件夹 ；初步练习将用不着的文件全部删除只保留

　　index.js和app.js 如右图：

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　2>把index.js和app.js中没用的东西全部删除只保留基本东西

如图：app.js   

如图： index.js

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　3>在cmd命令行myflux文件夹下 启动项目   命令：npm run start

　　启动成功后如图：

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　浏览器会自动弹出窗口，也可以打开谷歌浏览器在地址栏输入：localhost：3000，此时因为没写东西，所以打开浏览器显示的也是个白板。如图：

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 　　4>下面在app.js文件上编辑一点东西，让其在浏览器上显示：

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

以上内容为初步使用flux

---------------------------------------------------------------------------------------------------------------------------------------------

 4，浅谈flux。

　　

　　1>解释Flux由4部分组成：

　　　　(1)、View：视图层；

　　　　(2)、Action(动作)：View视图发出的消息(比如点击事件)；

　　　　(3)、Dispatcher( 派发器 ) ：用来接收Action动作、执行回调函数；

　　　　(4)、Store(数据层)：用来存放应用的状态，一旦发生改动，就提醒View更新页面；

　　2>flux流程：

 　　　  （1）、用户访问View

　　　　（2）、View发送用户的Action

　　　　（3）、Dispatcher收到Action,要求Store进行相对应的更新

　　　　（4）、Store更新后，发出一个“onchange”事件

　　　　（5）、view接受到“onchange”事件后，更新页面

 　　3>通俗例子：

　　用户首先操作view视图，发出指示或者说是动作，将动作传递给action，action接收到动作，传递给dispatcher，dispatcher传递给store，最后store更新数据至视图层 更新页面，图片最左侧的action可理解为浏览器刚开启时的信息，传递给dispatcher将页面渲染出来，没有实际作用，可忽略。

　　举个例子：

　　比方说view是超市老板，用户前来买东西，首先要问老板有没有货，老板说有货就吩咐服务员（action）去拿货，服务员去找仓库管理员（dispatcher）去仓库（store）取货，取完货后仓库的库存信息会及时的更新到老板（view）那里这个循环。

　　这个例子有点不恰当的地方是dispatcher不是管理store的，还有就是数据更新到view时候渲染到页面

5、下面放个用flux简单编写的增删项目的百度云盘地址：

　　其中包含菜鸟版和公司的标准的用代码 仅供参考

链接：https://pan.baidu.com/s/15fxJ-fP4ALG9rpM1C1MfRA
提取码：aqlq

 6、不喜勿喷，谢谢。