React部分总结

React是什么？

React虽然抽离自一个具备完整框架的生态系统中，但它并不像Angular等是一个完整的框架，而仅仅是一个View层。

React提供了模板语法及一些函数钩子用于基本的HTML渲染，将HTML与javascript合在一起成为「组件」，允许把它们自己的状态存在内存中，不过最后的全部输出只是HTML。所以，我们没办法仅使用React来创建一个功能完备的动态应用。

在实际应用中有三大特性（好处）：

1.通过查看源文件就可以知道你的组件将会如何渲染。

2.将javaScript和HTML绑定到JSX中使组件更易懂。

3.可以在服务器端渲染React

缺陷：

1.不包含：事件系统（除原生DOM事件外）、Ajax功能、数据层、Promises、应用程序架构及实现以上功能的规范。这迫使开发者需要重新造轮子。

2.React体积大且不包含任何类型的应用类库和插件，对浏览器支持有限（IE8及以上）（IE8需用ES5 shim来处理）。

React 中的props与state

React组件是一个状态机，接受两个输入参数：this.props和this.state,返回一个虚拟DOM。组件可以拥有其自己的“状态”。且实例的状态是唯一的，这使我们能够重复多次使用相同的组件但却让它们看起来完全不同。

Props

React中，可以传递属性到组件中，并且不局限于是HTML属性，在组件内就可以通过this.props来访问它们。props是一种从父级向子级传递数据的方式，为了保持this.props的一致性，不允许组件来修改自己的props,只能通过父组件来修改，需要自行修改的值，就应该放在this.state中。

当父级没有传入props时，我们可以通过getDefaultProps()以声明的方式来定义props的默认值，它的结果会被缓存。

组件的子代可用this.props.children表示。并且React.Children为处理this.props.children这个封闭的数据结构提供了有用的工具：React.Children.map/forEach/count/only。

PropTypes

propTypes的引入，是为了保证组件能够被正确的使用。我们可以随意为每一个属性指定类型。React.propTypes提供了很多验证器（validator）（与组件propType对象共用的类型）来验证传入数据（组件的props）的有效性，但为了性能考虑，只在开发环境下验证propTypes。

主要给予两方面的好处：

1.当打开组件时，可以很清楚的知道，包含了哪些属性，以及哪些是必须的。

2.当属性错误，或缺失的时候会在控制台打印出来

eg:

< MyComponent position="fixed" size={24}/> 

//position & size is props made up by the  author of that component.

//Using anything other than a string you need to wrap your props in {}

propTypes: {

  size: React.PropTypes.number,

  position: React.PropTypes.string.isRequired

}

State

React组件其实是状态机（State Machines）把用户界面想象成拥有不同状态然后渲染这些状态，就可以使之与数据保持一致。

大部分组件是无状态组件，是从自身的props取值并一次性渲染，但为了实现交互引入了可变的state。this.state属于组件的私有成员，使用对this.state赋值并没有什么作用，可以通过调用this.setState()进行修改，会触发异步修改状态（合并（merge）data到this.state），状态改变的同时，会重新执行一次willUpdate,render等流程，完成对自身进行重新渲染。需要注意的是，避免在执行完this.setState后马上读取this.state，此操作并不会获得最新修改的状态。

为了正确构建应用，首先需要考虑应用需要的最小的可变 state 数据模型集合。此处关键点在于精简：不要存储重复的数据。常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。

• 判断哪些可以是state：
  1.不是从父级通过props传入的。
  2.会随时间而改变。
  3.不是根据组件中其它state数据或props计算所得。

MixIns

React推崇通过组合的方式来组织大规模的应用，非继承的方式来处理具有从属关系的父子组件。

所以，React不存在像React.extend之类的方法定义子类实现继承，而是通过mixins来处理复杂组件间共用的功能（跨切面关注点）。

mixins有点类似AOP。所谓的mixins就是将组件里的方法抽出来。实际上Mixins里的this是指向组件的，使用了Mixins以后，组件也可以调用Mixins里的方法。

React 提供 生命周期方法 来告知组件创建或销毁的时间,Mixins里也可以编写组件生命周期的方法，需要注意的是：Mixins里的方法并不会覆盖组件的生命周期方法，会在先于组件生命周期方法执行。数组引入的顺序，决定了Mixins里生命周期方法的执行顺序。

如果一个组件使用了多个 mixin，并且有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。

注意：

1.除了生命周期方法可以重复以外，其他的方法都不可以重复，否则会报错，引用的mixin中组件的方法不可与其他引用组件或自身的方法相同（生命周期方法除外）。

2.mixins的作用是抽离公共功能，不存在渲染dom的需要，所以它没有render方法。

3.mix ins不应该污染state，所以他也没有 setState 方法。

4.mixin应该只提供接口（即方法），不应该提供任何属性。mixin内部的属性最好是通过闭包的形式作为私有变量存在。

组件的生命周期

1.创建类

React组件有类和实例的区别。通过React.createClass创建的是类，此时只有一个回调函数getDefaultProps会被调用。这个回调函数会返回一个对象，会以引用（不是clone）方式被所有实例共享。

2.实例化

类创建完成后即可进行实例化，实例化一个类的过程组成：

getInitialState: 获取 this.state 的默认值。
componentWillMount: 在render之前调用此方法，在render之前需要做的事情，包括业务逻辑，服务器端和客户端都只调用一次。
render: 渲染并返回一个虚拟DOM，实际是一个js对象。render完成后，真实DOM还不存在。render只处理与展示有关的逻辑，如格式化时间。一定不会出现State之类的方法。

• componentDidMount: 在render之后，react会使用render返回的虚拟DOM来创建真实DOM，完成之后调用此方法，仅客户端有效（服务器端不会调用）。组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。

3.更新

组件实例化完成后进入存在期，此时一般会响应用户操作和父组件的更新来更新视图。

• componentWillRecieveProps: 父组件或者通过组件的实例调用 setProps 改变当前组件的 props 时调用。

• shouldComponentUpdate: 是否需要更新，慎用。在接收到新的 props 或者 state，将要渲染之前调用。

• componentWillUpdate: 在接收到新的 props 或者 state 之前立刻调用。初始化渲染的时该方法不会被调用。

• render: 重新渲染并返回一个虚拟DOM

• componentDidUpdate: 真实DOM已经完成更新。

4.销毁

• componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。