自己最近的项目是基于react的，于是读了一遍react的文档，做了一些记录(除了REFERENCE部分还没开始读)

文章也可以直接访问来查看

关于this的绑定，我们可以在调用的时候绑定，也可以使用箭头，不过最好像上面一样在constructor里面绑定，这样只绑定了一次。

ES6的语法的话没有Mixins的支持。

如果组件只是一个简单的js function的话，我们可以使用这种语法

这种比较适合没有lifestyle方法的，不存有内部状态，我们仍然可以设置propTypes和defaultProps。就像ES6的设置一样。我们的项目应该较多的是stateless的模块。

如果我们在某一层组件的时候截断某个属性，然后将其他属性传下去的话，可以使用other的语法。

这样子的话，other就会只包含除了checked以外的属性了，主要是因为checked这个属性在html的结构有特殊的意义，而在自定义的组件没有这个效果。

注意HTML中，textarea的值是被设置在两个标签之间，REACT是在value属性上。

如果我们在render方法里面写死了input的value，那么我们输入会被忽视的，只有value改为state的可变的值才行。

react快的原因是因为他不直接与DOM交流，render方法返回的对DOM的描述，react会计算最快的更新页面的方法。

当我们想要调用html本身的命令的时候或者接触真实的DOM树，我们可以使用refs来控制。

模块有3个主要的阶段：

react支持IE9以及以上，但是我们可以引入es5-shim和es5-sham来让老版的支持，这其实取决于我们自己。

构建组件完了，你可能想要在render的component实例上调用方法。大多数情况下应该是用不到的，因为正常的数据流应该是父组件传props给子组件的。

jsx并不返回一个component的实例，他只是返回一个ReactElement（这只是一个告诉React这个组件应该是什么样子的轻量的）。

我们想要调用某个组价实例的方法，只能在最上层的component使用(就是ReactDom.render生成的东西)。在组件的内部，我们应该自己处理他们之间的状态，或者使用另一种方法来得到ref(字符串属性或者回调方法属性)。

ref属性我们可以直接写成一个回调方法。这个方法会在组件结束mount之后立即被触发，参数是引用的组件。我们可以直接使用这个组件或着把他存了等到以后使用。

当我们将refs添加给div的时候，我们得到的是DOM元素，如果给自定义的组件绑定，我们得到的是react的实例。如果是我们自定义的组件，我们可以调用任何在他的class里面定义的方法。

当组件unmounted或者ref改变的时候，老的ref都会以null来被调用，所以说当ref update的时候，在被组件实例为参数之前，会立即调用一次null为参数的。(这点需要注意的)

我们也可以简单的加一个string的ref属性，然后我们在其他的事件处理里面就可以this.refs.xx来调用了。

作者希望react成为环境无关的，推荐了一些工具来让我们更好地使用各种种类的语言。

我们写成JSX的文件的话，我们要用babel先转化为纯粹的react的语法。Flow和TypeScrip也都支持JSX了。

如果是java的话，可以依赖于Nashorn这个JS的执行器来转化JSX。

这是一些react提供的功能插件，这些相对于核心来说变化的会比较多一些。以下的是一些实验性质的：

• LinkedStateMixin：这个是将form的属性与state绑在一起的插件，如果form比较大的话，这个还是很关键的。
• ...还有很多下面会慢慢介绍的

当我们在list添加的时候，我们可以使用ReactCSSTransitionGroup的enter和leave来实现。他会根据key的区别来判断是不是新添加的，然后就会像我们通常触发动画一样来toggle css的class。

组件初始化渲染的话，我们可以使用transitionAppear这个来添加动画。注意初始化渲染的时候，所有的children是appear，然后后来添加进的就是enter了。

如果想禁掉某些动画，我们可以设置为false。

这个玩意功能强大的多，他提供了在动画生命周期里能够执行的方法。使用到的时候再思考吧。

ReactLink是个方便的在react里面实现双向绑定的工具。但是这个在新版本被废弃了，还是推荐通过onchange来设置值。

双向绑定实际上强制性的要求了DOM完全等于react的state，这点虽然其实有很广的范围，React提供了ReactLink来帮我们简单的封装了setState和onChange方法。他并没有实际上改变react的单项数据流。最好别用~

React提供了非常棒的测试语法。配合Jest这层依赖于Jsdom的，我们可以写脚本测试整个的渲染以及事件逻辑。

我们可以直接写脚本模拟点击，模拟输入，模拟键盘事件。

我们可以renderIntoDocument然后进行各种类型判断以及事件触发检验。

使用这个组件我们可以脱离DOM来渲染组件，但是这只是一层渲染，子组件不会被渲染。我们只能够检查output的信息。功能其实还是很少的。refs也不支持，function也不支持。

有时我们需要将两块元素换位置，按照我们一般的写法，我们会单纯的给他们换位置，于是这些元素就会经历unmount和remount两个步骤。这是因为我们没有给他们每个模块一个单独的key。我们如果使用createFragment就可以让元素不执行unmount了。

