五、react 组件对象的生命周期

最新推荐文章于 2023-01-11 13:53:10 发布

快乐de馒头

最新推荐文章于 2023-01-11 13:53:10 发布

阅读量145

点赞数

分类专栏： reactjs

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/103743439

版权

reactjs 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1、理解

组件对象从创建到死亡它会经历特定的生命周期阶段
React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

2、生命周期流程图

3、生命周期详述

组件的三个生命周期状态:

* Mount：插入真实 DOM

* Update：被重新渲染

* Unmount：被移出真实 DOM

React 为每个状态都提供了勾子(hook)函数

* componentWillMount()

* componentDidMount()

* componentWillUpdate()

* componentDidUpdate()

* componentWillUnmount()

生命周期流程:
1. 第一次初始化渲染显示: ReactDOM.render()

* constructor(): 创建对象初始化state

* componentWillMount() : 将要插入回调

* render() : 用于插入虚拟DOM回调

* componentDidMount() : 已经插入回调

1. 每次更新state: this.setSate()

* componentWillUpdate() : 将要更新回调

* render() : 更新(重新渲染)

* componentDidUpdate() : 已经更新回调

1. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)

* componentWillUnmount() : 组件将要被移除回调

4、重要的勾子

render(): 初始化渲染或更新渲染调用
componentDidMount(): 开启监听, 发送ajax请求
componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
componentWillReceiveProps(): 当组件接收到新的props时候调用，它有一个参数是新的props

5、实例

需求: 自定义组件
1. 让指定的文本做显示/隐藏的渐变动画
2. 切换持续时间为2S
3. 点击按钮从界面中移除组件界面

<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">
  /*
  需求: 自定义组件
    1. 让指定的文本做显示/隐藏的动画
    2. 切换时间为2S
    3. 点击按钮从界面中移除组件界面
   */
  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)
    }

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

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

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

    render() {
      console.log('render() 渲染组件')
      return (
        <div>
          <h2 style={{opacity:this.state.opacity}}>{this.props.content}</h2>
          <button onClick={this.removeComponent}>不活了</button>
        </div>
      )
    }
  }
  ReactDOM.render(<Fade content="react学不会, 怎么办?"/>, document.getElementById('example'))
</script>
</body>