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>
原文：https://www.cnblogs.com/shanlu0000/p/12488078.html