<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React组件的生命周期
</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass(
{
getDefaultProps:function(){
console.log("getDefaultProps");
return {};
},
getInitialState:function(){
console.log("getInitialState");
return {};
},
componentWillMount:function(){
console.log("componentWillMount");
},
render:function(){
console.log("render");
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是中国梦苏</h1>;
},
componentDidMount:function(){
console.log("componentDidMount");
},
componentWillReceiveProps:function(){
console.log("componentWillRecieveProps");
},
shouldComponentUpdate:function() {
console.log("shouldComponentUpdate");
return true;
},
componentWillUpdate:function(){
console.log("componentWillUpdate");
},
componentDidUpdate:function(){
console.log("componentDidUpdate");
},
componentWillUnmount:function(){
console.log("componentWillUnmount");
}
}
);
ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-14693.html
