明明的博客

一、访问受控的DOM节点想要访问受React控制的DOM节点，首先必须能够访问到负责控制这些DOM的组件。这可以通过添加ref属性来实现。var DoodleArea =React.creatClass({rendre:funcitn(){     return }}); 可以通过this.refs.mainCanvas访问到组件。可以使用this.refs

在传统的HTML中，元素是构成页面的基础单元。但在React中构建页面的基础单元室React组件，可以在React组件中混入JavaScript表达能力的HTML元素。实际上写React代码主要就是构建组件，就像是编写文旦时使用元素一样。本质上一个组件就是一个JavaScript函数，它接受属性（props）和状态（state）作为参数，并输出渲染好的HTML。组件一般被用阿里呈现和表单应用的

对于用户界面而言，展示只占整体设计因素的一半，另一半则是相应用户输入，即通过JavaScript处理用户产生的事件。React通过将事件处理器绑定到组建上处理事件，事件触发的同时更新组建的内部状态，内部状态更新会触发组件的重绘。因此，如果视图层想要渲染出事件出发后的结果，它所要做的就是渲染函数中读取组件的内部状态。一、绑定事件处理器React处理事件本身和原生的JavaScript事件

在React中，数据的流向是单向的——从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个prop改变饿了，React会递归的向下便利整棵组件树，重新渲染所有使用这个属性的组件。React组建内部还具有自己的状态，这些状态只能在组件内修改。React组件本身很简单，你可以把他们堪称是一个函数，它接受props和state作为参数，返回一

在组件的整个生命周期中，随着该组件的props或者state发生改变，它的DOM表现也将有相应的改变，一个组件就是一个状态机，对于特定的输入，它总会返回一致的输出。React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期及销毁时。 生命周期方法React的组件拥有简洁的生命周期API，它仅仅提供你所需要的方法，而不会去最求全面。实例化：一个实例出吃被穿件

一、1、JSX：即JavaScript XML——一种在React组建内部构建标签的类XML语法。（增强React程序组件的可读性）；2、使用动态值：JSX将两个花括号：{}渲染成动态值，花括号指明了一个JavaScript上下文环境——或括号内的任何东西都会进行求值，得到的结果会被渲染为标签中的若干节点。对于简单值，比如文本或者数字，你可以直接引用对应的变量，例如：var

前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译，看过我博客的人都知道，我翻译可能不会按部就班，会尽可能用中文的意思，来将作者要讲述的技术描述清楚。英文能力有限，如果有不对的地方请跟我留言，一定修改……^_^原著序处理 React 组件之间的交流方式，主要取决于组件之间的关系，然而

动画可以让用户体验变得更加流畅自然，而React的TransitionGroup插件配合CSS3可以让我们在项目中整合动画效果的变得易如反掌。通常情况下，浏览器中的动画都拥有一套极其命令式的API，你需要选择一个元素并主动移动它或者改变它的样式，已实现动画效果。这种渲染方式显得格格不入，因此React选择了一种偏声明式的方法实现动画。CSS渐变组(CSS Transition Group)

Reactde Dom diff算法使我们能够在任意时间搞笑的重新绘制整个用户界面，并保证最小程度的DOM改变，然而，也存在需要对组件进行细致优化的情况，这时就需要渲染一个新的DOM来让应用运行得更加高效。 1、shouldComponentUpdate当一个组件更新时，无论是设置了新的props还是调用了setState方法，或者forceUpdate方法，React都会调用该组

一、组件的详细说明和生命周期ComponentSpecs and Lifecycle）组件的详细说明（Component Specifications）当通过调用 React.createClass() 来创建组件的时候，你应该提供一个包含 render 方法的对象，并且也可以包含其它的在这里描述的生命周期方法。renderReactComponent render

