React-生命週期

今天要分享的是react元件中很重要的生命週期，react元件分為兩種，一種是函式元件，如下：

import React from 'react'
export default function App() {
  return (
    <div>
      這是一個函式元件
    </div>
  )
}
<!--或者-->
function HelloComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 
複製程式碼

函式元件也稱為 無狀態元件，也就是用來純展示的，沒有state狀態操作的元件，函式元件有幾個特點：

元件不會被例項化，整體渲染效能得到提升
元件不能訪問this物件
元件無法訪問生命週期的方法
無狀態元件只能訪問輸入的props

所以無狀態元件是不需要元件生命週期管理和狀態管理的，所以，生命週期只有在另一種元件型別類元件中存在

類元件 我比較常用的React.Component建立的元件如下：

import React, { Component } from 'react'
export default class App extends Component {
  render() {
    return (
      <div>
        這是一個類元件
      </div>
    )
  }
}
複製程式碼

只要有可能，儘量使用無狀態元件建立形式
否則（如需要state、生命週期方法等），使用React.Component這種es6形式建立元件

接下來我們進入正題，（React v16.0前）元件的生命週期分為三個階段：

元件的掛載階段(Mounting)
元件的更新階段(update)
元件的解除安裝階段

React v16.4 新增兩個生命週期：

getDerivedStateFromProps，getSnapshotBeforeUpdate

這兩個生命週期還在持續學習中，專案中目前沒用到，下次帶給大家分享，希望分享能幫助大家，與君共勉，謝謝！

React-生命週期

相關文章