【黑马程序员】react+redux整合开发流程

黑马程序员成都中心编著【黑马程序员】react+redux整合开发流程react+redux整合开发流程一、前言1.1准备工作(1)安装node(2)安装git(3)安装一款前端IDE---本人使用HBuilder1.2预备知识(1)nodejs基本命令(2)前端html+javascript+css基础知识(3)react16相关概念和基本使用(4)JSX语法(5)ES6语法二、react介绍2.1VirtualDOM虚拟DOM是React的基石:(1)引入虚拟DOM主要是解决Web页面大量操作DOM的性能问题(2)在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会(3)提供开发服务端应用、Web应用和手机端应用等平台一直的开发方式黑马程序员成都中心编著2.2React组件(1)所谓组件，即封装起来的具有独立功能的UI部件,React并不是MVC的前端框架对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装(2)组件化开发特性:1.可组合:一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部.通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件2.可重用:每个组件都是具有独立功能的，它可以被使用在多个UI场景3.可维护:每个小的组件仅仅包含自身的逻辑，更容易被理解和维护4.可测试:因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多2.3Jsx语法Jsx语法是将HTML语言直接写在JavaScript语言之中，不加任何引号。它允许HTML与JavaScript的混写。JSX的特点：1.类XML语法容易接受，结构清晰2.增强JS语义3.抽象程度高，屏蔽DOM操作，跨平台4.代码模块化,组件化，使得每一个组件维护自己的UI2.4单向数据流React是单向数据流，数据主要从父节点传递到子节点(通过props),如果顶层(父级)的某个props改变了，React会重渲染所有的子节点。三、redux介绍黑马程序员成都中心编著3.1传统MVC传统MVC强调分层开发，model(M)-模型层，view(V)-视图层，controller(C)-控制层，在传统MVC框架中，通常使用双向绑定的方式来将Model的数据展现到View。当Model中的数据发生变化时，一个或多个View会发生变化；当View接受了用户输入时，Model中的数据则会发生变化。如下图所示，Model和View之间的关系错综复杂，导致出现问题时很难调试；实现新功能时也需要时刻注意代码是否会产生副作用file:////tmp/wps-zhongpeihuan/ksohtml/wpsHGPRZl.jpg而对于react而言，它自身更强调自己位V-view视图层。同时自身采用单向数据流的思想，此时Flux或者redux状态库管理库就配合react就变得非常完美。redux流程的逻辑非常清晰，数据流是单向循环的，就像一个生产的流水线：store（存放状态）-container（显示状态）-reducer（处理动作）-store黑马程序员成都中心编著3.2Redux三个概念1.store：是应用的状态管理中心，保存着是应用的状态（state），当收到状态的更新时，会触发视觉组件进行更新。2.container:是视觉组件的容器，负责把传入的状态变量渲染成视觉组件，在浏览器显示出来。3.reducer:是动作(action)的处理中心，负责处理各种动作并产生新的状态（state），返回给store。四、react+redux整合开发4.1环境搭建(1)安装create-react-app[size=12.0000pt]npminstall--globalcreate-react-app(2)创建项目create-react-appreact-redux-demo(3)在当前工程目录下添加redux依赖npminstallredux--savenpminstallreact-redux--save(4)目录结构黑马程序员成都中心编著file:////tmp/wps-zhongpeihuan/ksohtml/wpsKHBLez.jpg目录介绍：-public静态资源存放目录-img图片文件夹-plugins第三方插件文件夹-index.html工程入口访问页面-src源码文件夹：包含项目源码，我们基本都在这个文件夹下做开发-containers容器文件夹：存放容器组件-components组件文件夹：存放普通显示组件-actionsactions文件夹：存放可以发出的action-reducersreducers文件夹：存放action的处理器reducers-contants定义全局常量-app.jsreact整合redux数据流入口-index.jsreact应用访问入口4.2流程描述黑马程序员成都中心编著react：作为视图层，通过dispatcher发送action去触发reducer中的方法来获取redux中store中得状态或者数据进行展示。redux：(1)定义action,通过设定action的type属性和参数(2)编写处理器reducer,reducer接收action，根据action的type属性执行相关业务并返回新的state。(3)在容器组件里面讲react和redux进行连接。主要是将redux的state和dispatcher绑定到react组件的prop属性下，这样就可以进行向下传递，完成单向数据流注：store作为redux的数据存储，可以看作数据库。store里面存在很多state，对于一个reducer一般都处理一个state.4.3代码实现1.创建项目Action常量，在src/contants目录创建actionTypes.js文件//action方法名和actionType常量exportconstADD_BOOK='ADD_BOOK';//添加书籍操作exportconstDELETE_BOOK='DELETE_BOOK';//删除书籍操作exportconstQUERY_BOOK='QUERY_BOOK';//查询书籍操作exportconstCHECK_ADD='CHECK_ADD';//选择删除的记录操作exportconstCHECK_REMOVE='CHECK_REMOVE';//取消删除操作exportconstCHECK_CLEAR='CHECK_ALL';//全选exportconstCHECK_CLEAR='CHECK_CLEAR';//取消全选2.创建项目action函数，在src/actions目录下创建action.jsimport{ADD_BOOK,DELETE_BOOK,QUERY_BOOK,CHECK_ADD,CHECK_REMOVE,CHECK_CLEAR,CHECK_ALL}from../constants/actionTypes/***receiveData和fetchData是绑定的，fetchData是异步action去获取public目录下的data.json黑马程序员成都中心编著*然后发送dispatcher去执行receiveData，最好返回异步加载的data数据*/exportconstreceiveData=data=({type:'RECEIVE_DATA',data:data});exportconstfetchData=()={returndispatch={fetch('/data.json').then(res=res.json()).then(json=dispatch(receiveData(json)));};};/***addBook新增数据action*/exportfunctionaddBook(book){return{type:ADD_BOOK,book}}/***deleteBook根据ids删除数据*/exportfunctiondeleteBook(ids){return{type:DELETE_BOOK,ids}}/***queryBook根据书籍名称查询列表*/exportfunctionqueryBook(bookName){return{type:QUERY_BOOK,bookName}}/***checkAdd选择删除的记录id,添加到待删除数组列表*/exportfunctioncheckAdd(id){黑马程序员成都中心编著return{type:CHECK_ADD,id}}/***checkRemove从待删除数组列表中取消删除的记录id*/exportfunctioncheckRemove(id){return{type:CHECK_REMOVE,id}}/***checkClear将待删除数组列表清空*/exportfunctioncheckClear(){return{type:CHECK_REMOVE}}/***将记录id全部添加到待删除列表*/exportfunctioncheckAll(ids){return{type:CHECK_ALL,ids}}3.创建项目reducers函数规则：每一个reducer应该维护一种状态或者数据。每一个reducer都是一个独立的js文件。在本案例中存在查询条件、数据列表、待删除数组3.1)创建维护待删除数组列表state的js文件，在reducers/bookDeleteState.js文件import{CHECK_ADD,CHECK_REMOVE,CHECK_CLEAR,CHECK_ALL}from../constants/actionTypes黑马程序员成都中心编著/***待删除列表state*CHECK_ADD:执行添加待删除记录*CHECK_REMOVE:执行移除待删除记录*CHECK_ALL:全选进入待删除记录*CHECK_CLEAR:清空待删除记录*/exportdefaultfunctionbookDeleteState(state=[],action){switch(action.type){caseCHECK_ADD:return[...state,action.id];caseCHECK_REMOVE:{letstate_=[];letj=0;for(vari=0;istate.length;i++){if(state[i]!=action.id){state_[j++]=state[i]}}returnstate_;}caseCHECK_ALL:return[...state,action.ids];caseCHECK_CLEAR:return[];default:returnstate;}}3.2)创建维护查询条件state的js文件，在reducers/bookQueryState.js文件import{QUERY_BOOK}from../constants/actionTypes/***维护查询条件的state*QUERY_BOOK:设置查询条件*/exportdefaultfunctionbookQueryState(state=,action){switch(action.type){caseQUERY_BOOK:returnaction.bookName;default:returnstate;}}黑马程序员成都中心编著3.3)创建数据列表state的js文件，在reducers/bookListState.js文件import{ADD_BOOK,DELETE_BOOK}from../constants/actionTypes/***维护数据列表的State*ADD_BOOK:执行新增书籍操作*DELETE_BOOK:执行删除书籍的操作*RECEIVE_DATA:异步请求，返回查询到的列表*/exportde