react学习---day05--React生命周期(旧)

React的生命周期与Vue的生命周期大同小异

总体分为四个阶段: 

• 初始化阶段: 由ReactDOM.render()触发 --- 初次渲染并只执行一次

1. constructor  初始化准备,可以缺省constructor
2. componentWillMount  组件挂载之前, 与create差不多

3. render()
4. componentDidMount  组件完成初始化(可在此开定时器,发网络请求,订阅消息等)

• 更新阶段:  由setSatate()或父组件的render()触发

1. shouldComponentUpdate  更新阀门
2. componentWillUpdate  组件更新之前
3. render()

• 卸载阶段:  由React.unmountComponentAtNode()触发

1. componentWillUnmount  组件卸载之前(一般是关闭定时器,取消订阅消息等)

class App extends React.Component {
    constructor(props) {
        console.log("1-constructor函数被调用执行")
        super(props)
    }
    componentWillMount() {
        console.log("2-componentWillMount函数已执行,组件挂载之前,在render方法之前调用")
    }
    componentDidMount() {
        console.log("4-componentDidMount函数已执行,组件挂载完之后,DOM元素已经插入到页面后调用")
    }
    render() {
        console.log("3-render函数执行")
        return(
            <div>
                <h3>react生命周期</h3>
            </div>
        )
    }
    componentWillUnmount() {
        console.log("componentWillUnmount函数已执行,组件从页面中移除之前调用")
    }
}
ReactDOM.render(<App />, document.getElementById("app"))