One
Second, the Code
<! DOCTYPE html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> Document </ title>
</ head>
<body>
<script src = "./ jquery-2.1.4.min.js"> </ script>
<script src = "./ react-0.13.2 / build / react.js"> </ script>
<script src = "./ react-0.13.2 / build / JSXTransformer.js"> </ script>
<script type = "text / jsx">
$ (function () {
var count = 0;
var style = {
color: "red",
border: "1px # 000 solid",
};
var HelloWorld = React.createClass ({
getDefaultProps: function () {
console.log ("getDefaultProps1");
return {name: ‘tony’};
},
getInitialState: function () {
console.log ("getInitialState2");
return {myCount: count ++, reayd: false};
},
componentWillMount: function () {
console.log ("componentWillMount3");
this.setState ({ready: true});
},
render: function () {
console.log ("render4");
return <p ref = "childp"> Hello, {this.props.name? this.props.name: "World"} <br/> {"" + this.state.ready} {this.state.myCount} < / p>
},
componentDidMount: function () {
console.log ("componentDidMount5");
$ (React.findDOMNode (this)). Append ("surprise !!");
}
});
React.render (<div style = {style}> <HelloWorld> </ HelloWorld> <br/> <HelloWorld> </ HelloWorld> </ div>, document.body);
});
</ script>
</ body>
</ html>
Results:
React component life cycle-functions that perform the initialization phase correctly
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
