react定义组件的两种方式

最新推荐文章于 2024-11-11 16:50:54 发布

种草小妖儿.

最新推荐文章于 2024-11-11 16:50:54 发布

阅读量80

点赞数

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.csdn.net/S2763427717/article/details/131257405

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章详细介绍了React中的两种组件定义方式：函数式组件和类式组件。函数式组件适用于简单的场景，没有this上下文。类式组件适用于更复杂的组件，提供实例方法和状态管理。在渲染过程中，React会将这两种组件转化为虚拟DOM并最终呈现到页面上。

摘要由CSDN通过智能技术生成

函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件</title>
</head>
<body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 1.创建函数式组件
        function Demo(params) {
            // 此处的this是undefined，因为babel编译后开启了严格模式
            console.log(this);
            return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>  
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))

        /*
        执行了ReactDOM.render(<Demo/>....)之后，发生了什么
            1.React解析组件标签，找到了Demo组件。
            2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM,随后呈现在页面中。
        */
    </script>
</body>
</html>

类式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类式组件</title>
</head>
<body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 1.创建类式组件
        class Demo extends React.Component{
            render(){
                // render是放在哪里的？--Demo的原型对象上，供实例使用。
                // render中的this是谁？--Demo的实例对象。(Demo组件实例对象)
                console.log('render中的this',this);
                return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2> 
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))

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

    </script>
</body>
</html>