深入React技术栈之初入React世界

1.1 react简介

  react并不是完整的mvm/mvvm框架，专注于提供清晰、简洁的view层解决方案。

  传统开发模式，要更新页面需要手动操作dom元素。如图1.1所示，react在dom上封装了一层，把react并不是完整的mvm/mvvm框架，专注于提供清晰、简洁的view层解决方案。

  传统开发模式，要更新页面需要手动操作dom元素。如图1.1所示，react在dom上封装了一层，把dom树转化为javascript对象树，即virtual dom,每次数据更新，更新virtual dom，并和之前的virtual dom做对比，对变化部分做批量更新。dom树转化为javascript对象树，即virtual dom,每次数据更新，更新virtual dom，并和之前的virtual dom做对比，对变化部分做批量更新。

图1.1 react dom更新

 

1.2 jsx语法

  在virtual dom树中，创建的虚拟元素分为两类，dom元素和组件元素，分别对应着原生dom元素与自定义元素。
  virtual dom其实就是带有描述的json树，通过递归的方式根据每个结点描述进行渲染，得到dom树。
  jsx将html语法加入到javascript代码中，再通过编译器如babel转化到纯javascript后由浏览器执行，jsx语法使对组件结构的描述更加简洁，不然自己就得写出json对象树。
  在jsx中，html标签首字母小写，对应dom元素，组件元素的首字母大写。在一个组件的子元素位置使用注释要用{}包起来，如{/*xxxxx*/}的形式。
  在jsx中，dom元素的属性都是标准规范属性，但由于class和for是js关键字，因此用classname和htmlfor代替。省略bool值，则默认为true,如<checkbox checked>。
  react会将所有显示到dom的字符串转义，防止xss。可通过dangerouslysetinnerhtml属性去除。

1.3 react组件
  react组件基本由3个部分组成——属性(props)、状态(state)以及生命周期方法。一旦接受到的参数或自身状态有所改变，react组件会执行相应的生命周期方法，最后渲染。
  react组件构建上提供3种方法，react.createclass、es6 classes和无状态函数。

1.4 react数据流
  把react组件看成函数，它接受prop作为参数，内部由state作为函数的内部参数，返回一个virtual dom的实现。
  setstate是异步方法,一个周期内所有的state方法会合并操作。
  prop类型：

1.   react组件有一个内置prop,children,代表子组件集合。react.children提供了一系列操作children的方法。
2.   组件prop。将子组件以prop的形式传递。
3.   function prop，回调函数，用于子父组件通信，比如子组件向父组件返回值。

  proptypes可限制prop类型与必须的状态。
1.5 react组件生命周期
  react生命周期分为两个过程：当组件在挂载或卸载时；当组件接收新的数据，即组件更新时。
  挂载和卸载：
  componentwillmount(),componentdidmount(),componentwillunmount()。其中componentwillmount在render方法之前执行，componentdidmount在render方法之后，组件挂载主要做组件状态的初始化。
 数据更新过程：
 组件自身的state更新时，依次执行shouldcomponent、componentwillupdate、render和componentdidupdate,可以通过在shouldcomponent中返回false阻止渲染。如果组件是由父组件更新props而更新的，在shouldcomponent方法之前会执行componentwillreceiveprops方法。
1.6 reactdom
  只有在顶层组件以及由于react模型所限而不得不操作dom的时候才会使用。
  finddomnode，返回react组件实例对应的dom结点。
  react最终要将渲染的virtual dom渲染到浏览器dom中，就要使用render方法：reactcomponent render(reactelement element,domelement container,[function callback])。
  对于dom操作，不仅可以使用finddomnode获得该组件dom，还可以使用refs获得组件内部的dom,例如：
<comp ref=’mycomp’>,可以通过this.refs.mycomp获得引用，对于原生dom,ref获得的是dom结点引用，react 组件元素，获得的是组件实例的引用。为了防止内存泄漏，组件卸载时，记得将所有的refs设为null。