React——组件生命周期

最新推荐文章于 2024-06-05 10:10:26 发布

Memorial*

最新推荐文章于 2024-06-05 10:10:26 发布

阅读量169

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_38360675/article/details/107301560

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

     constructor(props) {
       super(props);

       this.state={
         opacity: 1
       }
       this.distroyComponent = this.distroyComponent.bind(this)
     }

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

     componentDidMount(){
       //启动循环定时器
       console.log('定时器执行...')
       this.intervalId=setInterval(function () {
         let {opacity}=this.state
         opacity -= 0.1
         if (opacity<=0){
           opacity=1
         }
         this.setState({opacity})
       }.bind(this),200)
   }

     componentWillUnmount(){
       //清理定时器

       clearInterval(this.intervalId)
     }

     render(){
       console.log('render()')
       const {opacity} = this.state
       return(
               <div>
                 <h2 style={{opacity:opacity}}>{this.props.msg}</h2>
                 <button onClick={this.distroyComponent}>不活了</button>
               </div>
       )
     }
   }
   ReactDOM.render(<Life msg="react太难了！"/>,document.getElementById('example'))
</script>
</body>
</html>

组件的生命周期：

在这里插入图片描述

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

* Mount：插入真实 DOM

* Update：被重新渲染

* Unmount：被移出真实 DOM

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

* componentWillMount()

* componentDidMount()

* componentWillUpdate()

* componentDidUpdate()

* componentWillUnmount()

3.生命周期流程:

1）第一次初始化渲染显示: ReactDOM.render()

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

* componentWillMount() : 将要插入回调

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

* componentDidMount() : 已经插入回调

2）每次更新state: this.setSate()

* componentWillUpdate() : 将要更新回调

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

* componentDidUpdate() : 已经更新回调

3）移除组件: ReactDOM.unmountComponentAtNode(containerDom)

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

Memorial*

关注

0
点赞
踩
0

收藏

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

需求: 自定义组件 1. 让指定的文本做显示/隐藏的渐变动画 2. 切换持续时间为2S 3. 点击按钮从界面中移除组件界面<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>10_ComponentLife</title></head><body><div id="example"></div&...
复制链接

扫一扫

专栏目录