React学习二 —— 组件入门

函数式组件

一、helloworld

创建一个函数式组件

function demo(){
    return <h2>函数组件</h2>
}

渲染函数式组件到页面

ReactDOM.render(<Demo/>, document.getElementById('test'));

注意，这里需要注意几个问题：

1. 渲染时不能直接把函数名作为第一个参数，因为创建组件就相当于自定义了一个标签，所以需要写成标签。
2. 写成标签时，注意标签首字母要大写，如果小写，react会按照html元素进行匹配，而不是将该标签作为一个组件去渲染，而写成小写，就会被当做html元素，没有匹配到，自然就会报错。
3. 标签需要闭合，如果不想写闭合标签，需要自闭合。
4. 函数式组件中，this不指向window，因为当 react 帮你调用函数去渲染的时候，自动开启了严格模式，而严格模式中，自定义函数中的this禁止指向window对象。

二、React执行过程

1. 首先，React使用render函数执行解析标签，找到了你定义的函数组件
2. 发现组件是函数类型的组件后，调用该函数，使用babel解析返回虚拟DOM，创建真实DOM，渲染到页面。

类的基本知识

这里为什么要说到类的知识呢，因为另一种创建组件的方式就是通过一个类去创建组件，那么我们就有必要复习一下，类的基本知识。

创建一个类

class Person {}

创建一个person类的实例对象

const person1 = new Person();

初始化

首先需要创建类的构造器

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

当实例化的时候就可以初始配置一些属性

const person1 = new Person("Tom", 18)

方法

class Person {
    ...
    speak(){
        console.log("...")
    }
}

speak 方法在原型身上。

继承

class Student extends Person {
    ...
}

1. 理解原型链
2. 子类构造函数中需要调用super
3. super需要在构造函数中第一行调用

总结

1. 类中的构造器不一定必须写
2. 如果A类集成了B类，则一定要调用super
3. 类中定义的方法，都是放在了类的原型对象上面，供实例去调用

类式组件

一、创建类式组件

如果需要将一个类作为一个组件，就需要集成一个类

class MyComponent extends React.Component {
   render(){
       return <h2>This is class component!</h2>
   }
}

渲染组件到页面：

ReactDOM.render(<MyComponent></MyComponent>, document.getElementById('test'));

过程：

1. React解析组件标签，找到MyComponent组件
2. 发现组件是使用类定义的，随后new出来该类的实例对象，通过实例对象调用原型上的render方法。
3. 将render返回的虚拟DOM转化为真实的DOM