props的理解和使用

理解：
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中

作用：
1.通过标签属性从组件向外组件内传递变化的数据
2.注意：组件内部不要修改props数据(props是只读的)

操作：
1.内部读取某个属性值

this.props.name

2.对props中的属性值进行类型限制和必要性限制
使用prop-types库进行限制（需要引入prop-types库）

Person.propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串
	age:PropTypes.number//限制age为数值
}

3.扩展属性：将对象的所有属性通过props传递

<div id='test'></div>
<div id='test1'></div>
<script type="text/babel">
	//1.创建组件
	class Person extends React.Component{
		render(){
		  console.log(this)
		  //读取状态
		  const {name,age,sex} = this.props
		  return 
			  <ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			  </ul>
		}
	}
	//2.渲染组件到页面
	//普通传值
	ReactDOM.render(<Person name="掌声" age="20" sex="男"/>,document.getElementById('test'))
	//多个参数传值
	const p = {name="lisi" age=18 sex="女"}
	console.log(...p)//报错，展开运算符不能展开对象
	ReactDOM.render(<Person {...p}/>,document.getElementById('test1'))//展开运算符展开对象，只适用于标签属性的传递
</script>

4.默认属性值

Person.defaultProps = {
	name:'tom',
	age:20
}

5.函数式组件使用props（只有props能使用），不需要写render

<div id='test'></div>
function Person(props){
	const {name,age,sex} = props
	return (
		<ul>
			<li>姓名：{name}</li>
			<li>性别：{sex}</li>
			<li>年龄：{age}</li>
		</ul>
	)
}
//对标签属性进行类型，必要性的限制
Person.propTypes = {
	name:PropTypes.string.isRequired,//限制name必传，且为字符串
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {
	name:'tom',
	age:20
}
//渲染组件到页面
ReactDOM.render(<Person name="lili"/>,document.getElementById('test'))

props基本使用:

<div id='test'></div>
<script type="text/babel">
	//1.创建组件
	class Person extends React.Component{
		render(){
		  console.log(this)
		  //读取状态
		  const {name,age,sex} = this.props
		  return 
			  <ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			  </ul>
		}
	}
	//对标签属性进行类型，必要性的限制
	Person.propTypes = {
		name:PropTypes.string.isRequired,//限制name必传，且为字符串
		sex:PropTypes.string,//限制sex为字符串
		age:PropTypes.number，//限制age为数值
		speak:PropTypes.func//限制speak为函数
	}
	//指定默认标签属性值
	Person.defaultProps = {
		name:'tom',
		age:20
	}
	function speak(){
		console.log("讲话了.....")
	}
	//2.渲染组件到页面
	ReactDOM.render(<Person name="掌声" speak={speak}/>,document.getElementById('test'))

props简写(将限制和默认值移到类中)：关键字：static

<div id='test'></div>
<script type="text/babel">
	//1.创建组件
	class Person extends React.Component{
		//构造器与props的关系:构造器是否接受 props,是否传递给 super
		//取决于：是否希望在构造函数中通过 this 访问 props
		constructor(props){//构造器可省略不写
			console.log(props)
		//在React.Component子类实现构造函数时，在其他语句之前调用，否则this.props在构造函数中可能会出现未定义的bug
			super(props)//只要有构造器，必写super	
			console.log('constructor'，this.props)//this.props为undefined
		}
		//对标签属性进行类型，必要性的限制
		static propTypes = {
			name:PropTypes.string.isRequired,//限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number，//限制age为数值
		}
		//指定默认标签属性值
		static defaultProps = {
			name:'tom',
			age:20
		}
		render(){
		  console.log(this)
		  //读取状态
		  const {name,age,sex} = this.props
		  return 
			  <ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			  </ul>
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<Person name="掌声"/>,document.getElementById('test'))