React-3-组件入门

雨橄

已于 2022-12-08 15:33:20 修改

阅读量170

点赞数

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

于 2022-09-12 23:24:04 首次发布

本文链接：https://blog.csdn.net/xiao_yu_gan/article/details/126824718

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、介绍

React组件概念：实现页面局部功能效果的代码和资源的集合(html/css/js/image等等)，React应用程序是由组件组合起来的，组件是React应用程序的基石。

为什么使用组件：

将复杂页面拆分成不同模块组件，分别开发提高效率，同时当某个组件出现问题时，可以方便地进行隔离排查。
组件可以复用，简化项目编码，提高运行效率。

2、入门Demo

React组件分为两类：函数式组件、类式组件。

函数式组件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>函数式组件</title>
    </head>
    <body>
        <div id="container"></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@6/babel.js"></script>

        <script type="text/babel" >
            //1、创建函数式组件(组件名必须大写首字母)
            function FunComponent(){
                //函数返回内容作为虚拟DOM内容
                return (
                    <h1>我是函数式组件内容</h1>
                );
            }

            //2、渲染组件到页面
            ReactDOM.render(<FunComponent/>,document.getElementById('container'))
            /**
             * 函数式组件渲染流程
             *      1.ReactDOM.render函数解析并找到FunComponent组件（找不到组件会报错）
             *      2.发现目标组件是使用函数定义的，随后调用该函数
             *      3.将函数执行返回的虚拟DOM转为真实DOM，随后呈现在页面中
             */ 
        </script>
    </body>
</html>

类式组件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>类式组件</title>
    </head>
    <body>
        <div id="container"></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@6/babel.js"></script>

        <script type="text/babel" >
            /**
             * 1、创建类式组件
             *      组件名必须大写首字母
             *      类式组件必须继承React.Component类
             */ 
            class ClassComponet extends React.Component{
                render(){
                    //render函数返回内容作为虚拟DOM内容（固定语法）
                    return (
                        <h1>我是类式组件内容</h1>
                    );
                }
            }

            //2、渲染组件到页面
            ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
            /**
             * 类式组件渲染流程
             *      1.ReactDOM.render函数解析并找到ClassComponet组件（找不到组件会报错）
             *      2.发现目标组件是使用类定义的，随后new出该类的实例，并通过该实例调用原型上的render函数
             *      3.将函数执行返回的虚拟DOM转为真实DOM，随后呈现在页面中
             */ 
        </script>
    </body>
</html>