react组件
react的组件是其核心思想部分，react允许将整个ui设计分割称为独立的、可复用的隔离模块，react的组件是一个抽象的类，直接使用reacy.component是没有很大意义的，所以一般使用的方法就是定义一个 class 来继承这个component，并且需要实现方法 render（）；就像下面一样：
class Greeting extends React.Component {
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
如果不想使用es6的class，也可以使用react提供的react.createClass({}),就像如下：
var Hello = React.createClass({
render: function() {
return <div>Hello Taobao,Hello UED</div>;
}
});
对于定义好的组件，就可以直接使用了，react在使用html标准标签和react组件标签时是通过首字母来进行区别的，大写首字母就是自定义组件，无论是自定义组件还是html标准标签，处理的方式是一样的，使用React.createElemment来进行过组件的引用：
React.createElement( type,[props],[...children] )
这也是说明在jsx中无法书写 if for之类的语句，且可以使用js表达式的原因了。可以看看：http://reactjs.cn/react/tips/...
// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>
// Is transformed to this JS:
React.createElement("div",{id: if (condition) { 'msg' }},"Hello World!");
ReactDOM.render(<div id={condition ? 'msg' : null}>Hello World!</div>,mountNode);
react生命周期
参考：https://facebook.github.io/re...
https://segmentfault.com/a/11...
-
mounting （实例化阶段）这个阶段的方法都是在组件被实例化、插入DOM中的过程中被顺序调用的
-
getDefaultProps、getInitialState或者 constructor(props)
【前两者es5写法，都是配合create-react-class可以设置初始 props、state的内容，】
var createReactClass = require('create-react-class'); var Greeting = createReactClass({ getDefaultProps: function() { return { name: 'Mary' }; },getInitialState: function() { return {count: this.props.initialCount}; },// ... });【后者使用es6写法，通过使用class就可以完成上面的操作，比较的简单】
class Greeting extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; } // ... } Greeting.defaultProps = { name: 'Mary' };在实例化之前counstructor会被调用，首先需要执行的是 super（props），这句需要在构造函数的最前面，这里也是最适合初始化state的地方，如果这个组件不需要state、也不需要绑定任何方法，可以不调用constructor函数，
-
componentWillMount()
在实例化时最开始执行，在这里同步的修改state不会引起重新的渲染，在这里需要注意的是，官网有这样一段话： This is the only lifecycle hook called on server rendering. Generally,we recommend using the constructor() instead. 我的理解是服务端渲染的实例化阶段只会执行componentWillMount这一个钩子，不过参考的文章：https://segmentfault.com/a/1190000004168886#articleHeader3 有这样的描述，这里具体就不太清楚了： ![图片描述][1]
render() 补充部分有说明
-
componentDidMount()
官网说了，这个是在实例化完成立刻调用的函数，所以如果需要异步请求的话这里是最好的选择，然后更新state，从而进行重新渲染。
-
-
updating （更新期）在组件的props、state发生变化需要重新渲染时调用这个阶段的函数
-
componentWillReceiveProps(nextProps)
在实例化完成以后，如果有新的props将接受了，可以在这里处理props的对比，可能props没有改变也会触发这个钩子函数，可能输父级元素的重新渲染，只在更新期才会触发，当然在更新期修改state并不会触发
-
shouldComponentUpdate()
在更新期接受到了props和state后，这里可以对比props和state，从而分析是否需要进行重新的渲染，这个函数在forceUpdate（）来进行强制刷新时不会被调用，这个函数会返回布尔值，当返回false时，后面的willupdate、render、didupdate都不会执行，不过这并不会影响改组件的子元素的渲染，当子元素的props或者state有变化时还是会重新渲染。
-
componentWillUpdate(nextProps,nextState)
这里最好不要做stestate的事情，setstate可以在componentWillReceiveProps时使用，如果shouldComponentUpdate返回false则不会调用了。
render()
-
componentDidUpdate()
这里是进行DOM操作的最佳时机，也是发起异步请求数据的好时机
-
-
unmounting （销毁期）当组件需要从DOM中移除时，或者页面切换时需要调用
-
componentWillUnmount()
这里可以用来消除创建的定时器、dom元素、异步请求等资源
-
