react创建组件的两种方式

最新推荐文章于 2021-11-10 17:00:47 发布

dong.wang

最新推荐文章于 2021-11-10 17:00:47 发布

阅读量152

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/wangdong9395/article/details/109053695

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

1. 使用函数创建组件


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
    //  1.使用函数创建组件（函数组件又称为无状态组件，只负责静态页面的展示）
    // 注意点：1. 函数名首字母必须大写，2. 函数组件必须有返回值，表示该组件的结构 3.如果返回值为null,则不渲染任何内容
    function Hello() {
      return (
        <div>这是使用函数创建的组件</div>
      )
    }

    ReactDOM.render(<Hello />, document.getElementById('root'))
        
    </script>
</body>

</html>

2.使用class类创建组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
    //  1.使用class类创建组件（又称为有状态组件，可以让页面进行交互）
    // 注意点：1. 函数名首字母必须大写，2. 类组件应该继承React.Component父类 3. 类组件必须提供render方法 4.函数组件必须有返回值，表示该组件的结构 5.如果返回值为null,则不渲染任何内容
    class Hello extends React.Component {
        render() {
            return (
                <div>这是使用class类创建的组件</div>
            )
        }
    }

    ReactDOM.render(<Hello />, document.getElementById('root'))
        
    </script>
</body>

</html>