• 今天的码农女孩学习了关于react的组件的知识

    组件
              创建自定义标签，用一个标签替代多个标签，可以给标签设置任意样式存储，减少代码写作，提高浏览器加载速度，也可以子父组件传值，改变组件的内容
            //es5创建组件
                function List(){
                        return <li><a href="#">看看文字效果</a></li>
                }
                ReactDOM.render(
                        (<div>
                                <List>asdfghj</List>
                        </div>),
                        document.getElementById("app")
                )
        
        //es6创建组件
                class List extends React.Component{
                        render(){
                            return <li><h1>看看文字效果</h1></li>
                        }
                }
                ReactDOM.render(
                    (<div>
                            <List>asdfghj</List>
                    </div>),
                    document.getElementById("app")
            )

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    9.     <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    10.     <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    11. </head>
    12. <body>
    13.     <div id="app"></div>
    14.     <script type="text/babel">
    15.         //es5创建组件
    16.         function List(){
    17.             return <li><a href="#">看看文字效果</a></li>
    18.         }
    19.         ReactDOM.render(
    20.             (<div>
    21.                 <List>asdfghj</List>
    22.             </div>),
    23.             document.getElementById("app")
    24.         )
    25.  
    26.         //es6创建组件
    27.         class List extends React.Component{
    28.             render(){
    29.                 return <li><h1>看看文字效果</h1></li>
    30.             }
    31.         }
    32.         ReactDOM.render(
    33.             (<div>
    34.                 <List>asdfghj</List>
    35.             </div>),
    36.             document.getElementById("app")
    37.         )
    38.     </script>
    39. </body>
    40. </html>

      

    简答：state 和 props有什么区别？

    state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即

    • props 是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props 以及展现形式不会改变。
    • state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。
  • 相关阅读:
    【交叉熵损失torch.nn.CrossEntropyLoss详解-附代码实现】
    架构与思维：4大主流分布式算法介绍（图文并茂、算法拆解）
    智慧路灯远程智能控制
    Hive--07---函数简介--常用函数1
    Harmonyos Next——图片上传与下载
    基于软件无线电平台的电磁信号数据表征方法
    自定义注解+AOP实现字典值的翻译
    【小月电子】FPGA开发板（XLOGIC_V1）系统学习教程-LESSON9简易测试系统
    java之日期相关
    常用颜色的英文和十六进制
  • 原文地址：https://blog.csdn.net/m0_64444606/article/details/125519794