[ecto]# 1、为什么要使用react

2、软件开发流程

react全家桶： react + react-dom + react-router-dom + redux/react-redux/redux-thunk(redux-saga/redux-promise)(或者世界使用mobx) + element-ui/antd/antd-mobile + prop-types + axios/fetch + mock

(1)问题定义确定系统的目标、规模和基本任务。 (2)可行性研究从经济、技术、法律等方面分析确定系统是否值得开发，及时建议停止项目开发，避免人力、物力、时间的浪费。 (3)需求分析确定软件系统应具备的具体功能。通常用数据流图、数据字典和简明算法描述来表示系统的逻辑模型，以防止产生系统设计与用户实际需求不相符的后果。 (4)概要设计 ---- 为什么要使用vue 确定系统设计方案、软件的体系结构、软件的模块结构。 (5)详细设计描述如何具体地实现系统。 (6)软件实现阶段进行程序设计(编码)和模块测试。 (7)综合测试阶段通过各种类型的测试，查出软件设计中的错误并改正错误，确保软件的质量;还要在用户的参与下进行验收，才可交付使用。 (8)软件维护软件运行期间，通过各种必要的维护改正错误、或修改扩充功能，使软件适应环境变化，以便延长软件的使用寿命和提高软件的效益。每次维护的要求及修改步骤都应详细、准确地己录下来，并作为文档加以保存。

3、开发流程 - 创建项目

安装脚手架

cnpm / npm i create-react-app -g create-react-app myapp cd myapp npm run eject npm run start

不安装脚手架

npx create-react-app myapp cd myapp npm run eject npm run start

安装dva脚手架

cnpm / npm i dva-cli -g dva new myapp

4、开发流程 - 项目配置

1、配置 @，指向src目录，方便后续的组件以及模块的导入 config/webpack.config.js

2、改造src的目录

5、开发流程 - 添加路由模块以及实现基本的页面构造

cnpm i react-router-dom -S

入口找布局，布局找页面，页面找组件

1、 layout/App.jsx

cnpm i node-sass -D

2、实现 layout/App.scss文件 --- 布局文件

3、src/index.js入口文件处配置布局文件

4、布局文件App.jsx找页面文件

6、创建各个页面 -- src/views

cnpm i redux react-redux redux-thunk -S

1、src/views/home/index.jsx + src/views/home/UI.jsx,同理创建 kind,cart,user

2、创建各个页面需要的状态管理器，以首页为例

src/views/home/store.js

3、store/index.js 引入相关的分reducer

4、src/index.js 处引入状态管理器

5、修改 App.jsx，使用路由加载页面浏览器输入 /home /kind /cart /user查看效果

6、修改页面底部，添加导航

7、首页的数据渲染

1、获取数据 home/index.jsx

home/UI.jsx 触发请求

home/action.js

home/index.jsx 容器组件触发action

封装数据请求的方法 api/index.js

cnpm i axios -S

home/action.js 请求数据

2、UI库

cnpm i antd-mobile -S

入口页面的相关配置 index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> 
if ('addEventListener' in document) { 
document.addEventListener(
'DOMContentLoaded',
function() { FastClick.attach(document.body); },
false); }
if(!window.Promise) { 
document.writeln('<script src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/13/16c89eff1ecb5d84~tplv-t2oaga2asx-image.image"'+'>'+'<'+'/'+'script>'); } </script>

按需加载组件

cnpm i babel-plugin-import -D

配置样式 config/webpack,config.js

home/UI.jsx 使用组件并且渲染

8、如果你想要写详情页面，详情页面有自己的底部

详情页面是一个单独的布局文件

编写一个详情的页面 views/detail/index.jsx

修改入口文件处的配置

9、渲染列表并且点击进入详情页面

home/index.jsx 添加产品列表的数据

home/UI.jsx

修改一下layout/DetailApp.jsx中的路由的定义，给它设定一下参数

列表跳转

声明式跳转 NavLink Link

编程式跳转子组件没有属性的话父组件传递 {...this.props}

详情页面获取数据并且渲染

10、react +mobx

react + react-dom + react-router-dom + axios/fetch + mobx/mobx-react + antd-mobile/antd/element-ui + prop-types

1 装饰器(Decorator) es7 语法底层原理(是什么): 是个函数,用来装饰类|类成员是个语法糖(Object.defineProperty) Object.defineProperty(参数): 给对象添加或修改属性的参数: target目标 prop针对的属性 descriptor针对目标的描述如何实现(怎么用): @装饰器名类 @装饰器名类的实例属性|静态属性 @装饰器名类的实例方法|静态方法使用场景(用在哪) mobx / angluar +Ts

2 配置安装：npm i @babel/plugin-proposal-decorators --save

配置：package.json

babel: { "presets":...

+
"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
 ]

....

}

配置： vscode->设置->搜索设置输入：experimentalDecorators->勾上 webstrom 无需设置

3 mobx成员: observable action 干嘛的:MobX 的理念是通过观察者模式对数据做出追踪处理，在对可观察属性作出变更或者引用的时候，触发其依赖的监听函数整体的store注入机制采用react提供的context来进行传递

怎么用: 定义类

@observable 装饰store类的成员，为被观察者 @action 实例方法, 修改状态，同步异步都修改，不推荐组件内部改

用在哪: react

4 mobx-react成员: inject,observer,Provider

Provider: 顶层提供store的服务，Provider store={store}

inject: 注入Provider提供的store到该组件的props中，组件内部使用 inject 是一个高阶组件高阶组件返回的是组件，作用在包装组件场景: export default inject('store')(react函数式组件) @inject 是装饰器，装饰的是类本身和类成员， @inject('store') class 类组件 observer: 设置当前组件为观察者,一旦检测到store中被监测者发生变化就会进行视图的强制刷新 @observer class 类组件 .. const 组件=observer((store)=>{jsx})

构建程序主入口:所有</.> store: export default 实例store 构造器: this.childStore=new ChildStore(this) this=store childStore: 构造器: this.store=store 便于任何子store可以访问其他子store @observable 实例属性 @action 实例方法(){修改实例属性==redux reducer+action}

cnpm i mobx mobx-react -S cnpm i @babel/plugin-proposal-decorators --save 配置：package.json

babel: { "presets":...

+
"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
 ]

....

} store/index.js

src/index.js

store/HomeStore.js --- 处理首页中的状态管理 store/KindStore.js

store/index.js 处引入各个分模块的状态库

store/HomeStore.js store/kindStore.js的构造器说明store

store/HomeStore.js ---设计首页的状态以及改变状态的方式

改造src/views/home（kind/cart/user）组件

把当前的首页的这个类组件变为观察者 home/index.jsx

请求数据home/index.jsx

store/homeStore.js中给事件绑定this

首页渲染数据 home/index.jsx

假设你在分类页面需要访问列表的数据

11、dva-cli

cnpm i dva-cli -g dva new dvaapp cd dvaapp npm start

react项目搭建流程