React中的props

1、可以使用组件的props给组件传值，例如：

<Person  name="张三"  age={18} />   

name、age称为Person组件的属性（注意传数值型时应有花括号包裹）

2、如果Person的属性多，或者后台返回的Json数据如何便利地传给Person组件，我们可以用展开运算符 ... 来进行简写

//personData = {name:"张三",age:18};
<Person {...personData} />

关于展开运算符

a.展开运算符展开数组：

let arr1 = [1,2,3];
let arr2 = [4,5];
let arr3 = [...arr1,arr2]; //连接数组 [1,2,3,4,5] 

b.在函数传参中的应用：

//定义一个函数，对所有参数求和
function sum(...numbers){
    // numbers是所有实参的数组形式，如sum(1,2,3) 则numbers=[1,2,3]
    return numbers.reduce((preValue,currentValue)=>{
        return preValue+currentValue;
    })
}

c.其实展开运算符并不能展开对象，但这里为什么可以展开personData对象？

let obj = {name:'张三',age:18};
console.log(...obj)  //报错，无法展开对象
let copy = {...obj}; //正确，构造字面量的对象时使用展开语法，用来复制对象；

 React中<Person {...personData} />的展开运算符是经过特殊处理的这里可以展开对象，但是只能用于标签属性

3、props的限制，属性类型、必填限制以及默认值

class Person extends React.Component{
   render(){
      const {age,name} = this.props;
      return(
          <ul>
             <li>{name}</li>   
             <li>{age}</li> 
          </ul>
      )
   }
}
//React.PropTypes.string这种形式在React16版本弃用，改在props-types.js库中
Person.propTypes = {
    name:PropTypes.string.isRequired,   //注意string小写，isRequired表示必填
}
//默认值设置
Person.defaultProps = {
    name:'李四',
    age:100
}

更常用地，我们不喜欢将类的属性写在类外面，可以利用static关键字简写为

class Person extends React.Component{
   render(){
      const {age,name} = this.props;
      return(
          <ul>
             <li>{name}</li>   
             <li>{age}</li> 
          </ul>
      )
   }
   //在Person实例对象上设置state属性（确信）
   state = {
     sex:"",
   }
   //使用static，则将propTypes 、defaultProps这两个属性加在Person类的对象上而不是实例对象上
   static propTypes = {
     name:PropTypes.string.isRequired,
   }
   static defaultProps = {
     name:'李四',
     age:100
   }
}