react入门----组件的生命周期
关于react组件声明周期的简单认识：
1.图解Mounting
2.图解Updating
3.Unmounting
有一个函数是：componentUnmount
销毁组件的时候执行的函数，释放内存，一般使用较少，暂时不做解释
4.代码解释
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- react核心库 --> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 8 <!-- 提供与dom相关的功能 --> 9 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 10 <!-- 将es6代码转换为es5语法格式 --> 11 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 12 </head> 13 <body> 14 <div id="container"></div> 15 <!-- react组件的声明周期 --> 16 <!-- 1.Mounted ReactComponents被render函数解析生成对应的DOM节点，并被插入浏览器的DOM结构的一个过程--> 17 <!-- 2.Updata一个mounted的ReactComponents被重新render的过程 这里并不是重新渲染DOM， ReactComponents会比较当前state和最近的一次的state进行对比，只有state确实发生了改变，并影响dom结构，react才会去改变对应dom结构--> 18 <!-- 3.Unmounted 一个mounted的ReactComponents对应的DOM节点被从DOM结构中移除的这样一个过程--> 19 <!-- 每一个状态React都封装了对应的hook函数，汉语翻译为钩子函数 --> 20 <!-- hook中断系统的节点 --> 21 <!-- 每一个hook函数都有对应的两个状态，将要和已经也就是will和did --> 22 <script type="text/jsx"> 23 var Hello = React.createClass({ 24 getInitialState: function () { 25 <!-- 首先尝试去获取getInitialState中的state--> 26 alert('init') 27 return { 28 opacity: 1.0, 29 fontSize: '12px', 30 color: 'red' 31 } 32 }, 33 render: function () { 34 <!-- 因为我们getInitialState中返回的state都是合法有效的样式，所以可以直接使用this.state，否则的话，就要去对应的键值 --> 35 return <div style="this.state">Hello {this.props.name}</div> 36 <!-- 例如this.state.color或者this.state.fontSize等等 --> 37 return <div style={{color:this.state.color,fontSize:this.state.fontSize,opacity:this.state.opacity}}>Hello {this.props.name}</div> 38 }, 39 componentWillMount: function () { 40 <!-- 然后执行 componentWillMount--> 41 alert('will') 42 }, 43 componentDidMount: function () { 44 <!-- 最后执行 componentDidMount--> 45 alert('did') 46 <!-- 在这里可以通过this.setState来修改state的值 --> 47 <!-- 这里的this指的是 ReactComponents的实例对象--> 48 <!-- 这里为什么要缓存this，是因为在window.setTimeout的回调函数中，this代表的是全局对象，也就是window，所以要缓存this --> 49 <!-- var _self = this 50 window.setTimeout(function() { 51 _self.setState({ 52 opacity: 0.5, 53 fontSize: '44px', 54 color: 'blue' 55 }) 56 }) --> 57 <!-- 使用bind简写 --> 58 window.setTimeout(function() { 59 this.setState({ 60 opacity: 0.5, 61 fontSize: '44px', 62 color: 'blue' 63 }) 64 }.bind(this), 1000) <!--这里是将函数里面的this指向函数外面的this，也就是ReactComponents的实例对象--> 65 } 66 }) 67 ReactDOM.render( 68 <Hello name="hehe" />, 69 document.getElementById('container') 70 ); 71 </script> 72 </body> 73 </html>
