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:
-
组件名必须首字母大写
-
虚拟DOM元素只能有一个根元素
-
虚拟DOM元素必须有结束标签