React.js学习笔记

公司前端部分需要用react重写，于是这个任务就落在我的头上。

首先需要安装node.js，然后改registry到淘宝镜像

1.看官方Installation文档时出现一个不太懂的概念:build pipeline，查阅资料后如下：

　　build pipeline:

2.react的State那一章节,定期修改时间需用setState方法，用=赋值无效。个人猜测应该是react的监听机制的原因

　　因为react通过setState方法知道state发生了变化，会重新调用render()方法重新渲染，因而页面发生变化 。

      ReactComponent.js 61 line:

　　

ReactComponent.prototype.setState = function (partialState, callback) {
  !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) 
　　? process.env.NODE_ENV !== 'production' 
　　? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') 
　　: _prodInvariant('85') 
　　: void 0;
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'setState');
  }
};

3.通过官方给的npm start方式运行react的demo，发现我修改代码之后浏览器会自动刷新。很666的方式啊！

　　找了个自动刷新的博文：　　http://www.cnblogs.com/axl234/p/5613922.html

　　　　　　　　　　　　　　　http://www.jianshu.com/p/7280d799f56d

　　这里的实现方式应该是通过websocket通知前段的js代码重新渲染页面，具体待验证。

4. JSX的callback中的this需要特别对待,这其实是JS范围内的问题. callback 中this的上下文问题

      主要是Class中的方法不自动绑定this,需要自己bind

5. React的数据流是单向绑定，遇到需要同步的问题时，解决办法是lift state up.运用回调函数callback

    实现方式是将修改State的回调方法在父级Component定义传给子级的。

    通过function的up-down flow传递实现down-up 的状态改变， 很巧妙。

5.5 如果有down-up的需要，可以通过ref属性加到React element或Html上

6. 在React中组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。

　　只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发

　　生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

7. Css预编译： 一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要

　　使用这种语言进行编码工作。

8. es6 spread operator ... 实现机制：(先占个坑)

9. react.js只涉及UI部分，异步需要借助Fetch。提交参数时, body:"name=admin&password=admin123”不可行，

　　因为Fetch没有提供自动转为FormData的功能，要自己new 一个FormData.

　　Fetch实现跨域请求与POST方式参数提交