<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Count extends React.Component{
constructor (props) {
super(props)
this.state = {count: 0}
}
componentWillMount () {
console.log('组件将要挂载')
}
componentDidMount () {
console.log('组件已经挂载完成')
}
shouldComponentUpdate () {
console.log('组件是否允许被更新')
return true
}
componentWillUpdate () {
console.log('组件将要更新')
}
componentDidUpdate () {
console.log('组件更新完成')
}
componentWillUnmount () {
console.log('组件将要销毁')
}
add = () => {
const {count} = this.state
this.setState({count: count + 1})
}
death = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
force = () => {
this.forceUpdate()
}
render () {
console.log('render')
const {count} = this.state
return (
<div>
<h2>
当前求和为: {count}
</h2>
<button onClick={this.add}>点我+1</button> <br/>
<button onClick={this.death}>销毁组件</button> <br/>
<button onClick={this.force}>强制更新</button>
<NewComponent test={this.state.count}/>
</div>
)
}
}
class NewComponent extends React.Component {
componentWillReceiveProps (props) {
console.log('父组件向子组件更新值', props)
}
render () {
return(
<div>
我是子组件的数据: {this.props.test}
</div>
)
}
}
ReactDOM.render(<Count/>, document.getElementById('test'))
</script>
</body>
</html>
react生命周期(旧)
最新推荐文章于 2024-03-17 07:45:00 发布