自己写的React小例子

用了之后发表下对React的看法,怎么说呢,我感觉还没有拼字符串爽,React适用于复杂的页面,唯一优点就是灵活度高,特点就是将html和js揉在一起,做简单的页面的话就是牛刀杀鸡的感觉。上代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312">
    <title>Basic Example</title>
    <script src="../../lib/react-0.14.7/build/react.js"></script>
    <script src="../../lib/react-0.14.7/build/react-dom.js"></script>
    <script src="../../lib/react-0.14.7/build/browser.min.js"></script>
    <script src="../../lib/react-0.14.7/build/jquery-1.7.2.min.js"></script>
    <style>
    	.tb{
    		border-collapse:collapse;
    	}
    	.tb td{
    		border:1px solid #eee;width:100px;
    	}
    </style>
    <script type="text/babel">
      	/*var names=['小明','小红','小芳'];
      	ReactDOM.render(
      		<div>
      		{
      			names.map(function(name){
	      			return <div>hellow,{name}</div>
	      		})
      		}
      		</div>,document.getElementById("xx")
      	);*/
      	/*var names=[<div>小明</div>,<div>小红</div>,<div>小芳</div>];
      	ReactDOM.render(
      		<div>
      		{names}
      		</div>,<div>小芳</div>];
      	var Hello=React.createClass({
      		render:function(){
      			return <div>{this.props.name.map(function(name){
      				return name
      			})}</div>
      		}
      	});
      	ReactDOM.render(
      		<Hello name={names}></Hello>,document.getElementById("xx")
      	);*/
      	/*var Hello=React.createClass({
      		render:function(){
      			return <div>{React.Children.map(this.props.children,function(c){
      				return <li>{c}</li>
      			})}</div>
      		}
      	});
      	ReactDOM.render(
      		<Hello>
      			<div>小明<p>哈哈</p></div>
      			<div>小红</div>
      			<div>小芳</div>
      		</Hello>,document.getElementById("xx")
      	);*/
      	/*var Hello=React.createClass({
      		getdate:function(){
      			$(this.refs.txt).val(new Date().toLocaleTimeString().toString());
      		},render:function(){
      				return <div>
		      			<input type='text' value={new Date().toLocaleTimeString()} ref='txt' />
		      			<input type='button' value='按钮' ref='bt' onClick={this.getdate} />
		      		</div>
      		}
      	});
      	ReactDOM.render(
      		<Hello />,document.getElementById("xx")
      	);*/
      	var Hello=React.createClass({
      		getInitialState:function(){
      			return {loading:true,data:null};
      		},query:function(){
      			this.setState({
      				loading:false,data:[
						{index:"1",name:"小明1",sex:"男",tel:"123456789"},{index:"2",name:"小明2",{index:"3",name:"小明3",{index:"4",name:"小明4",{index:"5",name:"小明5",{index:"6",name:"小明6",{index:"7",name:"小明7",{index:"8",name:"小明8",{index:"9",name:"小明9",{index:"10",name:"小明10",tel:"123456789"}
      				]
      			});	
      		},componentDidMount:function(){
				
      		},render:function(){
      			if(this.state.loading){
      				return <input type='button' value='查询' onClick={this.query} />;
      			}
      			else{
      				var lt=this.state.data;
      				var trs=lt.map(function(item){
      					return (
      						<tr>
      							<td>{item.index}</td><td>{item.name}</td><td>{item.sex}</td><td>{item.tel}</td>
      						</tr>
      					);
      				});
      				return (
      					<div>
	      					<table className="tb">{trs}</table>
	      					<input type="button" value="查询" onClick={this.query} />
      					</div>
      				);
      			}
      		}
      	});
      	ReactDOM.render(
      		<Hello/>,document.getElementById("xx")
      	);
    </script>
  </head>
  <body>
  <div id="xx"></div>
  </body>
</html>

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...