React各生命周期較長的描述-來自官方文檔

Commonly Used Lifecycle Methods (常見的生命周期方法)

render()

在使用ES6類(class)方式建構元件時，

render

方法是唯一一個需要聲明的方法。也可以使用函數方式建構元件，請參考。

當render()被調用時，它會檢查

this.props

和

this.state

是否發生變化，并且return下面任意一種類型：

• React elements（react元素）：通常是指通過

  JSX

  文法建立的元素。例如，DOM節點

  和

  自定義的

  <SubComponet />

  元件标簽，都可以傳回，供react進行渲染。

class SubComponent extends React.Component{
	render() {
		return (
			<div>
				 <h2>子元件</h2> 
			</div>
		)
	}
}
class FatherComponent extends React.Component{
	render() {
		return <SubComponent />
	}
}
export default FatherComponent;
           

• Arrays and fragments（數組和片段）：通過數組或片段的包裝傳回多個元素。

  在使用數組時，為了避免

  Warning: Each child in an array or iterator should have a unique "key" prop.

  警告，需要為每個元素添加

  key

  屬性。

class ReturnArray extends PureComponent {
  render (){
    return [
      <p key="1">React 16 can return multiple elements ❤️</p>,
      <p key="2">React 16 can return multiple elements ❤️</p>,
      <p key="3">React 16 can return multiple elements ❤️</p>,
    ];
  };
}
           

React v16.2介紹了另一種傳回多個元素的标簽，即

React.Fragment

。它隻是通過JSX文法抽象出的空的标簽，不支援标簽屬性。不需要額外的元件，不需要資料的形式，也不需要添加key值，總之就是把多元素作為其子節點。

class ReturnArray extends PureComponent {
  render (){
    return ( 
      <React.Fragment>
        <p>React 16 can return multiple elements ❤️</p>
        <p>React 16 can return multiple elements ❤️</p>
        <p>React 16 can return multiple elements ❤️</p>
      </React.Fragment>
    );
  };
}
           

• Portals：請參考，待填坑。
• String and numbers：傳回字元串或者數字，作為一個文本節點添加到DOM中去。
• Booleans or null：如果沒有其他元素可傳回的話，可以這樣寫：

return null; or
return false; or
return true; or
return undefined; 
           

例子：輸出數組中的奇數值，可以采用如下方法：

class App extends React.Component {
  constructor(props){
    super(props);
    this.number = this.props.number;
  }
  render() {
    if(this.number%2) {
      return (
        <div>
          Number: {this.number}
        </div>
      )
    }
    return (null);    
  }
}

const data = [1, 2, 3, 4, 5]

ReactDOM.render(<div>{data.map(el => <App key={el} number={el} />)}</div>, document.getElementById('root'));
           

render()方法應該是一個純函數，也就是輸入和輸出是固定的。此方法内不應該修改元件的狀态，每次調用都應傳回相同的結果，初次之外，也不應該直接的與浏覽器進行互動。

如果你需要與浏覽器進行互動，你可以在

componentDidMount

或者其他生命函數裡進行。保持render()是一個純函數，将會很容易的建構元件。

注意：當

shouldComponentUpdate()

生命周期方法傳回

false

時，

render()

方法将不再被調用。