React框架基础

React框架基础及性能优化nemoliao目录0框架发展史1React简介数据通信性能优化324目录0框架发展史1React简介数据通信性能优化324前端组件化发展101200602201003201504未来jQuery补全API完善基础设施YUI、ExtJS完整框架、组件丰富但修改麻烦MV*自定义组件、封装UI组件和逻辑组件WebComponent大势所趋WebComponent1说说组件化1Q：为什么要组件化？组件化的目的1A便于组织管理B提升开发效率C降低维护成本组件化的目的1A多端复用B功能解耦C并行开发PC端移动H5小程序独立APP……腾讯文档现状列表页doc类型sheet类型……编辑功能权限管理登录、分享通知……平台维度页面维度功能维度组件化的目的1功能A功能B逻辑块逻辑块功能A功能BCSSJS模块A一年前组件化的目的1功能B功能F逻辑块逻辑块功能D功能HCSSJS模块A一年后功能D功能H功能A功能C功能A……逻辑块逻辑块逻辑块逻辑块逻辑块逻辑块组件化的目的1img组件A模块A一年前cssjsimg组件Bcssjs组件化的目的1模块A一年后img组件Acssjsimg组件Bcssjsimg组件Ccssjsimg组件Dcssjsimg组件Ecssjsimg组件Fcssjs目录0框架发展史1React简介数据通信性能优化324React简介2特色基于组件的设计流程单向数据流虚拟DOMJSX作为模板引擎服务端渲染React生命周期2React组件设计2组件的划分组件的设计高阶组件CodingStyleReact组件划分2React组件划分2组件可复用不可复用容器组件UI组件逻辑组件滚动加载图片懒加载….UI展示复用模块管理数据和state用于逻辑测试React组件设计2组件的划分组件的设计高阶组件CodingStyleReact组件设计21.注释和README.md2.defaultProps属性保护3.propType属性类型约束4.className与style的拓展5.设计模式（如：单例模式的使用）6.Eg：容器组件与UI组件2容器组件与UI组件2React组件划分2组件可复用不可复用容器组件UI组件逻辑组件滚动加载图片懒加载….UI展示复用模块管理数据和state用于逻辑测试无状态组件2它有什么问题？性能问题？无状态组件2状态被保存在_renderItem中，每次调用render都会创建一个实例无状态组件2无状态、无生命周期省掉了组件类实例化过程开销非常低React组件设计2组件的划分组件的设计高阶组件CodingStyle高阶组件2一个左滑删除组件应该怎么设计？高阶组件2高阶组件2React组件设计2组件的划分组件的设计高阶组件CodingStyleCodingStyle2Airb2b:合理配置alias目录0框架发展史1React简介数据通信性能优化324数据通信3父子组件通信发布订阅者模式Redux、Reflux数据通信3父子组件通信发布订阅者模式Redux、Reflux31、父组件调用子组件？Ans：通过ref属性数据通信32、子组件调用父组件?Ans：通过传递props数据通信33、组件之前不存在层级关系，跨组件通信？数据通信数据通信3父子组件通信发布订阅者模式Redux、Reflux33、组件之前不存在层级关系，跨组件通信？发布订阅者模式数据通信3父子组件通信发布订阅者模式Flux、Reflux、Redux数据通信31.用户触发action，dispatcher分发action2.action处理更新store；3.UI监听store，回调setState方法，执行render方法重绘。注：(store只是一个发布者)Flux数据通信31.UI监听store，store监听action；2.UI触发action，store做出变更；3.UI回调render方法重绘。注：(store不仅是一个发布者，还是一个订阅者，监听action变化)Reflux数据通信31.用户dispatch一个action；2.reducer根据action和原来的state返回一个新的state；3.store接收返回的state构造新的state树；4.UI根据新的state树重新渲染。注：(全局仅有一个store，用于保存数据和状态)Redux数据通信31.@observer、@observable；2.Store中observable的属性值变化，mobx自动响应，observer组件更新；3.用@action派发修改，语法可简化。4.@computed+getter定义衍生值；5.react版的vue。Mobx目录0框架发展史1React简介数据通信性能优化324性能优化41.Map循环时使用唯一key值，减少重复列表的渲染；2.使用无状态组件减少Component实例化3.减少props数据传递量，用什么，传什么4.ShouldComponentUpdate（mobx无需）5.Immutable.js常用手段41.AK离线包2.LocalStorage3.并行加载、预加载、懒加载、按需加载4.URL的妙用？5.AlloyReport6.直出7.HTTP2.08.友好提示、调用客户端接口彩蛋0文档项目应用55ScriptLoader1、异步按需加载2、跨页面复用3、使用props管理参数4、区分调试/正式环境文档项目应用列表页doc类型sheet类型分享组件权限组件通知组件etc...登录组件5文档项目应用一、SLR.init()加载assets.js（仅一次）声明组件地址和依赖可以按调试/正式环境区分版本5文档项目应用二、SLR.load()调起特定组件（需要时）传递初始化参数•js入口（通过SLR.load方式引用）show()处理入参...render()——react组件Root节点remove()•html入口（通过url直接打开）eg:=3&from=desktop_m参数由urlparam5文档项目应用三、组件构造ThankYouQ&A