React16.3.0以后的生命周期(二) - 更新、卸載、異常

since1986 發布于2019-08-23 12:52 / 341人閱讀

摘要：示例此方法有兩個參數返回值為或者默認返回主要使用它來控制組件要不要渲然，常用作性能優化。只能捕獲組件樹的異常，無法捕獲這個方法內的異常。

組件更新

static getDerivedStateFromProps()

當本地state需要根據props來改變的時候可調用此方法。

這個方法是在render()前會被執行，只要執行render()都會被在之前被觸發。

該方法有兩個參數props和state; 返回值為state對象, 不需要返回整體state，把需要改變的state返回即可。

示例：

static getDerivedStateFromProps(props, state) {
  if(props.color !== state.color) {
    return {color: props.color};
  }
}

shouldComponentUpdate()

此方法有兩個參數：shouldComponentUpdate(nextProps, nextState).

返回值為true或者false, 默認返回true.

主要使用它來控制組件要不要渲然，常用作性能優化。

觸發此方法的條件是：組件接收任意props或者state時都會被調用。需要注意的是在第一次render()時和在調用forceUpdate()時都不會被觸發。

示例：

shouldComponentUpdate(nextProps, nextState) {
  if(nextProps.color !== this.props.color || nextState.size !== this.state.size) {
    return true;
  } 
  return false;
}

render()

這個方法是React組件中必須要提供的方法。當state或者props任一數據有更新時都會執行。

需要注意當繼承PureComponent時，不會對對象進行深度比較，也就是，不會根據對象內的對象變化時執行render().

render()是一個純函數，也就是不能在這個方法中有類似setState()這樣的行為。

返回的數據類型可以有：

null、String、Number、Array、Boolean。

React elements

Fragment

Portal

注意：不能返回undefined.

當shouldComponentUpdate()返回false時，無論state和props有沒有變化，這個方法都不執行。

示例：

    render() {
      return (
        {this.state.color}
      );
    }

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)在render將組件渲然到dom中就會執行。

如果不實現該方法則返回null.

返回的數據由自己定義，并且返回的數據作為componentDidUpdate方法中的參數。

示例：

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  render() {
    return (
      {/* ...contents... */}
    );
  }
}

componentDidUpdate()

該方法在組件更新后立即執行，并且在組件掛載階段不執行。

componentDidUpdate(prevProps, prevState, snapshot)第三個參數就是上節中提到的。

示例：

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

組件卸載

componentWillUnmount()

在組件被卸載或者銷毀的時候執行，方法中不能再有setState的動作。

一般用作清除組件中起的定義器、webSocket等。

示例：

componentWillUnmount() {
  if(this.timer) {
    window.clearInterval(this.timer);
    this.timer = null;
  }
}

在線示例

組件異常處理

componentDidCatch()

componentDidCatch(error, info) 異常的處理。

只能捕獲組件樹的異常，無法捕獲這個方法內的異常。

示例：

定義一下異常處理組件：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    window.console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return Something went wrong.;
    }
    return this.props.children;
  }
}

使用這個異常組件：