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 event
26 }
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>
时间： 2024-11-06 15:47:33