react个人笔记 -- 创建组件的两种形式

最新推荐文章于 2024-08-26 21:48:51 发布

奇葩之小王子

最新推荐文章于 2024-08-26 21:48:51 发布

阅读量69

点赞数

文章标签： html javascript reactjs

本文链接：https://blog.csdn.net/qq_52138438/article/details/115253239

版权

在React中，有两种创建组件的方式，下面将通过代码给大家说明

1.函数式组件(较少使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_函数式组件</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom.用于支持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" >
    //   此处一定要写babel
    // 1.创建函数式组件
    function MyComponent(){
        console.log(this);//此处的this是undefined,因为babel编译后开启了严格模式
        return <h2>我是用函数定义的组件（适用于 简单组件 的定义）</h2>
    }
    // 2.渲染组件到页面
    
    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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_类式组件</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom.用于支持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" >
    // 1.创建类式组件
        class MyComponent extends React.Component{
            render(){
                // render方法放在了哪里？--类的原型对象上，供实例使用
                // render中的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>

特别要关注类式组件中的this，只有明白了this的指向才能更好的接受值

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react个人笔记 -- 创建组件的两种形式

在React中，有两种创建组件的方式，下面将通过代码给大家说明1.函数式组件(较少使用)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
复制链接

扫一扫