14生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/babel">
    //挂载 mount   卸载unmount
class Life extends React.Component{
    state={opacity:1}
    death=()=>{

        //卸载组件
        ReactDOM.unmountComponentAtNode(test)

    }
    //组件将要卸载
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    //组件挂载完毕后调用
    componentDidMount(){
   this.timer = setInterval(()=>{
            let {opacity} =this.state
            opacity -= 0.1
            if (opacity <= 0) opacity = 1

            this.setState({opacity})
        },200)
    }
    //render调用的时机:初始化渲染,状态更新后
    render(){

        return (
            <div>
                <h2 style={{opacity:this.state.opacity}}>React学不会怎么办?</h2>
                <button onClick={this.death}>不活了</button>
            </div>
        )
    }
}
ReactDOM.render(<Life/>,test)
</script>
posted @ 2022-07-06 10:14 大宁0615 阅读(18) 评论(0) 收藏举报
刷新页面返回顶部