React主要功能在于渲染HTML。可以将其看成是MVC中的V，它不会影响到组件中直接调用AJAX请求之类的操作：var TakeSurvey=React.CreateClass({getInitialData：function（）{return{survey:null}；},componentDidMount:funciton(){$.getJSO

React使用了若干的抽象层来帮助你更轻松地开发组件、推导程序状态。然后调试构建及分发应应用时，这样设计就会产生负面影响了。幸运的是，我们拥有一些非常好的开发工具能在开发及构建过程中为我们提供帮助。在这里探讨这些构建工具和调试工具，它们可以让开发React程序更加高效。一、Browserify是一个JavaScript打包工具，支持浏览器中使用Node.js风格的require（）方法

围着Ract、facebook还开发了一系列的前端工具。在你的React项目中，这些工具不是非用不可的，不过它们确实可以和React一起完美的工作。例如：JestImmutable.jsFlux 一、Jest是Factbook开发的一个测试运行工具。给予Jasmine测试框架提供相近的方式，使用大家熟悉的类似于expect（value）.to(other)的断言。它提供了默认的

想让搜索引擎抓取到你的站点，服务端渲染这一步不可或缺，服务端渲染还可以提升站点的性能，因为在加载javaScript脚本的同时，浏览器就可以进行页面渲染。React的虚拟DOM是其可被用于服务端渲染的关键。首先每个ReactComponent在虚拟DOM中完成渲染，然后React通过虚拟DOM来更新浏览器DOM中产生变化的那一部分，虚拟DOM作为内存中的DOM表现，为React在Node.

一、表单事件React支持所有的HTML事件，这些事件遵循驼峰命名的约定，且会转成合成事件，这些事件是标准化的，提供饿了跨浏览器的一致接口。所有合成事件提供了event.target来访问触发事件的DOM节点。handleEvent：funciton(syntheticEvent){var DOMNode=syntheticEvent.target;var newValue

React可以帮助管理应用中的状态，自然也包括表单在内，现在知道React组件的核心理念就是可预知性和可测试性，在React中，表单组件有两种类型：约束组件和无约束组件。 一、无约束组件在HTML中表单组件与React组件的行为方式并不一致，给定HTML的一个值，这个<input />的值仍是可以改变的。这正是无约束组件名称的由来，因为表单组件的值是不受约束的。在React中这

1、组合实例：var Avatar =React.createClass({  render: function() {    return (                                );  }}); var ProfilePic =React.createClass({  render: function() {  

1、例子：var LikeButton = React.createClass({  getInitialState: function() {    return {liked: false};  },  handleClick: function(event) {    this.setState({liked: !this.state.liked});  },

一、为什么使用JSX1、JSX看起来像是XML的JavaScript语法扩展。React可以用来做简单的JSX语法转换。不需要为了React使用JSX可以使用JS创建，但建议使用JSX，因为可以使定义简洁且我们素质的包含属性的树状结构语法。XML有固定的标签开启和闭合，这能让复杂的树更易于阅读，优于方法调用和队形字面量的形式。二、JSX使用1、HTML标签与React组件对比R

一、1、React是Facrbook和Instagram用来创建用户界面的JavaScript库。很多人认为React是MVC中的V（视图）；React其实为了解决一个问题，就是构建随着时间数据不断变化的大规模应用程序。2、简单仅仅只要表达出你的应用程序在任何时间是什么样子，当底层的数据变化了，React会自动处理所有用户界面的更新。3、声名式（Declarative）数据变化

一、了解ReactJS：现在最热门的前端框架有AngularJS、React、Bootstrap等，其中ReactJS独特的Virtual DOM，很具有创新性。React 起源于 Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设 Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScrip

现在最热门的前端框架，毫无疑问是 React 。基于 React的 React Native 发布，结果一天之内，就获得了 5000颗星，受瞩目程度可见一斑。React起源于 Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了

1、将通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件，这样下次开发界面程序时候可以写更少的代码，也意义着更高的开发效率，更少的Bug和更少的程序体积。2、Prop验证随着应用不断变大，保证组件被正确使用变得非常有用。因此引入propTypes。React.PropTypes提供很多的验证器（validator）来验证传入数据的有效性，当props传入无效数据时，J

1、像是、、这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。 2、交互属性表单组件支持几个受用户交互影响的属性value，用于、组件；checked，用于类型为checkbox或者radio的组件；selected，用于组件。在HTML中，的值通过子节点设置，在React中则应该使用value代替。表单组件

性能分析工具Edit on GitHub通常情况下，React在沙箱中是非常快的。但是，在你应用的一些情景中，你需要仔细推敲每一个性能点。React提供了一个函数shouldComponentUpdate，通过这个函数，你能够给React的差异检查添加优化代码。为了给你一个你的应用总体的性能概览，ReactPerf是一个分析工具，告诉你需要把这些钩子函数放在哪里。

classSet()是一个简洁的工具，用于简单操作DOM中的class字符串。这里是一个常见的场景，处理方式中没有使用classSet()：// inside some `` React componentrender: function() {  var classString = 'message';  if (this.props.isImportant)

ReactLink是一种简单表达React双向绑定的方式。注意：如果你是这个框架的初学者，记住ReactLink对于大多数应用来说都是不需要的，应该谨慎使用。在React里面，数据流是一个方向的：从拥有者到子节点。这是因为根据the Von Neumann model of computing，数据仅向一个方向传递。你可以认为它是单向数据绑定。然而，有很多应用需要你

一、插件React.addons是为了构建 React应用而放置的一些有用工具的地方。此功能应当被视为实验性的，但最终将会被添加进核心代码中或者有用的工具库中： TransitionGroup和CSSTransitionGroup，用于处理动画和过渡，这些通常实现起来都不简单，例如在一个组件移除之前执行一段动画。LinkedStateMixin，用于简化用户表单输入数据和组件 st

浏览器中的工作原理2016年2月23日15:541、虚拟DOMReact是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述，React能够利用内存中的描述来快速地计算出差异，然后更新浏览器中的DOM。另外，React实现了一个完备的虚拟事件系统，尽管各个浏览器都有自己的怪异行为，React确保所有

1、React里有一个非常常用的模型就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节坑内有分厂复杂的实现。可以使用JSX展开属性来合并现有的props和其他值：return ; 如果不使用JSX，可以使用一些队形复制方法如ES6的object。assign或UnderScore_.extend。returnComponent(Object.assig

1、用户界面能做的最基础的事情就是呈现一些数据，React让显示数据变得简单，当数据变化时，用户界面会自动同步更新。2、通过例子进行了解：                          var HelloWorld = React.createClass({       render: function() {         retur

最近要学习React Native，但是在window上搭建开发环境的时候遇到了些问题，以至于一直没有搭建好开发环境。React Native相关项目及文档：react-native的GitHub地址：https://github.com/facebook/react-nativereact-native的文档地址：http://facebook.github.io/rea