adobe1992

这个系列是读《React 引领未来的用户界面开发框架》的笔记。 JSX语法是react的一大亮点。 之前很不喜欢在js中写模板，因为js字符串换行很麻烦，所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的，特别是当你的网站是前后端分离的时候，如果改一下模板还要找后端的开发，非常浪费时间。 JSX的出现比较完美解决了JS中写模板的问题。简单的说就是 JS 和

React 组件就是一个状态机，它接受两个输入参数： this.props 和 this.state，返回一个虚拟DOM。 React组件的生命周期分几个阶段，每个阶段会有若干个回调函数可以响应不同的时刻。 组件生命周期 一 创建类 React组件是有 类 和 实例的区别的，通过 React.createClass 创建的是类，比如：

一 组合而不是继承 React组件是无法继承的，即不存在 React.extend 之类的方法可以定义一个子类。 React推崇通过组合的方式来组织大规模的应用。 所以所谓父子组件，就和DOM中的父子元素一样，他们是有从属关系，但没有继承关系。 比如： [javascript] view plain copy var Team

前面说过，react使用组合而不是继承来处理父子组件。 那么显然无法通过继承父类来实现公共功能，所以react提供了mixin的机制。 一 mixin是什么 mixin，可以非常简单的理解，他就是把 一个 mixin 对象上的方法都混合到了另一个组件上，和 $.extend 方法做的事情类似。 不过，react对mixin做了一些特殊处理。 在mixin中

一 获取DOM元素 react可以允许我们通过 ref 来定位一个组件。具体的做法是： 先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。 然后就可以通过 this.refs.city 来访问这个组件。 但是请注意，这里拿到的只是虚拟DOM，而不是真实的DOM。 只有在render方法执行之后，并且react已经完成了D

Virtual DOM 毫无疑问是 React 的精髓。 可能很多人包括我看完官方文档之后对Virtual DOM的理解就是： 它通过JS对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。 这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。 如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义：抽象。 V

表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。  React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。 约束性和非约束性组件 表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。 约束性组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的