真水_五香的博客_React

React总结篇之十一_多页面应用

单页应用的目标实现多页面路由的React-Router库多页面的代码分片一、单页应用使用传统的多页面实现方式，即每次页面切换都是一次网页刷新，每次页面切换的时候都遵从以下的步骤：（1）浏览器的地址栏发生变化指向新的URL，于是浏览器发起一个HTTP请求到服务器获取页面的完整HTML；（2）浏览器获取到HTML内容后，解析HTML内容；（3）浏览器根据解析的HTML内容确定还需要下载哪些其他资源，包

react

redux

翻译 2019-03-15 14:46:31 7360 阅读 1收藏

React总结篇之十_动画

在网页中动画的实现方式React提供的动画辅助工具ReactCSSTransitionGroupReact-Motion动画库一、动画的实现方式在网页中，实现动画无外乎两种方式：CSS3方式，也就是利用浏览器对CSS3原生支持实现动画；脚本方式，通过间隔一段时间用JavaScript来修改页面元素样式来实现动画。CSS3方式CSS3的方式下，开发者一般在CSS中定义一些包含CSS3transiti

react

redux

翻译 2018-12-06 16:45:15 1059 阅读

React总结篇之九_扩展Redux

中间件StoreEnhancer一、中间件中间件的特点是：中间件是独立的函数中间件可以组合使用中间件有一个统计的接口中间件接口在Redux框架中，中间件处理的是action对象，而派发action对象的就是Store上的dispatch函数，action对象在进入reducer之前，会经历中间件的管道。在这个中间件管道中，每个中间件都会接收到action对象，在处理完毕之后，就会把action对象

react

redux

翻译 2018-12-05 17:15:58 528 阅读

React总结篇之八_单元测试

一、单元测试的原则从不同的角度，可以将测试划分为如下不同的种类：从人工操作还是写代码来操作的角度，可以分为手工测试和自动化测试；从是否需要考虑系统的内部设计角度，可以分为白盒测试和黑盒测试；从测试对象的级别，可以分为单元测试、集成测试和端到端测试；从测试验证的系统特性，又可以分为功能测试、性能测试和压力测试。单元测试是一种自动化测试，测试代码和被测的对象非常相关，比如测试React组件的代码就和测

react

redux

翻译 2018-11-23 16:44:08 980 阅读

React总结篇之七_Redux和服务器通信

React组件访问服务器的方式Redux架构下访问服务器的方式一、React组件访问服务器代理功能访问APIReact组件访问服务器的生命周期以显示天气预报为示例：通过服务器API获得天气情况数据展示天气情况数据分两个步骤完成：（1）在装载过程中，因为weather组件并没有获得服务器结果，就不显示结果。或者显示一个’正在装载‘之类的提示信息，但weather组件这时候要发出对服务器的请求。（2）

react

redux

翻译 2018-11-20 17:56:42 1383 阅读

React总结篇之六_React高阶组件

高阶组件的概念及应用以函数为子组件的模式这两种方式的最终目的都是为了重用代码，只是策略不同，各有优劣，开发者可以在实际工作中决定采用哪种方式。一、高阶组件1.高阶组件（HigherOrderComponent，HOC）并不是React提供的某种API，而是使用React的一种模式，用于增强现有组件的功能。一个高阶组件就是一个函数，这个函数接受一个组件作为输入，然后返回一个新的组件作为结果，而且，返

react

redux

翻译 2018-11-20 11:23:43 6954 阅读

React总结篇之五_React组件的性能优化

一、单个React组件的性能优化React利用VirtualDOM来提高渲染性能，虽然这能将每次DOM操作量减少到最小，计算和比较VirtualDOM依然是一个复杂的计算过程。如果能够在计算VirtualDOM之前就能判断渲染结果不会有变化，那样可以干脆不要进行VirtualDOM计算和比较，速度就会更快。发现浪费的渲染时间在Chrome浏览器中安装ReactPerf扩展，步骤省略（属于操纵部分）

react

redux

翻译 2018-11-05 18:16:39 1905 阅读

React总结篇之四_模块化React和Redux应用

创建一个复杂一点的应用应该如何做：模块化应用的要点代码文件的组织方式状态数的设计开发辅助工具一、模块化应用的要点1.构建一个应用的基础要做如下3件事情：代码文件的组织结构确定模块的边界store的状态树设计代码文件的组织方式：2.1按角色组织在redux构建的应用中，存在这样的代码组织方法，此方法在不建议用在实际实现中：reducer目录包含所有的Redux和reducer；actions目录包含

react

redux

翻译 2018-11-02 16:33:56 1114 阅读

React总结篇之三_从Flux到Redux

一、FluxRedux是Flux思想的另一种实现方式，Flux一族框架（包括Redux）贯彻的最重要的观点是单向数据流；1.MVC框架的缺陷MVC是业界广泛接受的一种前端应用框架类型，这种框架把应用分为3个部分：Model（模型）负责管理数据，大部分业务逻辑也应该放在Model中；View（视图）负责渲染用户界面，应该避免在View中涉及业务逻辑；Controller（控制器）负责接受用户输入，根

react

redux

翻译 2018-11-01 18:23:25 976 阅读

React总结篇之二_设计高质量的React组件

React总结篇之二_设计高质量的React组件一、易于维护组件的设计要素1.组件划分的原则：高内聚低耦合（1）高内聚：将逻辑紧密相关的内容放在一个组件内。React可以将展示内容的JSX、定义行为的JavaScript代码、甚至定义样式的css，都可以放在一个JavaScript文件中，因此React天生具有高内聚的特点。（2）低耦合：不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。

react

React

组件

翻译 2018-10-30 18:38:39 2482 阅读 1收藏

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

真水无香

React总结篇之十一_多页面应用

React总结篇之十_动画

React总结篇之九_扩展Redux

React总结篇之八_单元测试

React总结篇之七_Redux和服务器通信

React总结篇之六_React高阶组件

React总结篇之五_React组件的性能优化

React总结篇之四_模块化React和Redux应用

React总结篇之三_从Flux到Redux

React总结篇之二_设计高质量的React组件