【React】定义组件的两种方式

React定义组件的两种方式

一、函数式组件

定义一个组件最简单的方法就是写一个JavaScript函数

//1.创建函数式组件
function MyComponent(){
	console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
	return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

**执行顺序：**ReactDOM.render被调用>>>>>>解析组件标签>>>>>找到了MyComponent组件>>>>>发现组件式函数定义的>>>>调用该函数>>>>>将返回的虚拟DOM转换为真实DOM>>>>呈现在页面上

二、类式组件

//1.创建类式组件
class MyComponent extends React.Component {
	render(){
        //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
        //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
        console.log('render中的this:',this);
        return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
    }
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

**执行顺序：**ReactDOM.render被调用—>解析组件标签—>找到了MyComponent组件—>发现组件是类定义的—>new出该对象的实例—>通过该实例调用到原型上的render方法—>将返回的虚拟DOM转换为真实DOM—>呈现在页面上

Tip：

1. 组件名必须首字母大写

2. 虚拟DOM元素只能有一个根元素

3. 虚拟DOM元素必须有结束标签