React基础教程(四)：组件理解

news2024/12/23 4:07:08

1、函数式组件

实现代码

<script type="text/babel"> /*此处一定要写babel*/
// 1、创建函数式组件
function MyComponent() {
    console.log(this); // 此处的this是undefined，因为babel编译后开启了严格模式
    return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
}

// 2、渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
/**
 * 执行了ReactDOM.render(<MyComponent/>)....之后，发生了什么？
 *  1、React解析组件标签，找到了MyComponent组件。
 *  2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
 */
</script>

实现效果

在这里插入图片描述

2、类式组件

实现代码

<script type="text/babel"> /*此处一定要写babel*/
    // 1、创建类式组件
    class MyComponent extends React.Component{
        render(){
            // render是放在哪里的？-类的原型对象上，供实例使用
            return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
        }
    }
    // 2、渲染组件到页面
    ReactDOM.render(<MyComponent/>, document.getElementById("test"))
</script>