1⃣引出生命周期

通过一个案例来了解生命周期

效果

需求: 自定义组件

1. 让指定的文本做显示/隐藏的渐变动画

2. 切换持续时间为2S

3. 点击按钮从界面中移除组件界面

理解

• 组件对象从创建到死亡它会经历特定的生命周期阶段
• React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
• 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

尝试代码：

<script type="text/babel">
    class LifeCycle extends React.Component {
        state = {
            opacity: 1,
            timer:""
        };

        tryHard = (event) => {
            //卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById("app"))
        };

        //render调用时机:初始化, setState状态更新之后
        render() {
            //不知道生命周期之前 因为不能再类里面写函数体 只能再render方法里面写setInterval
					//每次setState 都会调用render方法 生成多个定时器
            setInterval(() => {
                let {opacity} = this.state;
                opacity -= 0.1;
                if (opacity <= 0) opacity = 1;
                //key 与 value 变量同名 可以简写
                this.setState({opacity});
            }, 200);

            return (
                <div>
                    <h1 style={{opacity: this.state.opacity,}}>強くなりたい</h1>
                    <button onClick={this.tryHard}>頑張れ</button>
                </div>

            )
        }
    }

    ReactDOM.render(<LifeCycle/>, document.getElementById("app"),);

</script>