04_react中定义组件

又菜又爱玩代码

已于 2022-08-04 16:14:28 修改

阅读量62

点赞数

分类专栏： react学习文章标签： react.js javascript 前端

于 2022-08-04 16:12:23 首次发布

本文链接：https://blog.csdn.net/qq_46431018/article/details/126161589

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="test"></div>
    
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入组件用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //创建函数式组件
        function MyComponent(){
            console.log(this)//此处this是undefined，因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
        }
        //渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById("test"))
        /*
            执行了ReactDOM.render(<Mycomponent/>...)之后,发生了什么?
                1.React解析组件标签，找到MyComponent组件
                2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
        */
    </script>

</body>
</html>

2.类式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="test"></div>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入用来支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入将jsx转变为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 1.创建类式组件
        class MyComponent extends React.Component{
           render(){
            console.log("render中的this：",this)
            return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
           }
        }
        // 2.渲染类式组件到页面

        ReactDOM.render(<MyComponent/>,document.getElementById("test"))
        /*
            执行了ReactDOM.render(<Mycomponent/>...)之后,发生了什么?
                1.React解析组件标签，找到MyComponent组件
                2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
                3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
        */
    </script>

</body>
</html>