react16生命週期方法

全部生命週期方法：

• constructor
• getDerivedStateFromProps new
• render
• componentDidMount
• getDerivedStateFromProps new
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate new
• componentDidUpdate
• componentWillUnmount
• getDerivedStateFromError new
• componentDidCatch new

constructor (props)

constructor通常用來初始化state，聲明ref，綁定方法。

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    this.ref = React.createRef();
    this.handleClick = this.handleClick.bind(this)
  }
}

new static getDerivedStateFromProps (props, state)

getDerivedStateFromProps會根據props的值返回一個對象，該返回值將成爲this.state的新值。
該方法會在兩個時間觸發：一是首次render以前，另外一次是每次組件更新時shouldComponentUpdate以前。
這裏先講首次render以前觸發，這個時候使用它通常是用來根據props的值初始化state，固然能夠直接在constructor裏初始化state。

static getDerivedStateFromProps(props, state) {
  return { count: props.count };
}

render

render主要做用就是返回一段JSX，表示想要渲染的內容。若是返回值是null或false則不會渲染任何內容。

render () {
  return (
    <div>
      <h1>title</h1>
      <p>description</p>
    </div>
  )
}

componentDidMount

通常在componentDidMount裏處理組件裝載好以後才能夠進行的操做，好比綁定事件、發送數據請求、或者進行一些dom相關的操做。

componentDidMount () => {
  window.addEventListener('scroll', this.handleScroll)
  this.timeout = setTimeout(() => {
    console.log(new Date())
  }, 500)
}

new static getDerivedStateFromProps (props, state)

當props改變或state改變時，組件從新渲染就會再次進入該聲明週期方法中。這個時候能夠根據props的值來更新state，返回新的state值，返回null則表示不更新。
在舊的生命週期方法componentWillReceiveProps中，咱們常常會比較this.props和nextProps來決定是否更新state或作別的事情，好比：

componentWillReceiveProps (nextProps) {
 if (this.props.count !== nextProps.count) {
    this.setState({ count: nextProps.count })
    this.fetchData()
 }
}

getDerivedStateFromProps是靜態方法，沒法取到當前類組件的實例，因此沒有辦法進行this.prop和nextProps的比較，若是要比較的話只能進行props和當前state的比較，以下：

if (props.count !== state.count) {
  return {
    ...
    count: props.count,
  };
  // 不更新state
  return null
}

除了不能比較this.prop和nextProps外，也不能在這個方法裏調用當前實例的其餘方法，好比this.fetchData，想調用的話得在componentDidUpdate裏調用，這裏在componentDidUpdate裏會講到。

shouldComponentUpdate (nextProps, nextState)

當props或state的改變而使得組件須要從新渲染時，就會進入這個生命週期方法，它在render前觸發。這個方法返回一個布爾值，用來表示組件是否須要從新渲染，默認值是true，表示老是從新渲染。咱們能夠在這裏加一些判斷邏輯，只有當一些咱們真正關心的數據改變時咱們才從新渲染，好比：

shouldComponentUpdate(nextProps, nextState) {
  // 只有count改變頁面才更新
  return nextState.count !== this.state.count;
}

shouldComponentUpdate經過避免沒必要要的渲染來提高組件性能。不過使用很差的話會使得組件該渲染的時候不渲染，因此要謹慎使用。

new getSnapshotBeforeUpdate (prevProps, prevState)

這個方法會在組件更新時，render方法以後，可是dom尚未真正發生更新前執行。咱們能夠根據更新前的props和state返回一個值，這個值將會做爲下一個生命週期方法componentDidUpdate的第三個參數傳入。能夠用來與componentDidUpdate協做完成一些事情。

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.blocks.length < this.state.blocks.length) {
      const grid = this.grid.current;
      const isAtBottomOfGrid =
        window.innerHeight + window.pageYOffset === grid.scrollHeight;
      return { isAtBottomOfGrid };
    }
    return null;
  }

componentDidUpdate (prevProps, prevState, snapshot)

該生命週期方法會在組件渲染更新完成後執行，通常在這裏作的事情是：根據props的改變作一些操做好比請求數據，根據snapshot的值作一些操做，或者是作一些dom操做等等。

一、根據props、state的改變作一些處理
在舊的生命週期方法componentWillReceiveProps中，常常會比較this.props和nextProps，來進行其餘操做好比請求數據，或調用this.someFunc等，在新的生命週期方法中這部分操做能夠在componentDidUpdate中完成。

componentDidUpdate (prevProps, prevState, snapshot) {
 if (this.props.count !== prevProps.count) {
    this.fetchData()
 }
}

二、根據第三個參數snapshot作一些處理
好比如下例子就是根據上面getSnapshotBeforeUpdate裏返回的isAtBottomOfGrid來判斷當前頁面的滾動條是否是在底部，若是是的話，更新後還須要手動將滾動條滾到底部。

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot.isAtBottomOfGrid) {
    window.scrollTo({
      top: this.grid.current.scrollHeight,
      behavior: 'smooth',
    });
  }
}

componentWillUnmount

這個方法與componentDidMount是相對應的，在componentDidMount中綁定的事件、建立的定時器均可以在這個方法裏清除。

componentWillUnmount () => {
  window.removeEventListener('scroll', this.handleScroll}
  clearTimeout(this.timeout)
}

new static getDerivedStateFromError(error)

這個方法用來獲取子組件拋出的錯誤，根據錯誤信息返回一個對象，爲新的state的值。只能獲取到子組件生命週期方法中拋出的錯誤，像this.handleClick裏拋出的錯誤，不會觸發該方法。這個方法只能用來返回錯誤，若是想打印錯誤或作其餘處理，須要在componentDidCatch裏寫。

static getDerivedStateFromError(error) {
  return { hasError: true };
}

new componentDidCatch(error, info)

當子組件中拋出錯誤後，componentDidCatch就會觸發，能夠在這個方法裏捕獲錯誤、打印錯誤信息或上報錯誤信息等操做。

componentDidCatch(error, info) {
  console.log(error, info);
}

參考：React 16 Lifecycle Methods: How and When to Use Them