React生命周期｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第5天

需求 : 定义组件实现以下功能：

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

2. 从完全可见，到彻底消失，耗时**2S

3. 点击“不活了”按钮从界面中卸载组件

理解

组件从创建到死亡它会经历一些特定的阶段。

React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。

我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

生命周期的三个阶段（旧）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

constructor()

componentWillMount()

render()

componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

重要的勾子

render：初始化渲染或更新渲染调用

componentDidMount：开启监听, 发送ajax请求

componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

componentWillMount

componentWillReceiveProps

componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

<script type="text/babel">
        //创建组件
        class Count extends React.Component{
​
            //构造器
            constructor(props){
                console.log('Count---constructor');
                super(props)
                //初始化状态
                this.state = {count:0}
            }
​
            //加1按钮的回调
            add = ()=>{
                //获取原状态
                const {count} = this.state
                //更新状态
                this.setState({count:count+1})
            }
​
            //卸载组件按钮的回调
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
​
            //强制更新按钮的回调
            force = ()=>{
                this.forceUpdate()
            }
​
            //组件将要挂载的钩子
            componentWillMount(){
                console.log('Count---componentWillMount');
            }
​
            //组件挂载完毕的钩子
            componentDidMount(){
                console.log('Count---componentDidMount');
            }
​
            //组件将要卸载的钩子
            componentWillUnmount(){
                console.log('Count---componentWillUnmount');
            }
​
            //控制组件更新的“阀门”
            shouldComponentUpdate(){
                console.log('Count---shouldComponentUpdate');
                return true
            }
​
            //组件将要更新的钩子
            componentWillUpdate(){
                console.log('Count---componentWillUpdate');
            }
​
            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log('Count---componentDidUpdate');
            }
​
            render(){
                console.log('Count---render');
                const {count} = this.state
                return(
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }
        
        //父组件A
        class A extends React.Component{
            //初始化状态
            state = {carName:'奔驰'}
​
            changeCar = ()=>{
                this.setState({carName:'奥拓'})
            }
​
            render(){
                return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>
                )
            }
        }
        
        //子组件B
        class B extends React.Component{
            //组件将要接收新的props的钩子
            componentWillReceiveProps(props){
                console.log('B---componentWillReceiveProps',props);
            }
​
            //控制组件更新的“阀门”
            shouldComponentUpdate(){
                console.log('B---shouldComponentUpdate');
                return true
            }
            //组件将要更新的钩子
            componentWillUpdate(){
                console.log('B---componentWillUpdate');
            }
​
            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log('B---componentDidUpdate');
            }
​
            render(){
                console.log('B---render');
                return(
                    <div>我是B组件，接收到的车是:{this.props.carName}</div>
                )
            }
        }
        
        //渲染组件
        ReactDOM.render(<Count/>,document.getElementById('test'))
    </script>