元件規範和生命週期——react文件翻譯

sushi發表於2016-09-18
元件React

元件規範

當通過呼叫React.creatClass()來生成一個元件類的時候，你需要提供一個規範物件作為引數傳入，這個物件必須包含render方法以及包含其他可選的生命週期方法。這些方法介紹如下。

render

render()方法是必須的。
當呼叫這個方法的時候，它會檢查this.props和this.state並且返回一個子元素（ child element ）。這個子元素可以是一個虛擬的原生DOM標籤也可以是我們之前定義好的一個元件。當然也可以返回null或者false值表示不想做任何渲染。
在render方法的背後，React渲染了一個<noscript>標籤以及執行diff演算法。當返回null或者false值時，ReactDOM.findDOMNode(this)將返回null。
reder()方法需要純淨，即它不能修改元件的state，它每次呼叫所返回的值都需相同，並且它不能讀寫DOM或者和瀏覽器有互動操作（例如使用setTimeout()）。如果你需要和瀏覽器之間進行互動，那麼將這些內容寫入到componentDidMount()或者其他生命週期方法中。

getInitialState

這個方法在元件被掛載前呼叫一次，它的返回值會被用來初始化this.state。

getDefaultProps

這個方法在元件類建立的時候呼叫一次並將值快取（意味著相同的元件重新掛載的時候這個方法不會被呼叫）。 如果元件的prop不是從父元件傳進來，那麼這些值將會用來初始化this.props。
這個方法是在任何例項被建立前呼叫。另外，這個方法返回的任何複雜型別值都會在例項之間共享而不是拷貝。

propTypes

propTypes物件允許你驗證傳遞給元件的props的值是否符合要求，想要了解更多關於propTypes的內容請看可複用的元件

mixins

mixins陣列允許你使用mixins來在多個元件之間共享一些行為。想要了解更多資訊，請參閱可複用的元件

statics

statics物件允許你定義一些靜態方法，這些方法可以在元件類中被呼叫。例如

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === `bar`;
    }
  },
  render: function() {
  }
});

MyComponent.customMethod(`bar`);  // true

靜態方法意味著你可以在任何元件例項被建立之前呼叫這些方法，當然這些方法也因此無法獲取你元件的props和state。如果你想要在靜態方法中使用props或者state，那麼在呼叫這些方法的時候將props或state作為引數傳遞進去。

displayName

displayName字串會在debug中用到，詳情參見https://facebook.github.io/re…

生命週期方法

不同的方法會在元件生命週期中不同的時間點執行。

Mouting：componentWillMount

在伺服器端和在客戶端呼叫一次，在初始化render執行之前。如果在這個方法裡面呼叫setState，render()方法只會執行一次儘管state發生了改變。

Mouting：componentDidMount

僅僅在客戶端呼叫一次，在初始化render發生之後立即被呼叫，在這個方法中你可以獲取到元件中的任何子節點。因為子元件的componentDidMount()方法呼叫是在父元件之前。
如果你想整合其他js框架，例如使用setTimeout或者setInterval來設定時間或者傳送AJAX請求，那麼都可以在這個方法裡面書寫。

Updating: componentWillReceiveProps

這個方法是在元件接收到新的props的時候呼叫，在元件初始化渲染的時候不會呼叫此方法。
通過this.setState()來更新狀態可以導致對render()方法的一次呼叫，而 componentWillReceiveProps 可以讓你在render()呼叫之前來改變prop值。此時，舊的props可以通過this.props訪問到，這個函式裡面呼叫this.setSteate()不會觸發額外的一次渲染。

備註1：常常出現的一個錯誤用法是認為在這個生命週期方法中props已經改變。
備註2：沒有componentWillReceiveState這個相似的生命週期方法。prop的改變會導致狀態的改變，但反過來講就是不對的。如果你需要在state值改變時進行一些操作，請使用componentWillUpdate這個方法。

Updating: shouldComponentUpdate

當元件接收到新的props或者state，在重新渲染之前會呼叫這個方法，然後根據返回值（true或者false來決定是否進行重新渲染）。這個方法在首次渲染的時候是不呼叫的或者在forceUpdate的時候是不會被呼叫的。
這個方法預設返回true，但是如果你確認新的props和state不需要引起元件更新的情況下可以讓它返回false值。
如果shouldComponentUpdate返回false，那麼便會完全跳過之後的render直到下一次state的改變。除此之外componentWillUpdate和componentDidUpdate方法也不會被呼叫。
預設情況下， shouldComponentUpdate總是返回true來避免當state為mutated的時候導致的微妙的bug，但是如果你小心地總是將state作為不可變資料，那麼你可以重寫 shouldComponentUpdate方法來根據新舊props和state的對比來確定返回true或者是false。
如果在元件數目龐大的情況下遇到效能瓶頸，那麼在這個方法裡做一些優化來加速你的app。

Updating: componentWillUpdate

當元件接收到新的props或者state，在重新渲染之前會呼叫這個方法。 這個方法在首次渲染的時候是不呼叫的或者在forceUpdate的時候是不會被呼叫的。

注意：這個方法裡不能呼叫this.setState()。

Updating: componentDidUpdate

這個方法在元件更新並且重新重新整理DOM之後被呼叫。 在首次渲染的時候是不呼叫的或者在forceUpdate的時候是不會被呼叫的。
這個方法提供了元件更新後操作DOM節點的機會。

Unmounting: componentWillUnmount

在元件從DOM中解除安裝之後被立即呼叫。
你可以在這個方法做一些必要的清除工作，比如一些計時器或者清除一些在componentDidMount方法中新增的一些DOM元素。

相關文章