React--13:引出生命周期

---

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

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

点击按钮，让组件消失

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

代码语言：javascript复制

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驱动页面透明度呢？给文字添加样式

代码语言：javascript复制

 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

代码语言：javascript复制

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"。发现打印次数是指数型式的增长