React的组件

薛一半2026-02-20 12:47

React开发者工具调试

在浏览器中下载扩展程序 React Developer Tools，在扩展程序商店或网络上均有下载地址及安装教程

函数式组件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react></title>
</head>
<body>

    <div id="test"></div>
    
    <script type="text/javascript" scr="./react.develoment.js"></script>
    <script type="text/javascript" scr="./react-dom.development.js"></script>
    <script type="text/javascript" scr="./babel.min.js"></script>
    <script type="text/babel">

    //创建函数式函数
    function Demo(){
        //由于改代码需要babel翻译，开启了ES5的严格模式，this为undefined
        return <h2>函数式组件</h2>
    }
    
    //渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))

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

根据JSX的语法规则，标签<Demo /.>需要闭合，而且首字母必须大写，不然会作为html标签从而抛错。

类式组件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react></title>
</head>
<body>

    <div id="test"></div>
    
    <script type="text/javascript" scr="./react.develoment.js"></script>
    <script type="text/javascript" scr="./react-dom.development.js"></script>
    <script type="text/javascript" scr="./babel.min.js"></script>
    <script type="text/babel">

    //创建类式组件
    class Demo extends React.Component {
        render(){
            //render是放到Demo的原型对象上，供实例使用
            //render的this是Demo的实例对象
            return <h2>类式组件</h2>
        }
    }

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

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