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'))