1.4 属性应用

1：属性是由外界传递的，外面不能改属性，只有状态是属于组件自己的
2：声明组件的方式：
（1）函数声明方式（名字开头大写），没有生命周期，没有状态，没有this
（2）类声明（componentDidMount渲染完成）（componentWillUnmount组件将要卸载）

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
//属性校验的包
import PropTypes from 'prop-types'
class School extends  Component{
    //ES7静态属性
    static propTypes={
        age:PropTypes.string
    }
    //ES7校验默认静态属性
    static defaultProps={
        age:'100'
    }
    //在构造函数中拿到属性
    constructor(props){  //props不写的话，下面的console.log会undefined
        super(props);   //必须写
        console.log(this.props)  //一个对象：{name: "浩浩", age: 20}
        console.log(Object.keys(this.props))  //一个数组：["name", "age"]
    }
    //这里的render组件长什么样子.render的返回值只能有一个根元素
    render(){
        return (
            //通过{}取值不能打印对象，可以转化成字符串打印
            <div>
                {/*{"name":"浩浩","age":20}*/}
                <p>{ JSON.stringify(this.props)  }</p>
                {/*nameage*/}
                <p>{ Object.keys(this.props)  }</p>
            </div>
        )
    }
}
// School.propTypes={
//     age:PropTypes.string
// }
// 这里的render将虚拟DOM转换成真实DOM
ReactDOM.render(<div><School name={'浩浩'} age={20} /><School name={'浩浩'}  /></div>,document.getElementById('root'))