react中定义组件

最新推荐文章于 2023-03-02 19:36:31 发布

橘子羊

最新推荐文章于 2023-03-02 19:36:31 发布

阅读量296

点赞数

分类专栏： react学习笔记

本文链接：https://blog.csdn.net/weixin_45310428/article/details/121474842

版权

React 函数式组件类式组件虚拟DOM 渲染

关键词由CSDN通过智能技术生成

react学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

函数式组件

<body>
    <div id="test"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建函数式组件
        function MyComponent(){
            console.log(this) //此处的this是undefined，因为babel编译后开启了严格模式
            return <h1>我是函数式组件</h1>
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById("test"))
        /*
            执行了ReactDOM.render(<MyComponent/>..之后发生了什么？
            1.React解析组件标签，找到了MyComponent组件
            2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，随后呈现在页面中。
        */
    </script>
</body>

类式组件

<body>
    <div id="test"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class MyComponent extends React.Component{
            // render是放在哪里的？——MyComponent的原型对象上，供实例使用
            // render中的this是谁？——MyComponent的实例对象（MyComponent组件（的）实例对象）
            render(){
                console.log(this)
                return <h1>我是类式组件</h1>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById("test"))
         /*
            执行了ReactDOM.render(<MyComponent/>..之后发生了什么？
            1.React解析组件标签，找到了MyComponent组件
            2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
            3.将render返回的虚拟DOM转为真实DOM，随后呈现到页面中。
        */
    </script>
</body>

橘子羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react中定义组件

函数式组件<body> <div id="test"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"&gt
复制链接

扫一扫

专栏目录