React学习--组件实例的三大核心属性之props

一.展开运算符（即…运算符）

1. 展开和连接数组

let arr1 = [1,3,5,7,9]
let arr2 = [2,4,6,8,10]
console.log(...arr1) // 1,3,5,7,9
console.log(arr1) // [1,3,5,7,9]
let arr3 = [...arr1,...arr2] // 连接数组
console.log(arr3) // [1,3,5,7,9,2,4,6,8,10]

2. 在函数中使用

function sum(...numbers){
	return numbers.reduce((preValue,currentValue) => {
		return preValue + currentValue
	})
}
console.log(sum(1,2,3,4))

3. 构造字面量对象时使用展开语法

let person = {name:'tom',age:18}
let person2 = {...person} // 对person对象浅拷贝
person.name = 'jerry'
console.log(person) // name:'jerry',age:18
console.log(person2) // name:'tom',age:18

注意：console.log(…person)会报错，因为展开运算符不能展开对象

4. 合并

let person3 = {...person,name:'jack'}
console.log(person3) // name:'jack',age:18

二.props传值的简写方式

<div id="test"></div>
<script type="text/babel">
class Person extends React.Component{
	//对标签属性进行类型、必要性限制，给类添加属性
	static propTypes = {
		name:PropTypes.string,isRequired, //限制name必传，且为字符串
		sex:PropTypes,string, //限制sex为字符串
		age:PropTypes.number, //限制age为数值
		speak:PropTypes.func, //限制speak为函数
	}
	static defaultProps = {
		sex:'男', //sex默认值为男
		age:18, //age默认值为18
	}
	render(){
		const {name,sex,age} = this.props
		return(
			<ul>
				<li>{name}</li>
				<li>{sex}</li>
				<li>{age+1}</li>
			</ul>
		)
	}
}
ReactDom.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test'))
ReactDom.render(<Person name="tom" speak={speak}/>,document.getElementById('test'))
const p = {name:'老刘',age:18,sex:'男'}
ReactDom.render(<Person {...p}/>,document.getElementById('test'))
function speak(){
	console.log('我说话了')
}
</script>

三.类式组件中的构造器与props

官网中的描述为：

class Person extends React.Component{
	constructor(props){
		super(props)
		console.log(this.props)
	}
}

会发现，是否有构造函数其实没有影响
那么构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

四.函数式组件使用props

<div id="test"></div>
<script type="text/babel">
function Person(props){
	const {name,sex,age} = props
	return (
		<ul>
			<li>{name}</li>
			<li>{sex}</li>
			<li>{age+1}</li>
		</ul>
	)
}
//对标签属性进行类型、必要性限制，给类添加属性
	Person.propTypes = {
		name:PropTypes.string,isRequired, //限制name必传，且为字符串
		sex:PropTypes,string, //限制sex为字符串
		age:PropTypes.number, //限制age为数值
		speak:PropTypes.func, //限制speak为函数
	}
	Person.defaultProps = {
		sex:'男', //sex默认值为男
		age:18, //age默认值为18
	}
ReactDom.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test'))
</script>

函数式组件可以使用props，也只能使用props属性

五.props总结

• 组件标签的所有属性都保存在props中
• 通过标签属性从组件外向组件内传递变化的数据
• 组件内部不要修改props数据，因为props是只读的