今天的码农女孩用react写了轮播图以及组件之间的不同之处

最新推荐文章于 2024-07-17 15:26:15 发布

丁丁丁dingdingding

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量193

点赞数

分类专栏：简答题小练习文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/125625209

版权

小练习同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

简答题

20 篇文章 0 订阅

订阅专栏

轮播图：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 50px auto;
            position: relative;
        }
        .box,.box img {
            width: 300px;
            height: 400px;
        }
        .box div {
            position: absolute;
            top:0px;
            left:0px;
            display: none;
        }
        .box .text {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state={num:0,arr:[
                    "img/about1.png",
                    "img/about2.png",
                    "img/about3.png",
                ]}
                this.fun=this.fun.bind(this)
                
            }
            fun(){
               if(this.state.num>this.state.arr.length-1){
                this.state.num=0
               }
               else {
                this.setState({num:this.state.num+1})
               }
            }
            componentWillUnmount(){
                clearInterval(this.th)
            }
            componentWillMount(){
                this.th=setInterval(()=>{
                    this.fun()
                },1000)
            }
            render(){
                var da=[]
                for(var i=0;i<this.state.arr.length;i++){
                    var v=<div key={i} className={this.state.num==i?'text':''}><img src={this.state.arr[i]} /></div>
                    da.push(v)
                }
                return (
                    <div className="box">
                       {da}
                    </div>
                )
            }
        }
        ReactDOM.render(
            (<div>
                <App />
            </div>),
            document.getElementById("app")
        )
    </script>
</body>

展示组件(Presentational component)和容器组件(Container component)之间有何不同

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

类组件(Class component)和函数式组件(Functional component)之间有何不同

类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

丁丁丁dingdingding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今天的码农女孩用react写了轮播图以及组件之间的不同之处

轮播图：展示组件(Presentational component)和容器组件(Container component)之间有何不同类组件(Class component)和函数式组件(Functional component)之间有何不同
复制链接

扫一扫