组件生命周期

生命周期就是组件加载的一个流程

• 初始化组件
• 渲染组件
• 更新组件
• 删除组件

组件的生命周期

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

 

 

 mounting 加载组件

• constructor() 构造器函数 初始化数据状态 比如state的初始化
• render() 返回一个 Virtual DOM（虚拟DOM）
• componentDidMount() Dom 节点插入之后调用的生命函数，（主要做网络请求和setState更改数据状态）

 我们看一下加载顺序

 <div id="app"></div>
    <script type="text/babel">
       //是生命周期
        class App extends React.Component{            
            constructor(){
                super();
                this.state={
                    name:'小明'
                }
                console.log("我是constructor")
            } 
            render (){
                console.log("我是render")
                return <div><h2>{this.state.name}</h2></div>
            }
            componentDidMount(){
                console.log("我是componentDidMount")
            }
        }
        ReactDOM.render(<App></App>,document.getElementById("app"))
    </script>

 

 

 

updating 更新组件 当状态数据发生改变的时候，会触发这个生命函数

组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

render() 再次调用

componentDidUpdate() 数据状态更新之后会调用

• DOM 操作
• 网络请求
• setState()

<div id="app"></div>
    <script type="text/babel">
       //是生命周期
        class App extends React.Component{            
            constructor(){
                super();
                this.state={
                    name:'小明'
                }
                console.log("我是constructor")
                this.click=this.click.bind(this)
            } 
            click(){
                this.setState({
                    name:'小红'
                })
            }
            render (){
                console.log("我是render")
                return <div>
                    <h2>{this.state.name}</h2>
                    <button onClick={this.click}>修改state</button>
                    </div>
            }
            componentDidMount(){
                console.log("我是componentDidMount")
            }
            //组件更新之后会调用这个函数
            componentDidUpdate(){
                console.log("我是componentDidUpdate")
            }
        }
        ReactDOM.render(<App></App>,document.getElementById("app"))
    </script>

 

unmounting 卸载组件

componentWillUnmount() 组件在卸载之前会调用这个方法

• 清除 timer 计时器
• 取消网络请求
• 清除在 componentDidMount() 中创建的订阅

错误处理：

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

ReactDOM.unmountComponentAtNode(container)用于卸载我们的组件

• 参数就是我们插入组件的容器，dom 对象，这个dom对象就是我们document.getElementById() 获取的根节点

 <div id="app"></div>
    <script type="text/babel">
       //是生命周期
        class App extends React.Component{            
            constructor(){
                super();
                this.state={
                    name:'小明'
                }
                console.log("我是constructor")
                this.click=this.click.bind(this)
            } 
            click(){
                this.setState({
                    name:'小红'
                })
            }
            //组件卸载之前调用的方法
            componentWillUnmount() {
                console.log("我是componentWillUnmount")
            }
            render (){
                console.log("我是render")
                return <div>
                    <h2>{this.state.name}</h2>
                    <button onClick={this.click}>修改state</button>
                    <button onClick={()=>{ReactDOM.unmountComponentAtNode(document.getElementById("app"))}}>卸载组件</button>
                    </div>
            }
            componentDidMount(){
                console.log("我是componentDidMount")
            }
            //组件更新之后会调用这个函数
            componentDidUpdate(){
                console.log("我是componentDidUpdate")
            }

        }
        ReactDOM.render(<App></App>,document.getElementById("app"))
    </script>