10 组件的生命周期

需求: 自定义组件

1. 让指定的文本做显示/隐藏的渐变动画

2. 切换持续时间为2S

3. 点击按钮从界面中移除组件界面

第一步：初始化定义静态组件，并渲染组件标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="../js/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/prop-types.js"></script>
10     <script src="../js/babel.min.js"></script>
11 </head>
12 <body>
13     <div id="test"></div>
14 </body>
15 </html>
16 <script type="text/babel">
17  
18     class LiftCycle extends React.Component{
19        
20         render(){
21             return(
22                 <div>
23                     <h1>{this.props.msg}</h1>
24                     <button>移除组件</button>
25                 </div>
26             )
27         }
28     }
29     ReactDOM.render(<LiftCycle msg="好好学习，天天向上"/>,document.getElementById("test"));
30 </script>

第二步：做动画，让文本的 opacity 值不断改变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="../js/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/prop-types.js"></script>
10     <script src="../js/babel.min.js"></script>
11 </head>
12 <body>
13     <div id="test"></div>
14 </body>
15 </html>
16 <script type="text/babel">
17  
18     class LiftCycle extends React.Component{
19         constructor(props){
20             super(props);
21             this.state={
22                 opacity:1,
23             }
24         }
25 
26         componentDidMount(){ ////在此方法中启动定时器/绑定监听/发送ajax请求
27             let {opacity}=this.state;//注意用let不能用const
28             setInterval(function(){
29                 opacity-=0.1;
30                 if(opacity<=0){  //<=0
31                     opacity=1;
32                 }
33                 this.setState({ opacity });
34             }.bind(this),200);//2s内从0到1的改变，每改变0.1需要200ms,bind(this)是把定时器这个函数绑定到组价对象上
35             
36         }
37        
38         render(){
39             const {opacity}=this.state;
40             return(
41                 <div>
42                     <h1 style={{opacity}}>{this.props.msg}</h1>
43                     <button>移除组件</button>
44                 </div>
45             )
46         }
47     
48     }
49     ReactDOM.render(<LiftCycle msg="好好学习，天天向上"/>,document.getElementById("test"));
50 </script>

第三步：点击按钮移除组件，使用 React.unmountComponentAtNode() 方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="../js/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/prop-types.js"></script>
10     <script src="../js/babel.min.js"></script>
11 </head>
12 <body>
13     <div id="test"></div>
14 </body>
15 </html>
16 <script type="text/babel">
17  
18     class LiftCycle extends React.Component{
19         constructor(props){
20             super(props);
21             this.state={
22                 opacity:1,
23             }
24             this.remove=this.remove.bind(this);
25         }
26 
27         componentDidMount(){ ////在此方法中启动定时器/绑定监听/发送ajax请求
28             let {opacity}=this.state;//注意用let不能用const
29             setInterval(function(){
30                 console.log("定时器执行.....");
31                 opacity-=0.1;
32                 if(opacity<=0){  //<=0
33                     opacity=1;
34                 }
35                 this.setState({ opacity });
36             }.bind(this),200);////2s内从0到1的改变，每改变0.1需要200ms,bind(this)是把定时器这个函数绑定到组价对象上
37             
38         }
39 
40         remove(){
41             ReactDOM.unmountComponentAtNode(document.getElementById("test"));
42         }
43        
44         render(){
45             const {opacity}=this.state;
46             return(
47                 <div>
48                     <h1 style={{opacity}}>{this.props.msg}</h1>
49                     <button onClick={this.remove}>移除组件</button>
50                 </div>
51             )
52         }
53     
54     }
55     ReactDOM.render(<LiftCycle msg="好好学习，天天向上"/>,document.getElementById("test"));
56 </script>

但是有一个问题，点击按钮移除组件对象之后，定时器仍然是开启的，没有关闭，所以我们需要关闭定时器。使用componentWillUnmount() 方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="../js/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/prop-types.js"></script>
10     <script src="../js/babel.min.js"></script>
11 </head>
12 <body>
13     <div id="test"></div>
14 </body>
15 </html>
16 <script type="text/babel">
17  
18     class LiftCycle extends React.Component{
19         constructor(props){
20             super(props);
21             this.state={
22                 opacity:1,
23             }
24             this.remove=this.remove.bind(this);
25         }
26 
27         componentDidMount(){ ////在此方法中启动定时器/绑定监听/发送ajax请求
28             let {opacity}=this.state;//注意用let不能用const
29             this.timer=setInterval(function(){ //使用this.timer是为了把定时器保存到当前组件对象中，以方便清楚定时器的行为可以读取定时器的id
30                 console.log("定时器执行.....");
31                 opacity-=0.1;
32                 if(opacity<=0){  //<=0
33                     opacity=1;
34                 }
35                 this.setState({ opacity });
36             }.bind(this),200);////2s内从0到1的改变，每改变0.1需要200ms,bind(this)是把定时器这个函数绑定到组价对象上
37             
38         }
39 
40         remove(){ //点击按钮，移除LifeCycle组件
41             ReactDOM.unmountComponentAtNode(document.getElementById("test"));
42         }
43 
44         componentWillUnmount(){ //清除定时器/解除监听
45             clearInterval(this.timer);
46         }
47        
48         render(){
49             const {opacity}=this.state;
50             return(
51                 <div>
52                     <h1 style={{opacity}}>{this.props.msg}</h1>
53                     <button onClick={this.remove}>移除组件</button>
54                 </div>
55             )
56         }
57     
58     }
59     ReactDOM.render(<LiftCycle msg="好好学习，天天向上"/>,document.getElementById("test"));
60 </script>