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

react 16.8.4版本中

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

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

        class Life extends React.Component {
            state={opacity:1}
            death=()=>{
 4                 clearInterval(this.timer)
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }
            componentDidMount() {
                this.timer=setInterval(() => {
                    let {opacity}=this.state
                    opacity-=0.1
                    if(opacity<=0) opacity=1
                    this.setState({opacity})
                }, 200);
            }
            render() {
                console.log('render')
                const {opacity}=this.state
                return (
                    <div>
                        <h1 style={{opacity:opacity}}>React学不会怎么办</h1>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Life />,document.querySelector('#test'))

 

        class Life extends React.Component {
            state={opacity:1}
            death=()=>{
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }
            componentDidMount() {
                this.timer=setInterval(() => {
                    let {opacity}=this.state
                    opacity-=0.1
                    if(opacity<=0) opacity=1
                    this.setState({opacity})
                }, 200);
            }
            
15             componentWillUnmount(){
16                 clearInterval(this.timer)
17             }
            render() {
                console.log('render')
                const {opacity}=this.state
                return (
                    <div>
                        <h1 style={{opacity:opacity}}>React学不会怎么办</h1>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Life />,document.querySelector('#test'))