# React-base-flux

**Repository Path**: lisa_zhu2012/React-base-flux

## Basic Information

- **Project Name**: React-base-flux
- **Description**: 了解flux在react里的基础运用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-20
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React-base-flux

#### 介绍
了解flux在react里的基础运用 

#### 软件架构
软件架构说明

#### 项目搭建及上传gitee

1. npm install create-react-app -g
2. create-react-app react-project 安装的时候提示我node版本过低 (npm install -g n)
3. cd react-project   npm install 
4. npm run eject(当我们要进行二次配置的时候，需要找到node_modules文件夹里的react-scripts进行配置，但是当我们执行**npm run eject**就可以将配置文件抽出，方便开发配置)
5. npm run start 
6. git init
7. git remote add origin https://gitee.com/lisa_zhu2012/React-base-flux.git
8. git add . / git commit -m '' / git push -u origin master (or git push --set-upstream origin master)

#### 项目依赖下载

1. yarn add node-sass sass-loader -D (如果有就不需要再安装了)
2. yarn add flux -S (工具，帮助我们搭建flux架构)

#### 相关技术

1. 了解H5离线缓存技术 cache.manifest 

#### [Flux 基础知识](http://www.ruanyifeng.com/blog/2016/01/flux.html)

![flux](./public/flux.png)

在2014年，facebook提出了Flux，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

> 2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

其实FLUX在react里的应用就类似于vue中的vuex的作用，但是在vue中，vue是完整的mvvm框架，而vuex只是一个全局的插件

react只是一个视图层的框架，在flux是一个架构思想，我们在做项目的时候使用flux架构的话要比单纯使用react要简单很多，这个时候，react在整个FLUX架构中担任某一个角色的

react在这里只是充当了FLUX架构体系中的view层

Flux的组成部分：

* View：视图层
* ActionCreator（动作创造者）：视图层发出的消息（比如mouseClick）
* Dispatcher（派发器）：用来接收Actions、执行回调函数
* Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux的流程：

1. 组件获取到store中保存的数据挂载在自己的状态上
2. 用户产生了操作，调用actions的方法
3. actions接收到了用户的操作，进行一系列的逻辑代码、异步操作
4. 然后actions会创建出对应的action，action带有标识性的属性
5. actions调用dispatcher的dispatch方法将action传递给dispatcher
6. dispatcher接收到action并根据标识信息判断之后，调用store的更改数据的方法
7. store的方法被调用后，更改状态，并触发自己的某一个事件
8. store更改状态后事件被触发，该事件的处理程序会通知view去获取最新的数据

> 将共享的状态放入store中之后，每个组件的关注点就不一样的了，
> 使用状态的，就直接使用，更改状态就直接更改，不需要关注不同组件间如何同步

> 注意：flux、redux都不是必须和react搭配使用的，因为flux和redux是完整的架构，在学习react的时候，只是将react的组件作为redux中的视图层去使用了。