react进阶—04利用生命周期完善整个动画

最新推荐文章于 2022-05-05 15:36:57 发布

jiaojsun

最新推荐文章于 2022-05-05 15:36:57 发布

阅读量380

点赞数

分类专栏： react进阶

本文链接：https://blog.csdn.net/jiaojsun/article/details/87905811

版权

react进阶专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.上节回顾

生命周期

一个组件从创建到销毁的过程，称为：生命周期

React 在组件的生命周期内的不用阶段会调用一些函数，我们把这些函数称为：生命周期函数

组件的三个阶段：

Mounting：挂在阶段
Updating：更新阶段
Unmounting：卸载阶段

*Mounting 和 Unmounting 阶段在组件的整个生命周期中只会出现一次，而Updating 阶段会在组件每次更新中执行

1、挂在阶段（组件创建到首次渲染到页面）

constructor（）
构造函数，在创建组件的时候调用一次
componentWillmount（）
在组件即将被挂载的时候调用一次
render（）
渲染
componentDidMount（）
在组件被挂载完成的时候调用一次，可以在这里使用 refs

2、卸载阶段（组件从页面中移除）

compontentWillUnmount
即将卸载
*没有卸载完成

3、更新阶段

componentWillReceiveProps(nextProps)
父组件的更新会触发子组件的这个函数
nextProps 父组件更新的时候带来的数据
shouldComponentUpdate(nextProps,nextState)
是否需要重新渲染
Return false/true
componentWillUpdate(nextProps,nextState)
即将更新
render
渲染
componentDidUpdate(prevProps,PrevState)
完成更新

看完了以上的生命周期，我们就明白了为什么上面的效果没有实现。原因是在组件的更新阶段，并没有执行constructor（），所以也就不会执行里面的

this.state = {

show:this.props.show

}

不过我们可以借助这个函数shouldComponentUpdate(nextProps,nextState)

在父组件中添加以下代码

2.添加动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./data.js"></script>
<style>
    .penel{
        border: 1px solid #000;
        width: 80%;
    }
    .title{
        margin:0;
        padding: 10px;
        background: #ccc;
    }
    p.vip{
        color:red;
    }
    p.message{
        color:#aaa;
    }
    .listWrap{
        height:0px;
        overflow: hidden;
        transition: 0.5s;
    }
</style>

</head>
<body>

<div id="app"></div>
<script type="text/babel">
    class List extends React.Component{
        render(){
            return (<ul>
                {this.props.list.map(function(val,index){
                    return (
                        <li key={index}>
                            <p className="vip">{val.username}</p>
                            <p className="message">{val.message}</p>
                        </li>
                    )
                })}
            </ul>)

        }
    }

    class Item extends React.Component{
        constructor(){
            super(...arguments);
            this.state = {
                show:this.props.show
            }
        }
        showList(show){
            var list = this.refs.list;
            // if(this.state.show)  @
            if(show){
                list.style.height = list.scrollHeight + 'px';
            }else{
                list.style.height = 0;
            }
        }
        componentDidMount(){ //挂载  在组件被挂载完成的时候调用一次，可以在这里使用 refs
            console.log('组件已经被渲染到DOM里面了');
            this.showList(this.state.show);

        }
        shouldComponentUpdate(nextProps,nextState){ //更新 是否需要重新渲染
/*             如果不加$处的代码，点击自身让其收缩的话就实现不了，这是因为
            nextState必须等到完成更新（更新阶段componentDidUpdate）之后才会变,*/
            debugger;
            console.log(nextProps,nextState);
            if(this.state.show != nextProps.show ){//父级传过来的props:  nextProps.show 
                this.setState({
                    show: nextProps.show
                })
            } 

            // $注意这个时候state还没有改变过来?????所以如果使用@处的话没有意义
            if(this.state.show != nextState.show){
                this.showList(nextState.show)
            }

            return false; //不让更新
        }
        changeList(){
            let show = !this.state.show;
            this.setState({
                show
            });
            if(show){
                console.log("操作其他列表隐藏")
                console.log(this.props.onChange);
                this.props.onChange(this.props.index);
            }
            /**
             * 1.隐藏当前，不需要改变其他
             * 2.展开当前，隐藏其他项的状态
             */
        }
        render(){
            console.log(this.state.show); //打印之后有问题
            return(<div>
                    <h2 className="title" onClick={this.changeList.bind(this)}>{this.props.data.name}</h2>
                    <div className="listWrap" ref="list">
                        <List list={this.props.data.list} />
                    </div>
                </div>)
        }
    }

    class Penel extends React.Component {
        constructor(){
            super(...arguments);
            this.state = {
                showList:[true,false,false]
            }
            this.changeList = this.changeList.bind(this);
        }
        changeList(i){
            // 需要让当前的第几个显示
            console.log(i);
            let showList = this.state.showList.map(function(val,index){
                if(i == index){
                    return true;
                }
                return false;
            })
            this.setState({
                showList
            });
            console.log(this.state.showList); //打印没问题
        }
        setShow(){
            var list = Object.keys(dataList).map((val,index) => {
                return (<Item 
                            data={dataList[val]} 
                            key={index} 
                            show={this.state.showList[index]}
                            onChange={this.changeList}
                            index={index}
                            />
                        )
            });
            return list
        }
        render(){
            return (
                <div className="penel">
                    {this.setShow()}
                </div>
            );
        }
    }
    ReactDOM.render(
        <Penel />,
        document.getElementById('app')
    );
</script>

</body>
</html>

jiaojsun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react进阶—04利用生命周期完善整个动画

1.上节回顾生命周期一个组件从创建到销毁的过程，称为：生命周期 React 在组件的生命周期内的不用阶段会调用一些函数，我们把这些函数称为：生命周期函数组件的三个阶段： Mounting：挂在阶段 Updating：更新阶段 Unmounting：卸载阶段 *Mounting 和 Unmounting 阶段在组件的整个生命周期中只会出现一...
复制链接

扫一扫

专栏目录