首页 > 代码库 > react入门----事件监听
react入门----事件监听
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 TestClickComponent = React.createClass({24 handClick: function (event) {25 event26 }27 render: function () {28 return (29 <div>30 <button onClick=this.handleClick>显示|隐藏</button><span>测试点击</span>31 </div>32 )33 }34 })35 var TestInputComponent = React.createClass({36 getInitialState: function () {37 return {38 inputContent: ‘‘39 }40 },41 render: function () {42 return(43 <div>44 <input type="text"/><span>{this.state.inputContent}</span>45 </div>46 )47 }48 })49 ReactDOM.render(50 <div>51 <TestClickComponent/>52 <br/>53 <br/>54 <TestInputComponent/>55 </div>,document.getElementById(‘container‘));56 </script>57 </body>58 </html>
react入门----事件监听
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。