this.props为静态，this.state为动态
props一般也是父组件传递给子组件的属性，<br>而state只能是自身的属性
组件生命周期，三个状态
Mounting：已插入真实DOM
<span>主要包括属性和状态的初始化阶段、组件即将加载（</span><span>componentWillMount</span><span>）阶段、组件渲染（render）阶段、组件加载完成（</span><span>componentDidMount</span><span>）阶段。<br></span><span>除了</span><span>render</span><span>可在存在期的时候再次进行组件渲染之外，其他阶段只会发生一次</span><span><br></span>
Updating：正在被重新渲染
<span>组件实例化之后，在组件存在的时期，随着与用户的交互，属性或状态的改变，组件可发生一些更新。<br></span><span>在实际开发中，为了防止无意义的渲染，通常会在</span><span>shouldComponentUpdate</span><span>添加判断，自定义是否需要更新</span><span><br></span>
<span>一般的做法是在</span><span>componentWillReceiveProps</span><span>中根据条件判断是否需要更新状态，然后在</span><span>shouldComponentUpdate</span><span>中再根据条件判断是否需要更新渲染组件</span>
Unmounting：已移出真实DOM
每个状态提供了两种处理函数
will函数在进入状态之前调用调用
componentWillMount()
componentWillUpdate()
componentWillUnmount()
did函数在进入状态之后调用
omponentDidMount()
componentDidUpdate()
特殊处理函数
componentWillReceiveProps<br>已加载组件收到新的参数时调用
shouldComponentUpdate<br>组件判断是否重新渲染时调用
React组件样式是一个对象，所已应该写成：<br>style={{opacity: this.state.opacity}}<br>第一个大括号表示这是JavaScript语法<br>第二个大括号表示样式对象
如果需要浏览器支持JSX语法，需要引入<span>browser</span>.js<br>
<pre><code><span>// The ES5 way</span>
<span>var</span> Photo = React.createClass({
handleDoubleTap: <span><span>function</span><span>(e)</span> </span>{ … },
render: <span><span>function</span><span>()</span> </span>{ … },
});</code></pre>
<pre><code><span>// The ES6+ way</span><br><span><span>class</span> <span>Photo</span> <span>extends</span> <span>React</span>.<span>Component</span> </span>{<br> handleDoubleTap(e) { … }<br> render() { … }<br>}</code></pre>
<span>browser.js 其实就是 babel-core 的浏览器版本<br></span><a>BABEL</a><span> is a javascript compiler, and importing its "browser.min.js" file, you are enabling it to "compile" the code inside "text/babel" script tags and execute it as vanilla javascript.</span><span><br></span>
tackoverflow上的解释
<span>React.</span>createClass VS extends Component
解释1
解释2
解释3
