React——定义组件【六】

思索

发布于 2024-08-16 14:09:49

3060

前言

react定义组件,函数式组件,类组件。

内容

函数式组件

适用于简单组件的定义

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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">/*一定要以text/babel来声明*/
//1. 创建函数式组件
function Demo() {
    console.log(this) //此处的this是undefined因为babel开启了严格模式
    return  <h2>函数定义的组件(适用于简单组件的定义)</h2>
}

//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

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

此处的this是undefined因为babel开启了严格模式

ReactDOM.render(,document.getElementById('test'))

1. react解析组件标签,找到对应组件。
2. 发现组件是使用函数定义,随后调用该函数,将返回的虚拟DOM转为真实DOM随后呈现在页面。

类式组件

适用于复杂组件定义

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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">/*一定要以text/babel来声明*/
class Demo extends React.Component {
    render() {
        console.log(this)
        return (
            <div>
                用类定义的组件(适用于复杂组件定义)
            </div>
        );
    }

}

ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>

此处的this是Demo组件实例对象

ReactDOM.render(,document.getElementById('test'))

1. react解析组件标签,找到对应组件。
2. 发现组件是使用类定义,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面上。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-20，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

React——定义组件【六】

React——定义组件【六】

前言

内容

函数式组件

类式组件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