html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="UTF-8" />5
<title>React 实例</title>6
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>7
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>8
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>9
</head>10
<body>11
<div id="example"></div>12
13
<script type="text/babel">14
class Button extends React.Component {15
constructor(props) {16
super(props);17
this.state = {data: 0};18
this.setNewNumber = this.setNewNumber.bind(this);19
}20
21
setNewNumber() {22
this.setState({data: this.state.data + 1})23
}24
render() {25
return (26
<div>27
<button onClick = {this.setNewNumber}>INCREMENT</button>28
<Content myNumber = {this.state.data}></Content>29
</div>30
);31
}32
}33
34
35
class Content extends React.Component {36
componentWillMount() {37
console.log('Component WILL MOUNT!')38
}39
componentDidMount() {40
console.log('Component DID MOUNT!')41
}42
componentWillReceiveProps(newProps) {43
console.log('Component WILL RECEIVE PROPS!')44
}45
shouldComponentUpdate(newProps, newState) {46
return true;47
}48
componentWillUpdate(nextProps, nextState) {49
console.log('Component WILL UPDATE!');50
}51
componentDidUpdate(prevProps, prevState) {52
console.log('Component DID UPDATE!')53
}54
componentWillUnmount() {55
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java