react学习历程7——初识组件

作为测试人员，其实组件这个名词相信都已经听得耳朵起茧了，vue没学，就react而言，其实组件可以理解为html+css+js的集合，调用这一个组件，就啥事都不需要操心了。区别于模块化，模块化只是单一语言中的复用代码

组件分为函数式组件和类式组件，需要注意的有以下三点：

1. 组件名必须首字母大写：react识别到首字母小写的组件时，会认为是html自带的标签，只有识别到首字母大写的组件，才会认为是自定义组件
2. 虚拟DOM元素只能有一个根标签
3. 虚拟DOM元素必须有结束标签

---

函数式组件

function MyComponent(){
    return <h2>我是函数式组件（简单组件）</h2>
}
ReactDOM.render(<MyComponent/>,document.getElementById('demo'));

• 函数式组件中没有this，使用了就是undefined，千万千万别想着使用this指向该组件

类式组件

class MyComponent extends React.Component{
    render(){
        return <h2>我是类式组件（复杂组件）</h2>
    }
}
ReactDOM.render(<MyComponent/>,document.getElementById('demo'));

类式组件需要注意的点比较多一些，毕竟是复杂组件

• 如果无需使用构造器，可以省略构造器
• 类式组件可以使用this，指向该组件的实例对象
• <组件名/>这个其实就是在做实例化（new）的动作，并调用该实例对象的render()方法

切记切记，类式组件，使用的还是实例，只不过没有在代码里写new罢了