React Flux 架构使用示例
Flux
是Facebook官方使用的前端MVC
框架,在React
的基础上构建。在React 数据流与Flux框架中介绍Flux
时,使用了一个实现简单搜索功能的示例,本篇将介绍这个示例的实现过程。
Flux
是Facebook官方使用的前端MVC
框架,在React
的基础上构建。在React 数据流与Flux框架中介绍Flux
时,使用了一个实现简单搜索功能的示例,本篇将介绍这个示例的实现过程。
React 组件可以客户端进行渲染。在客户端渲染组件时,是在页面加载完成后才开始渲染的。这会对页面加载效率造成影响,也不利于搜索引擎的抓取(不利于SEO)。基于React 虚拟组件机制,我们可以在服务端对组件进行渲染。在服务端渲当React 组件不仅可以提升页面的加载效率,而且可以服务端在客户端共用组件,提高组件的复用率。本文将通过一个简单的示例,介绍在Node.js Express框架
服务端渲染的实现。
React 本身只是一个视图(View),也就是MVC
中的“V”。你可以很容易将React集成到你当前使用MVC框架中,也可以使用FactBook官方推出的Flux
框架。Flux
框架为React 提供一套单身的数据流(Data Flow)的模式,Flux
为我们提供了组织代码和安排内部逻辑的方式,这样我们只需要写很少的代码就能实现想要的功能,使应用更加易于开发和维护。
React 组件会在虚拟DOM中完成渲染,并通过虚拟DOM来更新DOM在浏览器中的变化。React 对组件的渲染是由 JavaScript 的完成的,也就是说:只有 JavaScript 在浏览器加载完成后才会开始组件的渲染。这种DOM管理机制会存在一些问题,如:搜索引擎抓取不到站点内容、对站点性能造成一定的影响。React 虚拟DOM是DOM在内存中的表现形式,这为React 在浏览器环境中运行提供了可能。React 可以从虚拟DOM中生成一个字符串(而非更新真正的DOM),这使我们可以从客户端和服务端使用同一个组件。
阅读全文React 会在任意时间点在状态改变后高效的重绘整个用户界面,其对虚拟DOM diff 法保证了DOM的最小化重绘。在大多数情况下,React 对DOM的渲染效率可以满足我们需求。但少数情况下,我们需要更精细化的渲染来进一提高运行效率。本文介绍一些简单的优化方法,你可以在需要时参考使用。
阅读全文表单是应用中与用户最复杂交互之一,我们在创建和组织表单组件时,最重要考虑的一点就是表单的可用性。
阅读全文随着应用规模的扩大,应该考虑对相同功能进行抽象,以提高代码的复用率和开发效率。React 表单组件中,我们可以对多个表单元素共享事件处理器,或将功能相同的组件编写为自定义组件。
阅读全文表单组件,如:<input>、<textarea>、<option>等,这些组件不同于其他组件,它们可以通过用户交互发生变化。这些组件提供的响应用户交互的接口,使响应用户交互和管理表单数据更加容易。
阅读全文表单是应用中不可缺少的一部分,表单不同于其他 HTML 元素,因为它要响应用户的交互,并根据用户输入显示不同的状态。React 基于props
和state
的组件渲染机制,可以很好的处理表单的复杂性。在React 中,表单组件分为两种:受控组件和非受控组件。
大多数情况下,我们并不需要直接操作真实的DOM,React 的虚拟DOM足以满足创建用户界面的需要。而在极少数情况下,我们又不得不去操作底的DOM。为了和浏览器交互,我们需要获取对DOM节点的引用,React 提供了一个访问受自身控制的DOM节点(已挂载组件)的方法getDOMNode
,通过这个方法我们可以在组件挂载后访问底层 DOM。