react新版本生命周期钩子函数及用法详解

 更新时间:2021年04月28日 10:10:56   作者:河软小宝  
这篇文章主要介绍了react新版本生命周期钩子函数及用法详解,本文通过示例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

和旧的生命周期相比

在这里插入图片描述

准备废弃三个钩子,已经新增了两个钩子

React16 之后有三个生命周期被废弃(但并没有删除)

  • componentWillMount( 组件将要挂载的钩子)
  • componentWillReceiveProps(组件将要接收一个新的参数时的钩子)
  • componentWillUpdate(组件将要更新的钩子)

 新版本的生命周期新增的钩子

  •  getDerivedStateFromProps
  • 通过参数可以获取新的属性和状态
  • 该函数是静态的
  • 该函数的返回值会覆盖掉组件状态

getSnapshotBeforeUpdate

  1. 真实的DOM构建完成,但还未实际渲染到页面中。
  2. 在该函数中,通常用于实现一些附加的dom操作
  3. 该函数的返回值,会作为componentDidUpdate的第三个参数

 getDerivedStateFromProps

getDerivedStateFromProps不是给实例用的,需要将它定义为一个静态方法。且需要给一个返回值


返回值可以使 state Obj 也可以是null
返回值是 state Obj 的话直接将之前的覆盖 且无法改变
返回null 对其他任何功能都没有影响

// 从props哪里得到一个派生的状态
static getDerivedStateFromProps(props,state){
	return props
}

若 state的值 在人和时候都取决与 props 时,可以使用getDerivedStateFromProps

在这里插入图片描述

<div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type='text/babel'>
    // 创建组件
  class Count extends React.Component{
    // 构造器
    constructor(props){
      console.log('Count---constructor')
      super(props)
      // 初始化状态
      this.state = {count:0}
    }

    // 挂载完成的钩子
    componentDidMount(){
      console.log('Count---componentDidMount')
    }

    // 卸载组件按钮的回调
    death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 实现 +1
     add =()=>{
      // 获取原状态
      const {count} = this.state
      // 更新状态
      this.setState({count:count+1})
    }

    // 强制更新按钮的回调
    force=()=>{
      this.forceUpdate()
    }

    static getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps',props,state)
      return props
    }

    // 控制组件更新的阀门
    shouldComponentUpdate(){
      console.log('Count---shouldComponentUpdate')
      // 如果返回值为false阀门关闭  默认为true
      return true
    }

    // 组件更新完毕的钩子
    componentDidUpdate(){
      console.log('Count---componentDidUpdate')
    }

     // 组件将要卸载的钩子
     componentWillUnmount(){
      console.log('Count---componentWillUnmount');
    }

    render(){
      console.log('Count---render')
      const {count} = this.state
      return(
        <div>
          <h2>当前求和为:{count}</h2>
          <button onClick={this.add}>点我+1</button>  
          <button onClick={this.death}>点我卸载组件</button>  
          <button onClick={this.force}>点我强制更新(不改变数据)</button>  
        </div>
      )
    }
  }
  
  // 渲染组件
    ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </script>

执行结果

在这里插入图片描述

getSnapshotBeforeUpdate

返回值可以是null 或者 一个快照
如果是null 则没有任何影响
如果是一个快照则可以将返回值传递给componentDidUpdate 的第三个参数
componentDidUpdate 能接收的三个参数
分别是
先前的props、先前的state和getSnapshotBeforeUpdate返回的快照
prevprops、 prevstate、snapshotValue

在这里插入图片描述

<div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type='text/babel'>
    // 创建组件
  class Count extends React.Component{
    // 构造器
    constructor(props){
      console.log('Count---constructor')
      super(props)
      // 初始化状态
      this.state = {count:0}
    }

    // 挂载完成的钩子
    componentDidMount(){
      console.log('Count---componentDidMount')
    }

    // 卸载组件按钮的回调
    death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 实现 +1
     add =()=>{
      // 获取原状态
      const {count} = this.state
      // 更新状态
      this.setState({count:count+1})
    }

    // 强制更新按钮的回调
    force=()=>{
      this.forceUpdate()
    }

    static getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps',props,state)
      return null
    }

    getSnapshotBeforeUpdate(){
      console.log('getSnapshotBeforeUpdate');
      return "eee"
    }

    // 控制组件更新的阀门
    shouldComponentUpdate(){
      console.log('Count---shouldComponentUpdate')
      // 如果返回值为false阀门关闭  默认为true
      return true
    }

    // 组件更新完毕的钩子
    componentDidUpdate(preProps,preState,snapshotValue){
      console.log('Count---1componentDidUpdate',preProps,preState,snapshotValue);
    }

     // 组件将要卸载的钩子
     componentWillUnmount(){
      console.log('Count---componentWillUnmount');
    }

    render(){
      console.log('Count---render')
      const {count} = this.state
      return(
        <div>
          <h2>当前求和为:{count}</h2>
          <button onClick={this.add}>点我+1</button>  
          <button onClick={this.death}>点我卸载组件</button>  
          <button onClick={this.force}>点我强制更新(不改变数据)</button>  
        </div>
      )
    }
  }
  
  // 渲染组件
    ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </script>

总结

生命周期的三个阶段(新)

一、 初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()getDerivedStateFromPropsrender()componentDidMount()

二、 更新阶段: 由组件内部this.setSate()或父组件重新render触发

getDerivedStateFromPropsshouldComponentUpdate()render()getSnapshotBeforeUpdatecomponentDidUpdate()

三、卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

 重要的勾子

render:初始化渲染或更新渲染调用componentDidMount:开启监听, 发送ajax请求componentWillUnmount:做一些收尾工作, 如: 清理定时器

即将废弃的勾子

  1.  componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。

到此这篇关于react新版本生命周期钩子函数的文章就介绍到这了,更多相关react 生命周期 钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React如何利用相对于根目录进行引用组件详解

    React如何利用相对于根目录进行引用组件详解

    这篇文章主要给大家介绍了关于React如何使用相对于根目录进行引用组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事

    这篇文章主要介绍了浅谈React Router关于history的那些事,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 详解使用React全家桶搭建一个后台管理系统

    详解使用React全家桶搭建一个后台管理系统

    本篇文章主要介绍了使用React全家桶搭建一个后台管理系统,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • react-redux中connect的装饰器用法@connect详解

    react-redux中connect的装饰器用法@connect详解

    这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • ReactNative踩坑之配置调试端口的解决方法

    ReactNative踩坑之配置调试端口的解决方法

    本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • react-native fetch的具体使用方法

    react-native fetch的具体使用方法

    本篇文章主要介绍了react-native fetch的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 浅谈redux以及react-redux简单实现

    浅谈redux以及react-redux简单实现

    这篇文章主要介绍了浅谈redux以及react-redux简单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • react脚手架如何配置less和ant按需加载的方法步骤

    react脚手架如何配置less和ant按需加载的方法步骤

    这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 使用 React 和 Threejs 创建一个VR全景项目的过程详解

    使用 React 和 Threejs 创建一个VR全景项目的过程详解

    这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React实现双向绑定示例代码

    React实现双向绑定示例代码

    这篇文章给大家介绍了在React中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。
    2016-09-09

最新评论