您的位置：首页 > Web前端 > React

React学习学习笔记

2016-04-19 15:13 603 查看

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Hello World!</title>
<!-- 装载react -->
<script src="./react-0.14.8/build/react.js"></script>
<script src="./react-0.14.8/build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>

<body>
<div id="example">
</div>
<!--组件类的propTypes属性，就是用来验证组件实例的属性是否合法？-->
<script type="text/babel">
//自定义一个名称为HelloWorld的组件，注意组件名称必须以大写字母开头
var HelloWorld = React.createClass({
//验证该组件的name、sex属性是否合法
propTypes:{
name:React.PropTypes.string.isRequired,
sex:React.PropTypes.string.isRequired
},
//创建类的时候调用，可用来设置组件的默认值
getDefaultProps:function(){
return {
name:"小强",
sex:"男"
};
console.log("创建类的时候调用getDefaultProps");
},
//定义了变量的初始状态，也就是一个对象，这个对象可以通过this.state属性读取
getInitialState:function(){
return {
liked:false
};
console.log("获取this.state的默认值getInitialState");
},
handleClick:function(event){
this.setState({liked:!this.state.liked});
console.log("你执行了点击方法");
},
render: function(){
var text = this.state.liked?"liked":"do not liked";
console.log("render渲染并返回一个虚拟DOM");
return (
<p onClick={this.handleClick}>Hello {this.props.name}{this.props.sex}{text}</p>
);
},
componentDidMount:function(){
console.log("render之后调用，会使返回的虚拟DOM来创建真实DOMcomponentDidMount");
},

componentWillUnmount:function(){
console.log("componentWillUnmount");
},

});
ReactDOM.render(<HelloWorld name="" sex=""></HelloWorld>,document.getElementById("example"));
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： React

相关文章推荐

新的分享

章节导航