react 组件的生命周期

最新推荐文章于 2023-12-18 11:11:35 发布

胡椒粉0121

最新推荐文章于 2023-12-18 11:11:35 发布

阅读量162

点赞数

分类专栏：前端MVVM框架—React

本文链接：https://blog.csdn.net/huangjianfeng21/article/details/94183618

版权

前端MVVM框架—React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

React组件的生命周期介绍

React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

组件对象从创建到死亡它会经历特定的生命周期阶段

组件的三个生命周期状态: Mount：插入真实 DOM，Update：被重新渲染，Unmount：被移出真实 DOM

生命周期流程

需求: 自定义组件

让指定的文本做显示/隐藏的动画
切换时间为2S
点击按钮从界面中移除组件界面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>10_ComponentLife</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  class Fade extends React.Component {
    constructor (props) {
      super(props)
      console.log('constructor(): 创建组件对象------------------')
      this.state = {
        opacity: 1
      }
      this.removeComponent = this.removeComponent.bind(this)
    }

    componentWillMount () {
      console.log('componentWillMount(): 初始化将要挂载------------------')
    }

    componentDidMount () {// 在此方法中启动定时器/绑定监听/发送ajax请求
      console.log('componentDidMount(): 初始化已经挂载------------------')
      // 保存到当前组件对象中
      this.intervalId = setInterval(function () {
        console.log('------------------')
        // 得到当前opacity
        let {opacity} = this.state
        // 更新opacity
        opacity -= 0.1
        if (opacity <= 0) {
          opacity = 1
        }
        // 更新状态
        this.setState({opacity})
      }.bind(this), 200) // bind(this)是因为这里setInterval是属于window的，所以需要绑定this
    }

    componentWillUpdate () {
      console.log('componentWillUpdate(): 将要更新------------------')
    }
    componentDidUpdate () {
      console.log('componentDidUpdate(): 已经更新------------------')
    }

    componentWillUnmount () { // 清除定时器/解除监听
      console.log('componentWillUnmount(): 将要被移除------------------')
      clearInterval(this.intervalId)
    }

    render() {
      console.log('render() 渲染组件------------------')
      const {opacity} = this.state
      return (
        <div>
          <h2 style={{opacity:opacity}}>{this.props.content}</h2>
          <button onClick={this.removeComponent}>不活了</button>
        </div>
      )
    }

    removeComponent () {
      ReactDOM.unmountComponentAtNode(document.getElementById('example'))
    }
  }

  // 可以在渲染组件的时候传一些数据
  ReactDOM.render(<Fade content="react学不会, 怎么办?"/>, document.getElementById('example'))
</script>
</body>
</html>

还有两个生命周期函数

componentWillReceiveProps方法表示：当父组件传递参数进来的时候会触发调用这个方法，并且接收一个参数

shouldComponentUpdate方法表示：一旦更新state里面的数据就会触发这个方法，方法最后不会默认return true，需要手动return true，如果return false 后面的生命周期函数就不会执行了

常用的方法

render(): 必须重写, 返回一个自定义的虚拟DOM

constructor(): 初始化状态, 绑定this(可以箭头函数代替)

componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听

新版本的新增的两个生命周期函数

// 新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props后调用。
    // 它可以返回一个对象来更新state，或者返回null来表示新的props不需要任何state更新。
    // 与componentDidUpdate一起，这个新的生命周期应该覆盖传统componentWillReceiveProps的所有用例。
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('getDerivedStateFromProps', nextProps, prevState)
        if (nextProps.value !== prevState.value) {
            return {
                value: nextProps.value
            }
        }
        return null
    }

    // 新的getSnapshotBeforeUpdate生命周期在更新之前被调用（例如，在DOM被更新之前）。
    // 此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 
    //（这个生命周期不是经常需要的，但可以用于在恢复期间手动保存滚动位置的情况。
    // 与componentDidUpdate一起，这个新的生命周期将覆盖旧版componentWillUpdate的所有用例
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate', prevProps, prevState)
        return null
    }

胡椒粉0121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 组件的生命周期

React组件的生命周期介绍React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作组件对象从创建到死亡它会经历特定的生命周期阶段组件的三个生命周期状态: Mount：插入真实 DOM，Update：被重新渲染，Unmount：被移出真实 DOM生命周期流程需求: ...
复制链接

扫一扫