首页 > 代码库 > react.JS基础
react.JS基础
1、ReactDOM.render()
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript" src="js/react.js"></script> 7 <script type="text/javascript" src="js/react-dom.js"></script> 8 <script type="text/javascript" src="js/browser.min.js"></script> 9 <style type="text/css"> 10 #example{width: 300px;height: 100px;background: lightblue;} 11 </style> 12 </head> 13 <body> 14 <div id="example"></div> 16 <script type="text/babel"> 17 ReactDOM.render( 18 <p>测试reactdom.render</p>, 19 document.getElementById("example") 20 ) 21 </script> 22 </body> 23 </html>
运行结果：
2、jsx语法
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript" src="js/react.js"></script> 7 <script type="text/javascript" src="js/react-dom.js"></script> 8 <script type="text/javascript" src="js/browser.min.js"></script> 9 <style type="text/css"> 10 #example{width: auto;height: 100px;background: lightblue;} 11 </style> 12 </head> 13 <body> 14 <div id="example"></div> 15 <script type="text/babel"> 16 var names=[‘AAA‘,‘BBB‘,‘CCC‘]; 17 ReactDOM.render( 18 <div> 19 { 20 names.map(function(name,index){ 21 return <div key={index}>Hello,{name}!</div> 22 }) 23 } 24 </div>, 25 document.getElementById("example") 26 ) 27 </script> 28 </body> 29 </html>
运行结果：
- 上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
- JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
<body> <div id="example"></div> <script type="text/babel"> var arr=[ <h1 key="1">Hello world!</h1>, <h2 key="2">I love react!</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById("example") ) </script> </body>
运行结果：
3、组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
1 <body> 2 <div id="example"></div> 3 <script type="text/babel"> 4 var HelloMessage = React.createClass({ 5 render:function(){ 6 return <h1>Hello {this.props.name}</h1> 7 } 8 }); 9 ReactDOM.render( 10 <HelloMessage name = "John" />, 11 document.getElementById("example") 12 ) 13 </script> 14 </body>
运行结果：
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的‘组件‘都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name=‘John‘ /> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
4、this.props.children
this.props.children 属性，它表示组件的所有子节点。
1 <body> 2 <div id="example"></div> 3 <script type="text/babel"> 4 var NotesList = React.createClass({ 5 render: function() { 6 return( 7 <ol> 8 { 9 React.Children.map(this.props.children,function(child){ 10 return <li>{child}</li>; 11 }) 12 } 13 </ol> 14 ); 15 } 16 }); 17 ReactDOM.render( 18 <NotesList> 19 <span>hello</span> 20 <span>world</span> 21 </NotesList>, 22 document.getElementById("example") 23 ); 24 </script> 25 </body>
运行结果：
5、React.findDOMNode()
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 React.findDOMNode 方法。
1 <body> 2 <div id="example"></div> 3 <script type="text/babel"> 4 var MyComponent = React.createClass({ 5 handleClick:function(){ 6 this.refs.myTextInput.focus(); 7 }, 8 render:function(){ 9 return( 10 <div> 11 <input type="text" ref="myTextInput" /> 12 <input type="button" value="Focus the text input" onclick={this.handleClick} /> 13 </div> 14 ); 15 } 16 }); 17 18 ReactDOM.render( 19 <MyComponent/>, 20 document.getElementById(‘example‘) 21 ) 22 </script> 23 </body>
运行结果：
1 <body> 2 <div id="example"></div> 3 <script type="text/babel"> 4 var data = 123; 5 var MyTitle = React.createClass({ 6 propTypes: { 7 title: React.PropTypes.string.isRequired, 8 }, 9 render: function() { 10 return <h1> {this.props.title} </h1>; 11 } 12 }); 13 ReactDOM.render( 14 <MyTitle title={data} />, 15 document.getElementById(‘example‘) 16 ); 17 </script> 18 </body>
运行结果：
6、this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。
1 <body> 2 <div id="example"></div> 3 <script type="text/babel"> 4 var LikeButton = React.createClass({ 5 getInitialState: function() { 6 return {liked: false}; 7 }, 8 handleClick: function(event) { 9 this.setState({liked: !this.state.liked}); 10 }, 11 render: function() { 12 var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘; 13 return ( 14 <p onClick={this.handleClick}> 15 You {text} this. Click to toggle. 16 </p> 17 ); 18 } 19 }); 20 ReactDOM.render( 21 <LikeButton />, 22 document.getElementById(‘example‘) 23 ); 24 </script> 25 </body>
上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
7、表单
1 <body>
2 <div id="example"></div>
3 <script type="text/babel">
4 var Input = React.createClass({ getInitialState: function() { return {value: ‘Hello!‘}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return (
5 <div>
6 <input type="text" value={value} onChange={this.handleChange} />
7 <p>{value}</p>
8 </div>
9 ); } }); ReactDOM.render(
10 <Input/>, document.getElementById(‘example‘));
11 </script>
12 </body>
react.JS基础