【譯】參考手冊-React組件

react version: 15.4.2

React.Component

組件可以讓你將UI拆分爲多個獨立自治並可重用的部分。在 React 中提供了 React.Component。

概述

React.Component 是一個抽象基類，直接引用 React.Component 無太大意義。反而，咱們會用子類來繼承它，並至少定義一個 render() 方法。

一般您將使用純 JavaScript class 來定義一個 React 組件：

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

若是您尚未使用ES6，可使用 React.createClass 來替代。從 Using React without ES6 瞭解更多。

組件生命週期

每一個組件都有幾個 生命週期方法，您能夠不一樣的階段插入本身的邏輯代碼。以 will 開頭的方法將在事情發生前被調用，以 did 開頭的方法將在事情發生後被調用。

Mounting（掛載）

如下的方法，將在組件實例被建立和插入到DOM前被調用：

• constructor()
• componentWillMount()
• render()
• componentDidMount()

Updating（更新）

屬性或狀態變化將會引起更新。如下方法將在重繪以前被調用：

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

Unmounting（卸載）

如下方法將在組件開始從DOM移除時被調用：

• componentWillUnmount()

其餘APIs

每一個組件也都會提供如下幾個API：

• setState()
• forceUpdate()

類屬性

• defaultProps
• displayName

實例屬性

• props
• state

---

引用

render()

render()

render() 方法是必須的。

當調用 render() 方法時，將檢查 this.props 和 this.state 並返回單個React元素。這個元素能夠是原生DOM組件，如 <div />，也能夠是你自定義的複合組件。

若是你不想渲染任何內容，你能夠返回 null 或者是 false。當返回 null 或 false 時， ReactDOM.findDOMNode(this) 也將返回 null。

render() 函數應該是純函數，這意味着你不該該修改組件狀態，每次調用都應該返回一樣的結果，同時也不要直接和瀏覽器交互（不要操做DOM）。若是你想要操做DOM，請使用 componentDidMount() 或其餘生命週期方法來替代。使用純粹的 render() 可使組件易於理解。

注意

render() 不會在 shouldComponentUpdate() 返回 false 的時候被調用。

---

constructor()

constructor(props)

React組件的構造函數會在掛載前被調用。當咱們在 React.Component 的子類中實現構建函數時，咱們應該在全部語句以前優先調用 super(props)。反之，在構造函數中訪問 this.props 將會是未定義，這可能會致使bugs。

構造函數是初始化狀態的地方。若是你不須要初始化狀態，且不綁定方法，那麼你沒必要要實現構造函數。

若是你確信，你可使用 props 來初始化狀態。如下是一個合法的 React.Component 子類構造函數：

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

小心這種模式，它可以有效的 "forks" 屬性且可能會致使bugs。你一般可使用狀態提高來替代同步屬性到狀態。

若是你想使用 state 來 "fork" props，你還須要實現 componentWillReceiveProps(nextProps) 來保持狀態是最新的。可是狀態提高一般是更容易且不容易出錯的。

---

componentWillMount()

componentWillMount()

componentWillMount() 將在掛載發生前，被當即調用。它會在 render 以前調用，所以在該方法中設置狀態將不會觸發從新渲染。避免在此方法中引入任何有反作用的行爲或者訂閱。

這是在服務端渲染中惟一被調用的生命週期鉤子。一般，咱們用來替代 constructor()。

---

componentDidMount()

componentDidMount()

componentDidMount() 將在組件掛載以後當即被調用。須要使用 DOM 節點的初始化應該放在這裏。若是你須要加載遠端數據，這也是處理網絡請求的好地方。在這個方法中設置狀態將會觸發重繪。

---

componentWillReceiveProps()

componentWillReceiveProps(nextProps)

componentWillReceiveProps() 將在已經掛載的組件接受到新屬性前被調用。若是你須要更新狀態來響應屬性變化（例如，重置狀態），你能夠比較 this.props 和 nextProps，而後使用 this.setState() 來處理狀態變化。

請注意，就算屬性沒有變化，React也可能會調用此方法，所以若是你只想處處理有變動的狀況，那麼請確保比較當前值和下一次的值。這種狀況在父組件變動致使你的組件重繪時可能會發生。

在掛載階段初始化屬性React不會調用 componentWillReceiveProps。若是一些組件的屬性可能會更新，它僅會調用該方法。調用 this.setState 一般不會觸發 componentWillReceiveProps。

---

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

使用 shouldComponentUpdate 讓React知道組件的輸出不會受到當前狀態和屬性變動的影響。默認行爲是當每次狀態變動時都會引起重繪，絕大多數狀況下，您應該依賴默認行爲。

當收到新的狀態或者屬性時，將會調用 shouldComponentUpdate()。默認值是 true。在初次渲染或調用 forceUpdate() 時，shouldComponentUpdate() 將不會被調用。

返回 false 也不會阻止子組件在它們本身的狀態變化時重繪。

目前，當 shouldComponentUpdate() 返回 false，componentWillUpdate(), render(), 和 componentDidUpdate() 都不會被調用。請注意，將來React可能將 shouldComponentUpdate() 做爲一個提示而不是一個強制指令，就算是返回 false 仍然有可能致使組件重繪。

若是你在監控分析以後，發現特定組件確實很是緩慢，那麼能夠將其修改成實現了使用淺表屬性和狀態比較的 shouldComponentUpdate() 方法的 React.PureComponent。若是你有信心手動確認，你能夠比較 this.props 與 nextProps 以及 this.state 與 nextState 的值來告訴React本次更新是能夠跳過的。

