React v16.10组件生命周期react v16中组件生命周期图谱汇总，包含了组件挂载——更新——卸载这三个生

react v16中组件生命周期图谱汇总，包含了组件挂载——更新——卸载这三个生命阶段：

react组件生命周期图谱

一挂载阶段

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

1. `constructor()`

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
```
  constructor(props) {
    super(props);
    // 不要在这里调用 this.setState()
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
```

2. `static getDerivedStateFromProps()`

```
  static getDerivedStateFromProps(props, state)
```
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。**此方法适用于 state 的值在任何时候都取决于 props的场景下**。

以下是上传图片组件：

上传一张图片的情况下 ，props.imgUrl是一个string类型

```
constructor(props) {
    super(props)
    this.state = {
        imgUrl: props.imgUrl,
        loading: false,
        num: 0
    }
}

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.imgUrl !== prevState.imgUrl) {
        return {
            imgUrl: nextProps.imgUrl
        }
    }
    return null;
}
```
上传一张图片或多张图片的情况下 ，props.imgUrlList是数组类型
 ```
  constructor(props) {
    super(props)
    this.state = {
        imgUrlList: [],
        loading: false,
        num: 0,
        showCarousel: { flag: false, index: 0 },
    }
}

componentDidMount() {
    let { imgUrlList } = this.props
    this.setState({
        imgUrlList: imgUrlList ? imgUrlList.map(v => ({
            url: v,
            status: 'success',
            message: ''
        })) : []
    })
}

static getDerivedStateFromProps(nextProps, prevState) {

    if (nextProps.imgUrlList.length > 0){
        let newAry = []
        prevState.imgUrlList.length>0
            ? prevState.imgUrlList.map((element, index) => {
                newAry.push({ ...element, url: nextProps.imgUrlList[index] })
            }) 
            : newAry.push({
                status: 'success',
                message: '',
                url: nextProps.imgUrlList[0] 
            })
        return {
            imgUrlList: newAry
        }
       
    }
    return null;
}
 ```

3. `render()`

render() 方法是 class 组件中唯一必须实现的方法。

4. `componentDidMount()`

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅。

componentDidMount = () => {
    document.addEventListener('resize', this.resizeEvent)
}

componentWillUnmount = () => {
    document.removeEventListener('resize', this.resizeEvent)
}

resizeEvent = () => {
    this.setState({
        screenWidth: document.documentElement.clientWidth,
        screenHeight: document.documentElement.clientHeight
    })
}

componentDidMount() {
    document.addEventListener('click',this.closeHandle)
}
componentWillUnmount(){
    document.removeEventListener('click',this.closeHandle)
}

二更新阶段

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

1. `static getDerivedStateFromProps()`

更新阶段的getDerivedStateFromProps同挂载阶段的getDerivedStateFromProps。

2. `shouldComponentUpdate()`

  shouldComponentUpdate(nextProps, nextState)

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state ,每次发生变化组件都会重新渲染。当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。

首次渲染或使用 forceUpdate() 时不会调用该方法，该方法在做渲染的性能优化时用的比较多，以减少不必要的渲染。

 shouldComponentUpdate(nextProps, nextState) {
    if (!this.state.isShow && nextState.isShow && this.props.isModal) {
        let pos = this.refs.moreBox.getClientRects()[0]
        let wdHeight = window.innerHeight
        if (wdHeight - pos.top > 200) {
            this.setState({
                posLeft: pos.left + 12,
                posTop: pos.top + 36,
                directionDown: false
            })
        } else {
            this.setState({
                posLeft: pos.left + 12,
                posTop: pos.top - 12,
                directionDown: true
            })
        }

    }
    return true
}

3. `render()`

4. `getSnapshotBeforeUpdate()`

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。例如：

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

    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 我们是否在 list 中添加新的 items ？
        // 捕获滚动位置以便我们稍后调整滚动位置。
        if (prevProps.list.length < this.props.list.length) {
            const list = this.listRef.current;
            return list.scrollHeight - list.scrollTop;
        }
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
        // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
        //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
        if (snapshot !== null) {
            const list = this.listRef.current;
            list.scrollTop = list.scrollHeight - snapshot;
        }
    }

    render() {
      return (
        <div ref={this.listRef}>{/* ...contents... */}</div>
      );
    }

  }

在上述示例中，重点是从 getSnapshotBeforeUpdate 读取 scrollHeight 属性，因为 “render” 阶段生命周期（如 render）和 “commit” 阶段生命周期（如 getSnapshotBeforeUpdate 和 componentDidUpdate）之间可能存在延迟。

5. `componentDidUpdate()`

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

三卸载阶段

当组件从 DOM 中移除时会调用如下方法：

1. `componentWillUnmount()`

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

四错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

1. `static getDerivedStateFromError()`

此生命周期会在子组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state

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

static getDerivedStateFromError(error) {
  // 更新 state 使下一次渲染可以显降级 UI
  return { hasError: true };
}

render() {
  if (this.state.hasError) {
    // 你可以渲染任何自定义的降级  UI
    return <h1>Something went wrong.</h1>;
  }

  return this.props.children; 
}

getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。如遇此类情况，请改用 componentDidCatch()。

2. `componentDidCatch()`

此生命周期在后代组件抛出错误后被调用。它接收两个参数：error —— 抛出的错误和 info —— 带有 componentStack key 的对象，其中包含[有关组件引发错误的栈信息](zh-hans.reactjs.org/docs/error- boundaries.html#component-stack-traces)。

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

    static getDerivedStateFromError(error) {
      // 更新 state 使下一次渲染可以显示降级 UI
      return { hasError: true };
    }

    componentDidCatch(error, info) {
      // "组件堆栈" 例子:
      //   in ComponentThatThrows (created by App)
      //   in ErrorBoundary (created by App)
      //   in div (created by App)
      //   in App
      logComponentStackToMyService(info.componentStack);
    }

    render() {
      if (this.state.hasError) {
        // 你可以渲染任何自定义的降级 UI
        return <h1>Something went wrong.</h1>;
      }  

      return this.props.children; 
    }
}

React v16.10组件生命周期

一 挂载阶段

1. constructor()

2. static getDerivedStateFromProps()

3. render()

4. componentDidMount()

二 更新阶段

1. static getDerivedStateFromProps()

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate()

5. componentDidUpdate()

三 卸载阶段

1. componentWillUnmount()

四 错误处理

1. static getDerivedStateFromError()

2. componentDidCatch()

一挂载阶段

1. `constructor()`

2. `static getDerivedStateFromProps()`

3. `render()`

4. `componentDidMount()`

二更新阶段

1. `static getDerivedStateFromProps()`

2. `shouldComponentUpdate()`

3. `render()`

4. `getSnapshotBeforeUpdate()`

5. `componentDidUpdate()`

三卸载阶段

1. `componentWillUnmount()`

四错误处理

1. `static getDerivedStateFromError()`

2. `componentDidCatch()`