React 会在任意时间点在状态改变后高效的重绘整个用户界面，其对虚拟DOM diff法保证了DOM的最小化重绘。在大多数情况下，React 对DOM的渲染效率可以满足我们需求。但少数情况下，我们需要更精细化的渲染来进一提高运行效率。本文介绍一些简单的优化方法，你可以在需要时参考使用。 shouldComponentUpdate()方法 shou...

React是一个构建用户界面的JavaScript库，其主要目的是用于构建随着时间推移而不断变化的大规模应用。React的简单性、强表达能力、级组件化等特性，使其可以非常高效的构建用户界面。 从Hello world开始 离线转换 1. 从Hello world开始 下载React后。创建helloworld.html文件，文件内容如下： &l...

表单是应用中与用户最复杂交互之一，我们在创建和组织表单组件时，最重要考虑的一点就是表单的可用性。 用户提示与反馈 可访问性 减少用户输入 React 简单且高效的实现了对组件的管理，同时也提供了开发人员的生产效率。但开发出来的常常会缺乏可用性，要编写出高可用性组件，需要在细节上进行更多的考虑。下面是一些表单组件的优化建议： 1. 用户提示与...

随着应用规模的扩大，应该考虑对相同功能进行抽象，以提高代码的复用率和开发效率。React 表单组件中，我们可以对多个表单元素共享事件处理器，或将功能相同的组件编写为自定义组件。 多表单元素共享事件处理器 1.1 通过.bind()方法共享 1.2 通过底层DOMname属性实现共享 1.3 通过React addon实现共享 ...

表单组件，如：<input>、<textarea>、<option>等，这些组件不同于其他组件，它们可以通过用户交互发生变化。这些组件提供的响应用户交互的接口，使响应用户交互和管理表单数据更加容易。 交互属性与事件 1.1 交互属性 1.2 事件 1.3 name属性 文本框与下拉框...

表单是应用中不可缺少的一部分，表单不同于其他 HTML 元素，因为它要响应用户的交互，并根据用户输入显示不同的状态。React 基于props和state的组件渲染机制，可以很好的处理表单的复杂性。在React 中，表单组件分为两种：受控组件和非受控组件。 受控组件 1.1 受React控制的值 1.2 表单组件事件 1.3 受控组件...

大多数情况下，我们并不需要直接操作真实的DOM，React 的虚拟DOM足以满足创建用户界面的需要。而在极少数情况下，我们又不得不去操作底的DOM。为了和浏览器交互，我们需要获取对DOM节点的引用，React 提供了一个访问受自身控制的DOM节点（已挂载组件）的方法getDOMNode，通过这个方法我们可以在组件挂载后访问底层 DOM。 refs属性...

用户界面除了展示页面信息外，还要响应用户事件。React会将事件处理程序绑定到组件上来处理事件。事件被触发的同时，更新组件的内部状态。组件内部状态的更新，会触发组件的重绘。借助这些机制，我们能够轻松的响应用户输入，并根据用户输入内容完成用户界面的更新。 事件处理器的绑定 1.1 JSX中的事件绑定 1.2 非JSX中的事件绑定 1.3...

JSX赋予了React组件强大的表现能力，它允许我们使用类似HTML的语法来创建自定义元素和组件。结合小巧、简单的组件和数据对象，可以构造出庞大而复杂的组件，这就是组件复合。 组件的组合与从属关系 1.1 组件的组合 1.2 组件从属关系 组件的子级 2.1 子级 2.2 动态子级 1. 组件的组合与从...

在HTML，元素（Element）是组成页面的基本元素。而在React中，组成页面的基本元素是组件。React组件本质上是一个JavaScript函数，它接受属性（props）和状态两个参数，并输出render()渲染好的HTML。设计组件时，应该把通用元素（如：按钮、输入框、表单、布局组件等）拆分成接口定义良好的、可复用的、独立的组件，这样不仅可以提高U...