---

componentWillUpdate()

componentWillUpdate(nextProps, nextState)

當接收到新的屬性或者狀態時，componentWillUpdate() 將會在重繪前被當即調用。能夠在此處放置一些重繪前的處理邏輯。這個方法在初次繪製時不會被調用。

注意你也不能在此處調用 this.setState()。若是你須要更新狀態來響應屬性變化，請使用 componentWillReceiveProps() 替代。

注意

當 shouldComponentUpdate() 返回 false 時，componentWillUpdate() 將不會被調用。

---

componentDidUpdate()

componentDidUpdate(prevProps, prevState)

在更新完成以後，componentDidUpdate() 會被當即調用。初次繪製不會調用該方法。

在這裏能夠操做組件更新以後的DOM。在你比較了當前屬性和上一次屬性以後，這裏也適合處理網絡請求。（例如：若是屬性沒有變化，可能不須要一個網絡請求。）

注意

當 shouldComponentUpdate() 返回 false 時，componentWillUpdate() 將不會被調用。

---

componentWillUnmount()

componentWillUnmount()

在組件卸載和釋放以前，將會當即調用 componentWillUnmount()。能夠在該方法中，執行一些清理動做，如無效的定時器，取消網絡請求，或者是清理在 componentDidMount() 中建立的DOM元素。

---

setState()

setState(nextState, callback)

執行它會執行一次淺表複製，將 nextState 合併到當前狀態上。這也是從事件處理函數和服務請求回調中觸發UI更新的主要方法。

第一個參數能夠是一個對象（包含0個或多個要更新的key）或者是一個返回包含更新key的對象的函數（傳入狀態和屬性）。

簡單對象用法以下：

this.setState({mykey: 'my new value'});

它也可能傳遞以下簽名 function(state, props) => newState 的函數。這將引入一個原子更新，會在設置值以前先查看上一次的狀態和屬性。例如，咱們想每次增長 props.step 指定的值：

this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});

第二個參數是一個可選的回調函數，它將在 setState 完成和組件重繪以後執行一次。一般，咱們建議在 componentDidUpdate() 中處理這樣的邏輯。

setState() 不會當即更新 this.state，僅會建立一個掛起的狀態轉換。調用此方法以後訪問 this.state 可能會返回現有值。

不能確保 setState 是同步操做，屢次調用 setState 可能會進行批處理以提升性能。

setState() 將老是致使重繪，除非 shouldComponentUpdate() 返回 false。若是使用可變對象且不能在 shouldComponentUpdate() 中實現條件重繪邏輯，那麼能夠僅在當前狀態與以前不一樣時，再調用 setState() 來避免沒必要要的重繪。

---

forceUpdate()

component.forceUpdate(callback)

默認狀況下，當你的組件狀態和屬性變化時，組件將會被重繪。若是你的 render() 方法中依賴一些其餘的數據，你能夠調用 forceUpdate() 來告訴React須要重繪。

調用 forceUpdate() 將致使組件跳過 shouldComponentUpdate() 直接調用 render()。這也將觸發子組件正常的生命週期方法，包括每一個子組件的 shouldComponentUpdate()。React仍然將只更新標記變化的DOM元素。

一般，你應該避免使用 forceUpdate()，僅在 render() 中只讀取 this.props 和 this.state。

---

類屬性

defaultProps

可以在組件類自身上定義 defaultProps 屬性，它將爲屬性設置默認值。當屬性未定義時纔會被設置爲默認屬性值，若是屬性值被設置爲null，則不會被設置爲默認屬性值。示例以下：

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

當 props.color 沒有提供時，它將被設置爲默認值 'blue':

render() {
    return <CustomButton /> ; // props.color will be set to blue
  }

若是 props.color 被設置爲 null，它仍然是 null:

render() {
    return <CustomButton color={null} /> ; // props.color will remain null
  }

---

displayName

displayName 字符串用於調試信息。JSX 會自動設置這個值；查看 深刻JSX 瞭解更多。

---

propTypes

能夠在組件類自身上定義 propTypes 屬性，用來肯定屬性的類型。它是屬性名稱和定義在 React.PropTypes 中類型的一個映射。在開發模式中，若是碰到不合法的屬性，那麼控制檯將會打印警告。產線模式下，屬性類型檢查基於性能考慮將會被跳過。

例如，如下代碼確保 color 屬性是字符串：

class CustomButton extends React.Component {
  // ...
}

CustomButton.propTypes = {
  color: React.PropTypes.string
};

咱們建議您儘量的使用 Flow，以便使用編譯時的類型檢查，而不是運行時的類型檢查。查看 Flow 對 React 的內置支持 來輕鬆的在 React 應用中使用靜態分析。

---

實例屬性

props

this.props 包含了組件調用者定義的屬性。查看 組件和屬性 瞭解更多。

this.props.children 是一個特別的屬性，一般是由 JSX 表達式的子標籤訂義，而不是組件自己的標籤。

state

state 包含了組件特定的可能隨時間變化而變化的數據。 state 是用戶自定義的，它也是一個純粹的JavaScript對象。

不須要在 render() 中使用的數據，沒必要要放在 state 上。例如，您能夠直接在實例上存儲定時器ID。

查看 快速起步-狀態和生命週期 瞭解更多。

調用 setState() 來替代直接修改 this.state。保持 this.state 是不可變的。