react 16.8.4版本中的生命周期中的细节在组件挂在时使用了定时器的处理——尚硅谷React教程（2022加更，B站超火react教程）学习笔记

react 16.8.4版本中

如果页面加载时要挂在一个定时器，且里面在修改状态，一定不能写在render里面，需要写到生命周期函数 componentDidMount中，否则会导致循环更新页面状态反复调用render造成死循环

另外定时器的卸载可以统一放在componentWillUnmount里面进行处理，这样代码更合理，思路更清晰

 1         class Life extends React.Component {
 2             state={opacity:1}
 3             death=()=>{
 4                 clearInterval(this.timer)
 5                 ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
 6             }
 7             componentDidMount() {
 8                 this.timer=setInterval(() => {
 9                     let {opacity}=this.state
10                     opacity-=0.1
11                     if(opacity<=0) opacity=1
12                     this.setState({opacity})
13                 }, 200);
14             }
15             render() {
16                 console.log('render')
17                 const {opacity}=this.state
18                 return (
19                     <div>
20                         <h1 style={{opacity:opacity}}>React学不会怎么办</h1>
21                         <button onClick={this.death}>不活了</button>
22                     </div>
23                 )
24             }
25         }
26         ReactDOM.render(<Life />,document.querySelector('#test'))

 1         class Life extends React.Component {
 2             state={opacity:1}
 3             death=()=>{
 4                 ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
 5             }
 6             componentDidMount() {
 7                 this.timer=setInterval(() => {
 8                     let {opacity}=this.state
 9                     opacity-=0.1
10                     if(opacity<=0) opacity=1
11                     this.setState({opacity})
12                 }, 200);
13             }
14             
15             componentWillUnmount(){
16                 clearInterval(this.timer)
17             }
18             render() {
19                 console.log('render')
20                 const {opacity}=this.state
21                 return (
22                     <div>
23                         <h1 style={{opacity:opacity}}>React学不会怎么办</h1>
24                         <button onClick={this.death}>不活了</button>
25                     </div>
26                 )
27             }
28         }
29         ReactDOM.render(<Life />,document.querySelector('#test'))