React旧（新）版本中的生命周期

最新推荐文章于 2022-07-05 14:22:50 发布

Realistic-er

最新推荐文章于 2022-07-05 14:22:50 发布

阅读量92

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/m0_52518047/article/details/115428961

版权

组件挂载时的流程：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
       class Count extends React.Component {
           constructor (props) {
             console.log('Count-constructor')
             super(props)
           }
           state = {
               number:0
           }
           demo1 = () => {
               let {number} = this.state
               number += 1
               this.setState({number})
           }
           // 组件将要挂载的钩子
            componentWillMount () {
               console.log('ComponentWillMount')
           }
           // 组件挂载完毕的钩子
           componentDidMount () {
            console.log('ComponentDidMount')
           }
           render () {
               console.log('count-render')
               return (
                 <div>
                    <h2>当前求和为{this.state.number}</h2>
                    <button onClick={this.demo1}>点我加1</button>
                 </div>
               )
           }
       }

       ReactDOM.render(<Count />,document.getElementById('test'))
    </script>
</body>
</html>

组件更新时的流程：

在这里插入图片描述

1.shouldComponentUpdate钩子函数

相当于一个阀门，如果该函数内部返回的是true，那么就会继续执行下去；返回的是false，那么就不会再往下执行了

shouldComponentUpdate () {
               return true
           }

（1）setstate的更新流程----------第二条线

（2）forceUpdate：不经过shouldComponentUpdate这条线

在不更行状态state中数据的条件下，强制更新

demo2 =() => {
               this.forceUpdate()
           }

2.componentWillReceiveProps这个钩子作用是接受新的props才会被出发，第一次接受的时候是不会被触发的

<script type="text/babel">
    class A extends React.Component {
        changeCar = () => {
            this.setState({carname:'宝马'})
        }
        state = {
            carname:'奔驰'
        }
        render () {
            return (
                <div>
                  <div onClick={this.changeCar}>A</div>
                  <B carname={this.state.carname} />
                </div>
            )
        }
    }

    class B extends React.Component {
        // 组件将要接受新的props的钩子
        componentWillReceiveProps (props) {
          console.log(1)
        }
        render () {
            return (
                <div>
                  <div>B,车的名字是{this.props.carname}</div>
                </div>
            )
        }
    }
    ReactDOM.render(<A />,document.getElementById('test'))
    </script>

类似于created的componentDidMount：

页面一启动就会执行函数

    <script type="text/babel">
      // 创建组件
      class Life extends React.Component {
          state = {
              opacity:1
          }
          death = () => {
              // 清除定时器
              clearInterval(this.timer)
              // 清除容器 
              ReactDOM.unmountComponentAtNode(document.getElementById('test'))
          }
          // 组件完成挂载,只调用一次
          componentDidMount () {
            console.log(this)
            // this.timer将这个定时器挂载到实例对象身上
            this.timer = setInterval (() => {
                let {opacity} = this.state
                // opacity减小0.1
                opacity -= 0.1
                if (opacity<=0) {
                    opacity = 1
                }
                this.setState({opacity})
            },200)
          }
          render () {
              return (
               <div>
                 <h2 style={{opacity:this.state.opacity}}>React学不会怎么办</h2>
                 <button onClick={this.death}>不活了</button>
                </div>
              )
          }
      }
      ReactDOM.render(<Life />,document.getElementById('test'))
    </script>

清除组件容器：

ReactDOM.unmountComponentAtNode(document.getElementById('test'))

生命周期（新）

在这里插入图片描述

（1）getDerivedStateFromProps

用法：几乎不怎么使用

（1）前边必须添加static

（2）必须return一个state状态对象：会将state中的数据进行修改，修改之后这个数据部不会再发生变化了；

或者return null

static getDerivedStateFromProps () {
               console.log(123)
               return {number:108}
           }

（2）getSnapshotBeforeUpdate：

会返回一个值，由componentDidUpdate的第三个参数进行接受，前两个参数是页面数据更新之前，props和state之前的值

getSnapshotBeforeUpdate () {
               console.log('getSnapshotBeforeUpdate')
               return 'atguigu'
           }
           componentDidUpdate (prevProps,preState,snapshotValue) {
               console.log(prevProps,preState,snapshotValue)
           }