(这个add-on的好处在于我们可以改变外面的壳子为一个新对象，然后对象里面的属性会自动重用老的。等于就是一个浅复制，然后我们就可以在子组件里面使用shandowCompare来比较。)

我们有时想要改变对象的里面的某个属性，然后其他的不想改变。例如下图。

(这个是个非常好的提供性能的工具，可以让我们查看一定的操作之后，我们页面组件重新渲染的次数，可以让我们进行组件的优化，使用可以参照本项目DEMO里的那个debug-panel，这个是勐喆开发的一个查看工具，内部调用了start，stop，printWasted，getLastMeasurement等方法)

这个是个最浅层的比较，会对对象的每个属性进行严格等于的比较，然后都相等就返回false，有改变的话就返回true。代表着需要更新。

人们使用react的原因在于他们希望网站是快速的，并且是响应的。每次state的改变导致重新render整个子树让人们想知道这样是否影响了性能，React使用了一些聪明的技术来减少需要更新UI时的DOM操作。

React使用的是虚拟DOM。这种平行的关系阻止了React直接创建和接触真实的DOM。每次React的props和state改变的话。React都会生成一个新的虚拟DOM来和老的比较，如果不相等的话，React才会尽可能小的改变虚拟DOM。

在这之上，React提供了一个组件的生命周期的方法，shouldComponentUpdate，这个方法来阻止虚拟DOM比较以及可能的最终的DOM的更改。让开发者来缩短整个过程。这个值默认返回true，默认执行比较以及更新。

我们很多时候的比较其实只是引用地址的比较(shandow compare)，这个基本上都是true的，因为我们是在同一个对象上修改的。

我们可以使用Immutable这个东西来创建不同的对象，或者使用Object.assign来做这件事情。

React让我们很容易的跟踪数据流的走向，因为他都是沿着组件树的结构一层层props传递下去的。但是有时我们不想要一层层的传递下去，我们可以使用Context这个东西。(这个是个实验性质的属性，将来可能会修改)

还是建议不要使用这个东西，用了的话，生命周期函数基本都会变化，会新加一个参数nextContext。会让组件无法被重用。

这一块的太多了，先不看好了....

这里主要就是一些细节的点了

在React里面，我们想要使用行内式样的话，必须以对象的形式申明，而且必须是驼峰式，行内样式本来就不推荐，这里也就了解一下感觉就够了。

JSX里面我们没法使用if else，因为JSX只是一个来处理函数调用以及对象构建语法糖，最多只能处理3目运算符。如果想要使用if else也可以，只要在JSX外面使用就好了。或者写成一个自执行的匿名函数调用。

目前，render里面只允许返回一个root nodes。如果我们想要返回多个的话，我们只能用一个将他们包装起立。

就是说在行内的style属性中，当我们写一些长度属性的时候，React会帮我们自动加上px这个单位，这里也介绍了一些不会加的，不过行内的用处不大，这里了解下就好了。

我们在componentDidMount中可以通过this.props.children来访问到组件内部包裹的组件。如果包裹的数量大于1的话，这个值就是一个数组，如果是1的话，这个值就是一个单个的值，并没有用数组包起来，所以提供了React.Children utilities来访问。

我们正常给input设置了value之后我们是无法修改他的值的，但是我们把input的value设置为null或者undefined之后，input就变的可以编辑状态了(但是我这种赋值并没有价值，这只是一种错误的状态)

这个方法并不会在初次mount的时候执行，因为他的作用在于比较老的props和新的props，如果老的没有的话，就不会触发。

就是说我们最好在componentDidMount这个方法执行之后进行DOM上事件的绑定，因为这个时候渲染已经完成了。

false在jsx里面的渲染结果会有些不同，比如false作为id或者value等等的值就会被解析为字符串“false”，如果在div中间使用{false}，就会得到一个空白的div。

想要父组件与子组件交流，很简单的传输props就可以了，想要子组件与父组件交流，只需要func.bind(this,i,props)这样绑定一下就好了。

如果是没有父子关系的组件之间的交流，我们可以设置自己的时间系统，在componentDidMount里面订阅，然后在willUnmount里面取消订阅。

或者按照flux来解决。

将方法暴露给父组件来调用，其实就是父组件创建的时候给个ref值，然后在父组件里面使用this.refs.item1.func()就可以调用子组件的方法了。

children这个属性并不指的是自己的render方法里面的子，而是调用这个组件里面传入的子。注意调用我们自己包装的组件时，在里面包的div并不会渲染，除非我们自己在组件里面的渲染中调用{this.props.children}来手动渲染。

一般React会帮我们编码一下吐到页面上，基本不会有XSS攻击，但是有时我们想要自己生成html吐到页面上，react提供了dangerouslySetInnerHTML这个function，传入的数据是{__html:'haha'}，注意这个就是有风险的，而且我们基本完全可以避免，除非一些非常特别的case。

文章可以直接访问来查看

平时的日常整理也会记录上去。