react之组件

组件的种类

1. DOM元素组件：全部小写，比如<vvv>这是一个标签</vvv>;
2. 自定义组件：首字母大写，比如<People/>。

如何得到一个自定义组件？

1. 使用函数声明

function People() {
	return (
		<div className="people">
		<h1>我是people</h1>
		<p>你好，people</p>
		</div>
	);
};

2. 使用类声明

class Men extends React.Component {
	render() {
		return (
			<div className="men">
			<h1>我是men</h1>
			<p>你好，men</p>
			</div>
		);
	}
}

• 组件之间可以相互嵌套；
• 将每个组件放入单独的js文件中，用的时候直接导入即可；
• 在自定义属性里面可以写一些属性，接上一些值；
• 在函数组件里面，通过第一个参数来接受props；
• 在类组件中，通过组件实例下面的props；
• 数据总是从顶层流向底层：单向数据流；
• 在页面上渲染null，{null}，不会有任何表现，就是空的；

children

自定义的标签写的内容就是props.children

defaultProps

当自定义标签没有传入该属性或传入的该属性值为undefined时启用。
语法（跳出类和函数体，在外面写）：

People.defaultProps = {
	name: '-------',
	age: 20,
	rP: f=>f
};

prop-types

限制传入的属性的值的种类。
语法（和跳出类和函数体，在外面写）：

//先要导入一个东西
import PT from 'prop-types'
//......
People.propTypes = {
//还可以验证 array bool object symbol node 
//node 就是可以渲染的东西，包括：element、string、number、[node]
	name: PT.string,
	rP: PT.func,
	age: PT.number.isRequired
};

State

只有类组件才有状态！

setState

流程：

1. 更新this.state的值；
2. render方法再次执行，生成新的virtual DOM结构；
3. 比较新旧virtual DOM，对变化的部分，更新浏览器中相应的DOM；

• 在类组件里构造函数中，如果要访问props属性，需要向constructor函数传一个props参数，向super函数也传一个props参数，接下来你既可以使用props也可以使用this.props；

合并更新

一个事件循环里，会将所有的this.setState合并，只调用一次render函数；

异步更新

在render函数没结束前，this.state.XXXX永远表示上一个状态。要等render结束后才会更新状态。

如何在render里访问新的state？

<button onClick = {()=>{
				this.setState({
					name: 'tweety',
					number: ++number
				});
				
				this.setState((newState,props)=>{
//通过这个newState就可以访问新的state了。
					console.log(newState);
					return{
						name:'Flora',
						number:newState.number === 2 ? 2:0
					};
				});
			}}>change number</button>