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

    轮播图：

    1. <style>
    2.         * {
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .box {
    7.             margin: 50px auto;
    8.             position: relative;
    9.         }
    10.         .box,.box img {
    11.             width: 300px;
    12.             height: 400px;
    13.         }
    14.         .box div {
    15.             position: absolute;
    16.             top:0px;
    17.             left:0px;
    18.             display: none;
    19.         }
    20.         .box .text {
    21.             display: block;
    22.         }
    23.     </style>
    24. </head>
    25. <body>
    26.     <div id="app"></div>
    27.     <script type="text/babel">
    28.         class App extends React.Component{
    29.             constructor(props){
    30.                 super(props)
    31.                 this.state={num:0,arr:[
    32.                     "img/about1.png",
    33.                     "img/about2.png",
    34.                     "img/about3.png",
    35.                 ]}
    36.                 this.fun=this.fun.bind(this)
    37.                 
    38.             }
    39.             fun(){
    40.                if(this.state.num>this.state.arr.length-1){
    41.                 this.state.num=0
    42.                }
    43.                else {
    44.                 this.setState({num:this.state.num+1})
    45.                }
    46.             }
    47.             componentWillUnmount(){
    48.                 clearInterval(this.th)
    49.             }
    50.             componentWillMount(){
    51.                 this.th=setInterval(()=>{
    52.                     this.fun()
    53.                 },1000)
    54.             }
    55.             render(){
    56.                 var da=[]
    57.                 for(var i=0;i<this.state.arr.length;i++){
    58.                     var v=<div key={i} className={this.state.num==i?'text':''}><img src={this.state.arr[i]} /></div>
    59.                     da.push(v)
    60.                 }
    61.                 return (
    62.                     <div className="box">
    63.                        {da}
    64.                     </div>
    65.                 )
    66.             }
    67.         }
    68.         ReactDOM.render(
    69.             (<div>
    70.                 <App />
    71.             </div>),
    72.             document.getElementById("app")
    73.         )
    74.     </script>
    75. </body>

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

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

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

    • 类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
    • 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件
  • 相关阅读:
    使用Docker构建、共享和运行WebAssembly应用程序
    手把手教你用AirtestIDE无线连接手机
    基于ssm框架的农产品扶农商农平台的设计与实现
    深度学习：Softmax回归
    ABB眼中AI推动机器人创新的三大方向
    【python】面向对象程序设计（基础篇）
    HBase 计划外启动 Major Compaction 的原因
    HTB-Devel
    本地MQTT服务器搭建（EMQX）
    react使用hook封装一个tab组件
  • 原文地址：https://blog.csdn.net/m0_64444606/article/details/125625209