这两天看到了react js前端框架，里面的内容确实值得学习，给我们一种新型的操作DOM的思路，利用数据进行操作，不像jQuery那样找DOM节点。react js一切都是数据。数据更改了，重新渲染。
React是一个JavaScript库，因此它需要你熟悉JavaScript。如果你感觉还不够了解，我们建议看看MDN上有关JavaScript的内容，以便你学得更轻松。
话不多少，直接上代码。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> <link rel="stylesheet" href=""> <style type="text/css" media="screen"> .tel{ background:blue; } .hig{ background:red; } .gray{ background: gray; } </style> </head> <body> <div id="myApp"></div> <script type="text/babel"> var myApp = document.querySelector("#myApp"); class App extends React.Component { //处理 constructor (props) { super(props); this.state={"value":"请点击下面的按钮！","flag":true,"tel":"gray"}; this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { console.log(this.props.value); //改变数据，又重新渲染了了。 if(this.state.flag){ this.setState({ "value" : "第一次点击", "flag" : !this.state.flag, "tel" : "tel" }); }else{ this.setState({ "value" : "第二次点击", "flag" :true, "tel" : "hig" }); } } //渲染 render () { return ( <div> <h1 className={this.state.tel}>{this.state.value}</h1> <button onClick={this.handleToggleClick} >点击SKY8G</button> </div> ); } } //初始化渲染 ReactDOM.render( <App />, myApp ); </script> </body> </html> |