react组件简单介绍

调试工具：

React Developer Tools

组件

1. 函数式组件

function Demo(){
	return <h2>我是函数定义的组件（适用于【简单组件】的定义）</h2>
}
ReactDOM.render(<Demo />,document.getElementById('test'))

注意：函数名必须大写，函数必须要有返回值，必须定义组件标签

2. 类式组件

//1 创建类式组件
class MyComponent extends React.Componnet{
	render(){
	//render是放在哪里的？ - MyComponent 的原型对象上，供实例使用
	//render中的this是谁？ - MyComponent 的实例对象 《=》MyComponent 组件实例对象
	return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
	}
}

//2. 渲染组件到页面
ReactDOM.render(<MyComponent />，document.getElementById('test'))
/*
执行了ReactDOM.render(...)之后发生了什么？
1.React解析组件标签，找到MyComponent 组件
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中
*/

注意：类名必须大写，类必须要有render，类必须要有返回值，必须定义组件标签

简单组件和复杂组件的定义：

• 有state是复杂组件
• 无state的是简单组件