Props和State的使用与理解

1. Props

在 官方文档 中，我们能够很快理解Props这个属性的使用方法：Props可以获取到当前组件中所包含的属性，并且获取到对应的数据。
例1：

function MyExample(props) {
	return <h1>{props.value}</h1>;	// 利用props来获取组件MyExample中的值
}

ReactDOM.render(
	<MyExample value="This is value." />,
	document.getElementById('root')
);

在函数MyExample中可以通过props来获取其中的value属性并且获得对应的值。

2. State

对于重复渲染的组件来说，使用props是很消耗性能的，。
如上例中value值在组件中是需要一直变化的，那么每次都要将新的数据重新渲染到页面，这样是不理想的。
那么此时可以使用state，其功能和props类似，都只受控于当前组件，但state的值更改不用重新调用整个组件。
例2：

class MyExample extends React.Component {
	constructor(props) {
	super(props);
	this.handle = this.handle.bind(this);	// 保持this的指向，handle方法中会用大
    this.state = {value: 'This is value.'};	// 定义state属性，可通过setState()方法改变
	}
	
	handle() {
		this.setState(
			{value: 'new message.'}
		);
	}

	render() {
		return (
			<h1>{this.state.value}</h1>
		);
	}
}

ReactDOM.render(
	<MyExample />,
	document.getElementById('root')
);

注意：this.handle = this.handle.bind(this);这句话不能少，否则handle()中的this.setState()会提示undefined。

这样，我们就不用重复去渲染整个组件，只需要渲染被更改的值即可。

一个问题

但是state只能使用于class当中，这是不够灵活的。要解决这个问题就需要用到 HOOK的知识。后面我会给出其使用及其自己的一些理解。