一、函数式组件
用函数定义的组件(适用于【简单组件】的定义)
<div id = "test"></div>
<script type="text/babel">
//1、创建函数式组件
function Demo(){
console.log(this) //此处的this是undefined,因为babel编译后开启了严格模式
return <h2>我是函数式定义的组件【简单组件】</h2>
}
//2、渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
执行了 ReactDOM.render(<MyComponent/>。。。。。之后,发生了什么?
1、React解析组件标签,找到了MyComponent组件
2、 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真是DOM,随后呈现在页面中
二、类式组件
1、类的基本知识
总结:
1、类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性时才写。
2、如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的。
2、类中所定义的方法,都是放在了类的原型对象上,供实例去使用。
二、类定义的组件
<div id = "test"></div>
<script type="text/babel">
//1、创建类式组件
class MyComponent extends React.Component {
render(){
//render是放哪里的?- MyComponent的原型对象上,提供实例使用
//render中的this是谁?- MyComponent的实例对象 / Mycomponent组件实例对象
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2、渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
执行了 ReactDOM.render(<MyComponent/>。。。。。之后,发生了什么?
1、React解析组件标签,找到了MyComponent组件
2、 发现组件是使用类定义的,随后new 出来该类的实例,并通过该实例调用到原型上的render方法
3、将render返回的虚拟DOM转为真是DOM,随后呈现在页面中
三、【简单组件】和【复杂组件】
有状态的就是复杂组件 --> state