## :-: 組件生命周期 [State & 生命周期](https://react.docschina.org/docs/state-and-lifecycle.html) ``` import React from "react"; class LifeCyle extends React.Component { static defaultProps = {}; static propTypes = {}; constructor() { console.log(1, "constructor"); super(); this.state = {}; } // // 將要被掛載 // componentWillMount() { // // 官方不建議這里進行ajax 16.3版本后移除了componentWillMount // console.log(2, "componentWillMount"); // } // 16.3版本新增加 static getDerivedStateFromProps() { // 第一次掛載也會執行 // 必須有返回值 return null; } // 開始渲染 render() { // 不要調用this.setState、函數會被重復多次執行(死循環) console.log(3, "render"); return <div>123</div>; } // 已經被掛載 componentDidMount() { // 在這里就可以愉快的調用ajax請求了、、 // ajax this.setState console.log(4, "componentDidMount"); } // // props 數據被改變時執行 // componentWillReceiveProps() { // // 第一次掛載不執行，之后執行 // // 官方不建議這里進行ajax 16.3版本后移除了componentWillReceiveProps // console.log(8, "componentWillReceiveProps"); // } // 數據將要被更改時執行 shouldComponentUpdate(nextProps, nextState) { // nextProps -- 將要被改變的值 // nextState -- 將要被改變的狀態 // 優化性能 console.log(5, "componentDidMount"); // 返回 true更新視圖、false不更新視圖 return false; } // 16.3版本新增加 // getSnapshotBeforeUpdate 跟 componentDidUpdate 是成對出現的、 getSnapshotBeforeUpdate() { // 必須有返回值 return null; } // // 將要更新視圖 // componentWillUpdate() { // // 16.3版本后移除了componentWillUpdate // // 不能設置狀態(死循環) // console.log(6, "componentWillUpdate"); // } // 更新完畢 componentDidUpdate() { // 不能設置狀態(死循環) console.log(7, "componentDidUpdate"); } // 組件將要被卸載、移除 componentWillUnmount() { console.log(9, "componentWillUnmount"); } } export default LifeCyle; ```