react生命周期(旧)+(新)

最新推荐文章于 2022-05-11 22:50:52 发布

爱吃囍囍丸子

最新推荐文章于 2022-05-11 22:50:52 发布

阅读量92

点赞数

分类专栏： javascript 文章标签： javascript react

本文链接：https://blog.csdn.net/l529936997/article/details/119491884

版权

javascript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <style>
        .title{
            width: 200px;
            background-color: coral;
        }
    </style>
</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 用于将ajax转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">

  
    //1.创建组件
    class Demo extends  React.Component{
        constructor(props){
            console.log('Demo--constructor');
            super(props)
            //初始化状态
            this.state = {
                count:0
            }
        }

        //加1的回调函数
        add=()=>{
            const {count} = this.state
            this.setState({count:count+1})
        }


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

        //组件将要挂载的钩子
        componentWillMount(){
            console.log('Demo--componentDidMount');
        }

        //组件挂载完毕的钩子
        componentDidMount(){
            console.log('Demo--componentDidMount');
        }
        
        //组件将要卸载的钩子
        componentWillUnmount(){
            console.log('Demo--componentWillUnmount');
        }

        //控制组件更新的'阀门'
        shouldComponentUpdate(){
            console.log('Demo--shouldComponentUpdate');
            //返回true 继续执行页面的更新渲染等
            //返回false 不往下执行了
            return true
        }

        //组件将要更新的钩子
        componentWillUpdate(){
            console.log('Demo--componentWillUpdate');
        }

        //组件更新完毕的钩子
        //会传入两个参数  一个是更新之前的preprops,一个是更新之前的prestate
        componentDidUpdate(preprops,prestate){
            console.log('Demo--componentDidUpdate',preprops,prestate);
        }


        
        //状态初始化和更新之后
         render() {
            console.log('Demo--render');
             return (
                 <div>
                     <h2>当前求和为:{this.state.count}</h2>
                     <button onClick={this.add} >点我+1</button>
                     <button onClick={this.del}>点我卸载当前组件</button>
                 </div>
             )
         }
     }
     ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

新

在这里插入图片描述

尽量不用

在这里插入图片描述

在这里插入图片描述
getSnapshotBeforeUpdate()应用

实现滑动滑块后,页面更新时不改变当前显示内容
原理在更新完毕之前也就是在didupdate之前页面的高度是未更新的所以在更新时传入更新前的容器高度
当前容器的页面高度+= 用更新后的容器高度减去更新前的也就是getSnapshotBeforeUpdate()传入的高度
就实现当前效果了
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <style>
        .list{
            height: 100px;
            overflow: auto;
            width: 100px;
            background-color: sandybrown;
        }
        .title{
            width: 200px;
            background-color: coral;
        }
    </style>
</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 用于将ajax转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">

  
    //1.创建组件
    class Demo extends  React.Component{
       state={
           newsArr:[]
       }
       componentDidMount(){
           setInterval(()=>{
            const {newsArr} = this.state
            let news = '新闻'+(newsArr.length+1)
            this.setState({newsArr:[news,...newsArr]})
           },1000)
       }
       getSnapshotBeforeUpdate(){
        return this.refs.list.scrollHeight
       }

       componentDidUpdate(PreProps,PreState,Height){
        this.refs.list.scrollTop += this.refs.list.scrollHeight - Height
       }
         render() {
           
             return (
                 <div className='list' ref='list'>
                     {this.state.newsArr.map((item,index)=>(
                        <div key={index}>{item}</div>
                    ))}
                 </div>
             )
         }
     }
     ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>