react学习(九)______组件的生命周期(更新阶段)

我来讲讲react中的组件的生命周期更新阶段的钩子函数，更新阶段的钩子函数一个就五个，更新阶段的钩子函数其实也就有三个需要认识一下的，其他的在挂载阶段已经认识过了。

更新阶段的钩子函数

以上就是更新阶段钩子函数的执行顺序，并且我附上官网的地址，大家可以点击查看官方文档。

shouldComponentUpdate(nextProps, nextState)

其实很好理解这个钩子函数，看下钩子函数的名字就可以翻译出来这个钩子函数的用处，shouldComponentUpdate是否应该进行组件的更新，如果需要更新的返回true，不需要更行的返回false，这个钩子函数会受到state和props的影响，每当state和props发生改变的时候，在render()函数执行之前将会执行shouldComponentUpdate函数询问一下是否需要进行一个组件的更新，默认值时返回true。如果返回false，componentWillUpdate,render和componentDidUpdate不会被调用。有许多人利用这个钩子函数来进行一个性能的优化作用，其实就是强制的断开render()函数的执行，不过不建议这样使用，因为比较容易产生bug。
注意：

询问组件是否进行更新操作,如果不写默认返回true，就代表组件要更新了，就会走render
如果说这个钩子函数返回false，就代表不让组件更新，就不会走render
内部如果想要获取最新属性的话，需要从参数里面获取
所以说react里面可以通过这个钩子函数来去提升react性能

shouldComponentUpdate(nextProps, nextState){
        //根据自定义条件进行一个判断
        if(this.props.flag !== nextProps.flag){ //之前的属性值与最新的属性值如果不一样的话才会返回true
            return true
        }
        return false
    }

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
应返回 snapshot 的值（或 null）。
说白了这个钩子函数不常用，我已不知道他具体用来干什么的了。

componentDidUpdate()

componentDidUpdate() 会在组件更新阶段的render()函数执行完毕之后就会被立即调用。首次渲染不会执行此方法。当组件更新后，可以在此处对 DOM 进行操作。因为这个钩子函数的执行代表着页面DOM结构已经渲染完毕了，可以拿到真实dom节点，这时候我们可以进行实例化或者初始化操作。这里面有一个prevProps参数，是代表拿到之前的状态，我们也可以对之前的状态进行一个操作，拿之前的状态与现在的状态进行一个判断，然后执行相应的业务逻辑。我们也可以在这个函数里面进行数据请求。
注意：

如果shouldComponentUpdate()函数返回false，这个函数就不会执行。

componentDidUpdate(prevProps){
//数据改变引发的真实dom结构已经挂载完毕了 
this.swiper = new Swiper ('.swiper-container', {  
      loop: true, // 循环模式选项 
      // 如果需要分页器
      pagination: {
      el: '.swiper-pagination',
      }
  })   
}