render()

render() 方法是 class 組件中唯一必須實現(xiàn)的方法。

當 render 被調(diào)用時，它會檢查 this.props 和 this.state 的變化并返回以下類型之一：

• React 元素。通常通過 JSX 創(chuàng)建。例如，<div /> 會被 React 渲染為 DOM 節(jié)點，<MyComponent /> 會被 React 渲染為自定義組件，無論是 <div /> 還是 <MyComponent /> 均為 React 元素。
• 字符串或數(shù)值類型。它們在 DOM 中會被渲染為文本節(jié)點
• 布爾類型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 為布爾類型。)

render() 函數(shù)應(yīng)該為純函數(shù)，這意味著在不修改組件 state 的情況下，每次調(diào)用時都返回相同的結(jié)果，并且它不會直接與瀏覽器交互。如需與瀏覽器進行交互，請在 componentDidMount() 或其他生命周期方法中執(zhí)行你的操作。

constructor()

如果不初始化 state 或不進行方法綁定，則不需要為 React 組件實現(xiàn)構(gòu)造函數(shù)。

在 React 組件掛載之前，會調(diào)用它的構(gòu)造函數(shù)。在為 React.Component 子類實現(xiàn)構(gòu)造函數(shù)時，應(yīng)在其他語句之前前調(diào)用 super(props)。

通常，在 React 中，構(gòu)造函數(shù)僅用于以下兩種情況：

• 通過給 this.state 賦值對象來初始化內(nèi)部 state。
• 為事件處理函數(shù)綁定實例，如this.handleClick = this.handleClick.bind(this)。

在 constructor() 函數(shù)中不要調(diào)用 setState() 方法。如果你的組件需要使用內(nèi)部 state，請直接在構(gòu)造函數(shù)中為 this.state 賦值初始state：

只能在構(gòu)造函數(shù)中直接為 this.state 賦值。如需在其他方法中賦值，你應(yīng)使用 this.setState()替代。

避免將 props 的值復(fù)制給 state。直接使用this.props.xxx就可以了。

componentDidMount()

componentDidMount() 會在組件插入 DOM 樹后立即調(diào)用。依賴于 DOM 節(jié)點的初始化應(yīng)該放在這里。如需通過網(wǎng)絡(luò)請求獲取數(shù)據(jù)，此處是實例化請求的好地方。

這個方法是比較適合添加訂閱的地方。如果添加了訂閱，請不要忘記在 componentWillUnmount() 里取消訂閱

你可以在 componentDidMount() 里可以直接調(diào)用 setState()。它將觸發(fā)額外渲染re-render，但此渲染會發(fā)生在瀏覽器更新屏幕之前。如此保證了即使在 render() 兩次調(diào)用的情況下，用戶也不會看到中間狀態(tài)。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 會在更新后會被立即調(diào)用。首次渲染不會執(zhí)行此方法。

當組件更新后，可以在此處對 DOM 進行操作。如果你對更新前后的 props 進行了比較，也可以選擇在此處進行網(wǎng)絡(luò)請求。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘記比較 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

你也可以在 componentDidUpdate() 中直接調(diào)用 setState()，但請注意它必須被包裹在一個條件語件里，正如上述的例子那樣進行處理，否則會導(dǎo)致死循環(huán)。

componentWillUnmount()

componentWillUnmount() 會在組件卸載及銷毀之前直接調(diào)用。在此方法中執(zhí)行必要的清理操作，例如，清除 timer，取消網(wǎng)絡(luò)請求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。

componentWillUnmount() 中不應(yīng)調(diào)用 setState()，因為該組件將永遠不會重新渲染。組件實例卸載后，將永遠不會再掛載它。