React入門4-聲明週期

React 16.3+

  • getDerivedStateFromProps: 在調用render()之前調用,並在 每次 渲染時調用。 需要使用派生狀態的情況是很罕見得。值得閱讀 如果你需要派生狀態.(https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
  • componentDidMount: 首次渲染後調用,所有得 Ajax 請求、DOM 或狀態更新、設置事件監聽器都應該在此處發生。
  • shouldComponentUpdate: 確定組件是否應該更新。 默認情況下,它返回true。 如果你確定在更新狀態或屬性後不需要渲染組件,則可以返回false值。 它是一個提高性能的好地方,因爲它允許你在組件接收新屬性時阻止重新渲染。
  • getSnapshotBeforeUpdate: 在最新的渲染輸出提交給 DOM 前將會立即調用,這對於從 DOM 捕獲信息(比如:滾動位置)很有用。
  • componentDidUpdate: 它主要用於更新 DOM 以響應 prop 或 state 更改。 如果shouldComponentUpdate()返回false,則不會觸發。
  • componentWillUnmount 當一個組件被從 DOM 中移除時,該方法被調用,取消網絡請求或者移除與該組件相關的事件監聽程序等應該在這裏進行。

Before 16.3

  • componentWillMount: 在組件render()前執行,用於根組件中的應用程序級別配置。應該避免在該方法中引入任何的副作用或訂閱。
  • componentDidMount: 首次渲染後調用,所有得 Ajax 請求、DOM 或狀態更新、設置事件監聽器都應該在此處發生。
  • componentWillReceiveProps: 在組件接收到新屬性前調用,若你需要更新狀態響應屬性改變(例如,重置它),你可能需對比this.propsnextProps並在該方法中使用this.setState()處理狀態改變。
  • shouldComponentUpdate: 確定組件是否應該更新。 默認情況下,它返回true。 如果你確定在更新狀態或屬性後不需要渲染組件,則可以返回false值。 它是一個提高性能的好地方,因爲它允許你在組件接收新屬性時阻止重新渲染。
  • componentWillUpdate: 當shouldComponentUpdate返回true後重新渲染組件之前執行,注意你不能在這調用this.setState()
  • componentDidUpdate: 它主要用於更新 DOM 以響應 prop 或 state 更改。 如果shouldComponentUpdate()返回false,則不會觸發。
  • componentWillUnmount: 當一個組件被從 DOM 中移除時,該方法被調用,取消網絡請求或者移除與該組件相關的事件監聽程序等應該在這裏進行。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章