react 函数式组件与类式组件

 <div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!-- 引入 babel, 用于将 jsx 转为 js -->
        <!-- Don't use this in production: -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

        <!-- 此处一定要写 babel -->
        <script type="text/babel">
            /* 函数式组件 */
            function MyComponenet() {
                console.log(this) // 此处的 this 是 undefined，因为 babel 编译后开启了严格模式
                return <h2>我是用函数定义的组件，适用于简单组件的定义</h2>
            }
            ReactDOM.render(<MyComponenet/>, document.getElementById('test'))
            /*
            ReactDOM.render 做了哪些事情
            1.React 解析组件标签，找到了 MyComponenet 组件；
            2.发现组件是使用函数定义的，随后调用该函数，返回的虚拟DOM 转为真实DOM，随后呈现在页面中。
            */
        </script>

<div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!-- 引入 babel, 用于将 jsx 转为 js -->
        <!-- Don't use this in production: -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

        <!-- 此处一定要写 babel -->
        <script type="text/babel">
            /* 创建类式组件 */
            class MyComponenet extends React.Component {

                render() {
                    /* 
                    render 是放在 MyComponenet 的原型对象上的，供实例使用。
                    render 中的 this 是 MyComponenet 的实例对象
                    */
                    console.log('render this:', this)
                    return <h2>我是用类定义的组件，适用于复杂组件的定义</h2>
                }

            }
            ReactDOM.render(<MyComponenet/>, document.getElementById('test'))
            /*
            ReactDOM.render 做了哪些事情
            1.React 解析组件标签，找到了 MyComponenet 组件；
            2.发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法；
            3.将 render 返回的虚拟DOM 转为真实DOM，随后呈现在页面中。
            */
        </script>