02-react基础-面向组件编程

定义组件

方式一：函数式定义

<script type="text/babel">
    //1.创建函数式组件
    function MyComponent(){
            console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>

执行了ReactDOM.render(.......之后，发生了什么？

1. React解析组件标签，找到了MyComponent组件。
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

小结：

1. 函数定义组件，函数名必须大写开头
2. 函数内部必须有返回值，返回虚拟DOM结构
3. render渲染时只能写组件标签，不能只写名字

方式二：类式组件

知识点回顾 --类的基本知识

类创建实例

class Person{
	//构造器方法
	constructor(name,age){
	//构造器中的this是谁？——类的实例对象
	this.name = name
	this.age = age
	//一般方法
	speak(){
		//speak放在了哪里？——类的原型对象上，供实例使用
		//通过Person实例调用speak时，speak中的this就指向Person实例
		console.log('xxx')
		}
	}
}
//创建一个实例对象
const p1 = new Person('tom',18)

继承