React--13:引出生命周期

用户4793865

发布于 2023-01-12 14:22:13

7080

发布于 2023-01-12 14:22:13

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

这是我参与8月更文挑战的第20天，活动详情查看:8月更文挑战

例子：点击按钮，文字从0变为1，再从1变为0

点击按钮，让组件消失

给按钮加点击事件
卸载组件 API：unmountComponentAtNode

class Life extends React.Component{
    // 挂载：mount
    // 卸载：unmount
    leave = ()=>{
        // 卸载
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }  
    render(){
        return(
            <div>
                <h1>React学不会怎么办？</h1>
                <button onClick={this.leave}>不活了</button>
            </div>
        )
    }
}

改变文字的透明度

谁能驱动页面的更新？状态中的数据。所以在state中添加透明度的变量。
怎么让这个state中的opacity驱动页面透明度呢？给文字添加样式

 state = {
        opacity:1
    }
    // 挂载：mount
    // 卸载：unmount
    leave = ()=>{
        // 卸载
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    render(){
        return(
            <div>
                <h1 style={{opacity:this.state.opacity}}>React学不会怎么办？</h1>
                <button onClick={this.leave}>不活了</button>
            </div>
        )
    }
}

实现从完全可见到彻底消失，耗时2s

开启一个循环定时器，每次减少0.1。循环定时器每200ms减少0.1。

我们将定时函数写到类中发现报错了，注意类中是不可以随便写代码的。类中可以写：构造器、自定义函数、赋值语句、static声明的赋值语句。

所以定时方法不能写在这。我们能放在leave中吗？都已经卸载组件了，好像不太合适。那我们只能写到render方法中了。写在return底下合适吗？都已经return了，下面的代码不执行了，好像也不太合适。所以只能写在render方法中的 return 的顶部。

在定时器中修改state状态值，当opacity<=0，再把opacity变为1

render(){
        setInterval(() => {
            // 获取原状态
            let {opacity} = this.state
            // -0.1
            opacity -= 0.1
            // 当小于等于0时，再把值变为 1。没有else条件省略 {}
            if(opacity <= 0) opacity = 1
            //设置新的透明度
            this.setState({opacity})
        }, 200);
        return(
            <div>
                <h1 style={{opacity:this.state.opacity}}>React学不会怎么办？</h1>
                <button onClick={this.leave}>不活了</button>
            </div>
        )
    }

无限递归

但是现在页面刷新的有些不太正常。引发了一个无限的递归。

原因：render中的定时器每200ms执行一次，每次都会更改状态state，state改变就会触发render对页面进行渲染。

我们在render中打印一下 "render"。发现打印次数是指数型式的增长📈 。

所以定时器放在这里不太合适。

componentDidMount

为什么componentDidMount就不用写成赋值语句加尖头函数的形式呢？因为componentDidMount是跟render同一级别的，是React创建类的实例对象之后弄出来的。它的this指向是不会丢失的。

componentDidMount(){

 }

componentDidMount在什么时候调用？在组件挂载页面之后调用

所以我们现在把定时器写到 componentDidMount 中。

 // 组件挂载页面之后调用
    componentDidMount(){
        setInterval(() => {
            // 获取原状态
            let {opacity} = this.state
            // -0.1
            opacity -= 0.1
            // 当小于等于0时，再把值变为 1
            if(opacity <= 0) opacity = 1
            //设置新的透明度
            this.setState({opacity})
        }, 200);
    }

现在，实现了我们想要的结果。但是点击按钮会发现如下的报错：大体意思是组件被卸载了，没法执行状态的更新。

原因：组件已经被卸载了，计时器还在跑。所以我们需要停掉计时器。

停止定时器

那么什么时候清空定时器比较好？在点击按钮的时候。

使用clearInterval() 方法，需要定时器的id，才能清除定时器。

给setInterval 挂载到实例自身this.timer = setInterval 。

  leave = ()=>{
        // 清除定时器
        clearInterval(this.timer)
        // 卸载
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    // 组件挂载页面之后调用
    componentDidMount(){
        this.timer = setInterval(() => {
            // 获取原状态
            let {opacity} = this.state
            // -0.1
            opacity -= 0.1
            // 当小于等于0时，再把值变为 1
            if(opacity <= 0) opacity = 1
            //设置新的透明度
            this.setState({opacity})
        }, 200);
    }