037_引出生命周期

如果你学了React ,但是你对于他的声明周期一无所知

那约等于你没有学习React

// 从页面上移除一个组件// 渲染是render, 移除是???

// 渲染也可以说成是把组件挂载到页面上

将生命周期方法添加到 Class 中

在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。

当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器。这在 React 中被称为“挂载（mount）”。

同时，当 DOM 中 Clock 组件被删除的时候，应该清除计时器。这在 React 中被称为“卸载（unmount）”。

// 创建组件
class Life extends React.Component{
    state = {opacity: 1}

death = () => {
    // 从页面上移除一个组件
    // 渲染是render, 移除是???
    // 渲染也可以说成是把组件挂载到页面上
    // 卸载组件 unmountComponentAtNode
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))
};

render() {
    // 循环定时器
    setInterval(() => {
        // 获取源状态
        let {opacity} = this.state;
        // 减小0.1
        opacity -= 0.1;
        if (opacity <= 0) {
            opacity = 1;
        }
        // 设置新的透明度
        // this.setState({opacity:opacity})    // 这个会触发对象的简写形式
        this.setState({opacity});
    },200);
    return(
        <div>
        <h2 style={ {opacity:this.state.opacity} }>React 学不会怎么办</h2>
<button onClick={this.death}>不活了</button>
</div>
)
}
}

// 渲染组件
ReactDOM.render(<Life/>,document.getElementById('test'))

引发无线递归,不断创建定时器

你的cpu温度逐渐上升

render()调用,指数增长

// 创建组件
class Life extends React.Component{
    constructor() {
        super();
        setInterval(() => {
            // 获取源状态
            let {opacity} = this.state;
            // 减小0.1
            opacity -= 0.1;
            if (opacity <= 0) {
                opacity = 1;
            }
            // 设置新的透明度
            // this.setState({opacity:opacity})    // 这个会触发对象的简写形式
            this.setState({opacity});
        },200);
    }
    state = {opacity: 1}

    death = () => {
        // 从页面上移除一个组件
        // 渲染是render, 移除是???
        // 渲染也可以说成是把组件挂载到页面上
        // 卸载组件 unmountComponentAtNode
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    };

    render() {
        // 循环定时器

        return(
                <div>
                    <h2 style={ {opacity:this.state.opacity} }>React 学不会怎么办</h2>
                    <button onClick={this.death}>不活了</button>
                </div>
        )
    }
}

// 渲染组件
ReactDOM.render(<Life/>,document.getElementById('test'))

现在写在构造里面了,还是不太好

// 创建组件
class Life extends React.Component{

    state = {opacity: 1}

    death = () => {
        // 从页面上移除一个组件
        // 渲染是render, 移除是???
        // 渲染也可以说成是把组件挂载到页面上
        // 卸载组件 unmountComponentAtNode
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    };

    // / 内置
    // 组件挂载完毕,调用,而且只是调用一次
    componentDidMount() {
        setInterval(() => {
            // 获取源状态
            let {opacity} = this.state;
            // 减小0.1
            opacity -= 0.1;
            if (opacity <= 0) {
                opacity = 1;
            }
            // 设置新的透明度
            // this.setState({opacity:opacity})    // 这个会触发对象的简写形式
            this.setState({opacity});
        },200);
    }

    // render 调用的时机: 初始化渲染,状态更新之后
    render() {
        // 循环定时器
        return(
                <div>
                    <h2 style={ {opacity:this.state.opacity} }>React 学不会怎么办</h2>
                    <button onClick={this.death}>不活了</button>
                </div>
        )
    }
}

// 渲染组件
ReactDOM.render(<Life/>,document.getElementById('test'))

现在问题解决了么? oh不,还有问题

现在点控制台,报错

react_devtools_backend.js:2450 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Life

我不能够,在组件没了之后在帮你更新

所以我们要清空定时器

// 创建组件
class Life extends React.Component{

    state = {opacity: 1}

    death = () => {
        // 清除定时器
        clearInterval(this.timer);
        // 从页面上移除一个组件
        // 渲染是render, 移除是???
        // 渲染也可以说成是把组件挂载到页面上
        // 卸载组件 unmountComponentAtNode
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    };

    // 内置
    // 组件挂载完毕,调用,而且只是调用一次
    componentDidMount() {
        this.timer = setInterval(() => {
            // 获取源状态
            let {opacity} = this.state;
            // 减小0.1
            opacity -= 0.1;
            if (opacity <= 0) {
                opacity = 1;
            }
            // 设置新的透明度
            // this.setState({opacity:opacity})    // 这个会触发对象的简写形式
            this.setState({opacity});
        },200);
    }

    // render 调用的时机: 初始化渲染,状态更新之后
    render() {
        // 循环定时器
        return(
                <div>
                    <h2 style={ {opacity:this.state.opacity} }>React 学不会怎么办</h2>
                    <button onClick={this.death}>不活了</button>
                </div>
        )
    }
}

// 渲染组件
ReactDOM.render(<Life/>,document.getElementById('test'))

这回就ok了,还能优化呢

使用componentWillUnmount()函数

// 创建组件
class Life extends React.Component{

    state = {opacity: 1}

    death = () => {
        // 从页面上移除一个组件
        // 渲染是render, 移除是???
        // 渲染也可以说成是把组件挂载到页面上
        // 卸载组件 unmountComponentAtNode
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    };

    // 内置
    // 组件挂载完毕,调用,而且只是调用一次
    componentDidMount() {
        this.timer = setInterval(() => {
            // 获取源状态
            let {opacity} = this.state;
            // 减小0.1
            opacity -= 0.1;
            if (opacity <= 0) {
                opacity = 1;
            }
            // 设置新的透明度
            // this.setState({opacity:opacity})    // 这个会触发对象的简写形式
            this.setState({opacity});
        },200);
    }

    // 组件将要卸载调用
    componentWillUnmount() {
        // 清除定时器
        clearInterval(this.timer)
    }

    // render 调用的时机: 初始化渲染,状态更新之后
    render() {
        // 循环定时器
        return(
                <div>
                    <h2 style={ {opacity:this.state.opacity} }>React 学不会怎么办</h2>
                    <button onClick={this.death}>不活了</button>
                </div>
        )
    }
}

// 渲染组件
ReactDOM.render(<Life/>,document.getElementById('test'))

这回你就明白了,React会在合适的时间点来干一些合适的事情儿

* 生命周期回调函数<=>生命周期钩子函数<=>生命周期函数<=>生命周期钩子