React_生命週期

• 初始化 ReactDOM.render(jsx, 原生 DOM 對象)：

組件類定義

static defaultProps = {}

static propTypes = {}

constructor(props){...}

componentWillMount()    // 只執行一次，初始化數據

render()    // 第一次調用，渲染界面

componentDidMount()    // 只執行一次，執行異步代碼

• 更新 this.setState({...})：

componentWillUpdate()

render()    // 每當狀態機的數據改變都會自動調用

componentDidUpdate()

• 死亡 ReactDOM.unmountComponentAtNode()：

componentWillUnmount()    // 將要卸載組件以前

 

React_生命週期

一個對象從生到死的過程

• Mounting ：已插入真實 DOM
• Updating ：正在被從新渲染
• Unmounting ：已移出真實 DOM

 

• getInitialState() --------已經廢棄了！！！

用於初始化組件狀態

在組件掛載以前調用一次。返回值將會做爲 this.state的初始值

• getDefaultProps -------- 好像也廢棄了。

用於設置組件的 state 中 屬性的默認值

在組件類建立的時候調用一次，而後返回值被緩存下來。

若是父組件沒有指定 props 中的某個鍵，則此處返回的對象中的相應屬性將會合併到 this.props （使用 in 檢測屬性）

• getDefaultProps() {
      return {
          title: '',
          popEnabled:true
      };
  },

• propTypes

驗證傳入到組件的 props

• isMounted()

當組件被渲染到 DOM，該方法返回 true，不然返回 false

該方法一般用於異步任務完成後修改 state 前的檢查，以免修改一個沒有被渲染的組件的 state

• 何時調用 render()
• 初始顯示第一次調用
• 一旦釣魚用 this.setState() 更新了狀態

當該方法被回調的時候，會檢測 this.props 和 this.state，並返回一個單子級組件。

該子級組件能夠是虛擬的本地 DOM 組件

也能夠返回 null 或者 false 來代表不須要渲染任何東西： 此時 this.getDOMNode() 將返回 null

• 生命週期回調函數 (鉤子)

在整個生命過程當中某個特定時刻會自動調用相應的回調函數 (來通知你)

• 經過重寫 如下方法，初始化

第一次 render() 以前，執行一次

componentWillMount()    // 通常在此 準備數據

第一次 render() 以後，執行一次

componentDidMount()    // 執行異步代碼 (定時器)

 

重寫如下方法，在組件移除以前，清除定時器

componentWillUnmount()

• 卸載一個節點的 react 組件實例

ReactDOM.unmountComponentAtNode(document.getElementById(""));