目录
1 创建函数组件
组件:代码和资源的集合
- 创建函数式组件
function Demo(){ console.log(this); //这个this是undefined,因为babel编译之后开启了严格模式 return <h2>w shi yi ge zu jian</h2> }
- 渲染组件到页面
ReactDOM.render(<Demo />,document.getElementById("test"));
1.组件的首字母必须是大写,并且有返回值
2.在渲染的时候必须1
执行过程 ReactDOM.render(,document.getElementById("test"));:
1.React解析组件标签,找到相应的组件。
2.发现组件是函数定义的,随后调用函数,将返回的虚拟DOM转化为真实DOM,随后呈现在页面中。
2 创建类式组件
1 复习:类的知识
-
实例对象 构造器 一般方法
构造器中的this:类的实例对象
原型对象上的方法:供实例使用
通过person实例调用speak时,speak中的this就是Person'实例
-
继承:
创建一个Student类,继承Person类
super放在前面 最开始调用
class Student extends Person{
}
子类可以使用父类原型上的方法,也可以重写父类继承过来的方法
以上是错误写法:study是供实例对象使用 改为 this.study()
总结:
类中的构造器不是必须写的,要对实例进行初始化操作,如添加指定属性时,才写
如果A类继承B类,且A类中有构造器,你们A类构造器中的super是必须调用的
类中所定义的方法,都是放在类的原型对象上,供实例对象使用
2 创建类式组件
// 1.创建类式组件 [必须继承React.Component]
class MyComponent extends React.Component{
render(){
//render是放在MyComponent原型对象上的,供实例对象使用
//render的this,MyComponent的实例对象【组件实例对象】
return <h1>这个是类组件</h1>
}
}
//2.渲染组件
ReactDOM.render(<MyComponent />,document.getElementById("test"))
执行过程 ReactDOM.render(,document.getElementById("test"));:
1.React解析组件标签,找到相应的组件。
2.发现组件是类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render将返回的虚拟DOM转化为真实DOM,随后呈现在页面中。