提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

React--13:引出生命周期

组件 状态
2023-02-25 18:16:22 时间

这是我参与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);
    }

componentWillUnmount

组件将要被卸载的时候调用。把定时器加到这也是可以的。

像 componentWillUnmount、componentDidMount这些 生命周期回调函数 === 生命周期钩子函数 ===生命周期函数 ===生命周期钩子

相关文章