一、React中定义组件

1.函数式组件(适用于[简单组件])

组件首字母必须大写
函数必须有返回值
render的第一个参数是组件标签，不能直接写组件名字

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

执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

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

2.类式组件(适用于[复杂组件])

必须基础React.Component父类
必须有render
render必须有返回值

//1.创建类式组件
class MyComponent extends React.Component {
	render(){
		//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
		//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
		console.log('render中的this:',this);
		return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
	}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

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

注意：

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

二、组件实例三大属性：state

复杂组件有状态，简单组件无状态

1.理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
状态数据，不能直接修改或更新，必须通过setState进行更新

3.例子

（1）state的使用

构造器中先初始化state（对象形式）

constructor(props){
	super(props)
	//初始化状态
	this.state = {isHot:false,wind:'微风'}
}

在render中通过三目表达式，判断是否显示炎热

render(){
	//读取状态
	const {isHot,wind} = this.state
	return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}

（2）事件绑定的写法

首先定义点击事件

render(){
	const {isHot,wind} = this.state
	return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}

在类中定义事件处理函数，如果事件发生，则通过setState修改状态

changeWeather(){
	//获取原来的isHot值
	const isHot = this.state.isHot
	//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
	this.setState({isHot:!isHot})
	//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
	//this.state.isHot = !isHot //这是错误的写法
}

但是，由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用。而类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined。

解决changeWeather中this指向问题，强制绑定this：

constructor(props){
	//解决changeWeather中this指向问题
	this.changeWeather = this.changeWeather.bind(this)
}

4.简写方式

去掉构造器
自定义方法————要用赋值语句的形式+箭头函数

class Weather extends React.Component{
	//初始化状态
	state = {isHot:false,wind:'微风'}

	render(){
		const {isHot,wind} = this.state
		return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
	}

	//自定义方法————要用赋值语句的形式+箭头函数
	changeWeather = ()=>{
		const isHot = this.state.isHot
		this.setState({isHot:!isHot})
	}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))