React系列-组件三大属性（props）

props的基本使用

class Person extends React.component{
	render(){
        const {name,age,sex}=this.props;
        return (
        	<div>
             	<ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
            	</ul>
            </div>
        )
    }
}
ReactDom.render(<Person name="jerry" age="23" sex="男">,document.getElementById('test1'));

批量传递props

const p={name:'老刘',age:18,sex:'女'}
//{...p}是对象的展开形式，是一种语法糖
ReactDOM.render(<Person {...p}>,document.getElementById('test1'));

展开运算符

//功能1：展开数组
let arr1=[1,3,5,7,9]
console.log(...arr1)   //1 3 5 7 9

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

//功能3：不定参数调用函数
function sum(...numbers){
    console.log('@',numbers)
   	return numbers.reduce((pre,cur)=>{
        return pre+cur;
    })
}
sum(1,2,3,4)

不能展开一个对象

let person ={name:'tom',age:18}
console.log(...Person)  //报错，展开运算符不能展开一个对象

可以应用于克隆对象

let person2=person;
person.name='jerry';
console.log(person2.name);  //输出结果：jerry,这里不是复制对象

let person2={...person};
person.name='jerry';
console.log(person2.name);  //输出结果：tom；peron修改，person2不变

let person3={...person,name:'jack'};  //复制对象的同时，修改它的属性
console.log(person3);  //输出结果：{name:'jack',age:18}

react+babel,可以允许"…"展开一个对象，但仅仅适用于标签属性传递

对props进行限制

1. 传递一个number类型
   <Person age={19} />
2. 在类的自身属性上添加限制条件

Person.propTypes={
	name:React.PropTypes.string   
    //React.PropTypes.string这种写法在react16.xxx被弃用
    //之后的版本写法都是直接PropTypes.string
}

3. 引入prop-type.js

//对标签属性进行类型、必要性的限制
Person.propTypes={
	name:PropTypes.string.isRequired,
	sex:PropTypes.string
}
//指定默认标签属性值
Person.defaultProps={
    sex:'不男不女',
    age:18   
}
//限制传递值为一个函数
Person.propTypes={
    speak:PropTypes.func
}
//tips:undefined+1=NaN

props的简写方式

props是只读的

class Person extends React.component{
    static demo=100;  //给类自身添加了demo属性，相当于Person.demo=100
	static propTypes={
        name:PropTypes.string.isRequired
    }
}

类式组件中的构造器与props

class Person extends React.component{
	constructor(props){
		super(props) //构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props
	}
}

函数式组件使用props

函数式组件没有state和ref

function Person(props){
	const {name,age,sex} =props
    return (
    	<ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
        </ul>
    )
}
//给组件自身添加props限制条件，只能通过以下这种方式
Person.propTypes={
    name:PropTypes.string.isRequired
}
Person.defaultProps={
    sex:'男',
    age:18
}
ReactDOM.render(<Person name="jerry" age="23" sex="男">,document.getElementById('test1'));