言川的博客

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

JSX语法是react的一大亮点。之前很不喜欢在js中写模板，因为js字符串换行很麻烦，所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的，特别是当你的网站是前后端分离的时候，如果改一下模板还要找后端的开发，非常浪费时间。JSX的出现比较完美解决了JS中写模板的问题。简单的说就是 JS 和 HTML和混合着写在一起。一，JSX基本原理首先我

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

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

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

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

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

这里只讨论React的一个动画插件提供的动画机制，其他的通过自己写JS操作的动画都是一样的，和React没啥关系。React.addons.CSSTransitionGroup 提供了一个分组动画，所谓分组动画就是指它可以对一个数组中的元素的增加和减少做一个动画。 比如我们通过一个数组来渲染一个列表，那么当列表增加或者减少的时候我们可以定义他的动画。动画原理React.addons.CSSTran