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方式参数提交

posted @ 2017-02-07 14:55  gugege  阅读(195)  评论(0编辑  收藏  举报