React中的函数式组件和类式组件

小例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</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="example1"></div>
    <div id="example2"></div>
    <script type="text/babel">
        function MyComponent1(){
            return <h1>Hello React, function Component!</h1>
        }
        class MyComponent2 extends React.Component{
            render(){
                return <h1>Hello React, class Component!</h1>
            }
        }
        ReactDOM.render(<MyComponent1/>, document.getElementById('example1'))
        ReactDOM.render(<MyComponent2/>, document.getElementById('example2'))
    </script>
</body>
</html>
posted @ 2021-04-25 16:48  pangqianjin  阅读(103)  评论(0)  编辑  收藏  举报