React 入门必备【第二关】 React面向组件编程之创建函数组件与类组件

本文链接：https://blog.csdn.net/Queen_sy/article/details/132092943

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,随后呈现在页面中。