React面向组件编程

React面向组件编程

一、函数式组件

官方推荐由类式组件逐步迁移到函数式组件

function MyComponent() {
	console.log('this') // undefined,在严格模式下没有全局属性
	return <h1>函数式组件</h1>
}

const root = document.getElementById('root');
ReactDOM.render(<MyComponent />, root);

执行情况:

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

二、类式组件

class MyComponent extends React.Component {
	// render是在MyComponent原型对象上,供实例使用
	render() {
			return <h1>类式组件</h1>
	}
}

const root = document.getElementById('root');
ReactDOM.render(<MyComponent />, root);

执行情况:

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

三、类的基本知识回顾

1)类中的构造器不是必须的,要对实例进行一些初始化操作,比如:添加指定属性

2)如果A类继承B类,且A类中写了构造器函数,那么A类构造器函数中的super是必须要调用的

3)类中所定义的方法,都是放在了类的原型对象上,供实例使用