文章列表 (共 625 篇,第 4/63 页)

React 相关方法(API)介绍-ReactDom、ReactDOMServer、子节点

React组件及子组件最终通过render方法渲染到DOM中,该方法由ReactDOM类库提供。页面的渲染可以在客户端或服务端完成,ReactDOMServer类库使你可以在服务端完成组件的渲染。通过this.props.children属性可以访问组件的子节点,而对子节点的处理的方法则由React.Children类提供。 ReactDOM类库 ...
阅读全文 →

React 相关方法(API)介绍-元素与组件操作

JSX可以减少定义组件的复杂性,但对于React来说JSX并不是必须的,JSX标签最终会被转换为原生的JavaScript。除使用JSX语法外,还可以使用React提供的API来创建组件。本文将介绍使用React创建元素,及一些React中重要的API。 React引用 元素操作API 2.1 创建元素:React.createEl...
阅读全文 →

Reach的JSX语法与HTML的异同

JSX语法很像HTML,但它并不是HTML的复制品。JSX规范中也有所说明:JSX并不尝试去遵循任何XML或HTML规范,而是做为一种ECMAScript特性设计的。 属性 JavaScript表达式 事件 样式 1. 属性 JSX以类似HTML的方式实现了属性设置。在HTML中我们会像下面这样设置元素属性: <div id="a-i...
阅读全文 →

使用JSX定义React组件:组件定义、动态值、子节点

React推荐将每一个业务点都建立一个独立的组件,并将所有逻辑和标签封装在其中,创建组件使用React.createClass()方法。JSX以干净简洁的方式保证了组件中的标签与所有业务逻辑的分离,它不仅提供了清晰、直观的方式来描述组件树,同时也让应用程序更加符合逻辑。 定义一个组件 组件使用动态值 2.1 使用变量名 2.2 使用数组...
阅读全文 →

React JSX语法

JSX即 JavaScript XML,是一种在React组件内部构建标签的类XML语法。组件在React中,是用于分离关注点,而非模板或处理显示的逻辑。虽然React不使用JSX同样可以工作,但官方更建议使用JSX。JSX借签了XML标签打开与关闭的优点,提高了组件及复合组件的可读性。JSX中可以直接使用HTML标签,赋予React强大的表现能力的同时,...
阅读全文 →

React Flux 架构使用示例

Flux是Facebook官方使用的前端MVC框架,在React的基础上构建。在React 数据流与Flux框架中介绍Flux时,使用了一个实现简单搜索功能的示例,本篇将介绍这个示例的实现过程。 简介 创建分发器Dispatcher 创建Store 创建视图View 4.1 controller-view 4.2 其它View ...
阅读全文 →

React Node.js(Express)服务端渲染、服务端/客户端组件共享示例

React 组件可以客户端进行渲染。在客户端渲染组件时,是在页面加载完成后才开始渲染的。这会对页面加载效率造成影响,也不利于搜索引擎的抓取(不利于SEO)。基于React 虚拟组件机制,我们可以在服务端对组件进行渲染。在服务端渲当React 组件不仅可以提升页面的加载效率,而且可以服务端在客户端共用组件,提高组件的复用率。本文将通过一个简单的示例,介绍在N...
阅读全文 →

React 数据流与Flux框架

React 本身只是一个视图(View),也就是MVC中的V。你可以很容易将React集成到你当前使用MVC框架中,也可以使用FactBook官方推出的Flux框架。Flux框架为React 提供一套单身的数据流(Data Flow)的模式,Flux为我们提供了组织代码和安排内部逻辑的方式,这样我们只需要写很少的代码就能实现想要的功能,使应用更加易于开发和...
阅读全文 →

React 服务端渲染

React 组件会在虚拟DOM中完成渲染,并通过虚拟DOM来更新DOM在浏览器中的变化。React 对组件的渲染是由 JavaScript 的完成的,也就是说:只有 JavaScript 在浏览器加载完成后才会开始组件的渲染。这种DOM管理机制会存在一些问题,如:搜索引擎抓取不到站点内容、对站点性能造成一定的影响。React 虚拟DOM是DOM在内存中的表...
阅读全文 →