props的理解和使用

理解：
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中

作用：
1.通过标签属性从组件向外组件内传递变化的数据
2.注意：组件内部不要修改props数据(props是只读的)

操作：
1.内部读取某个属性值

this.props.name

2.对props中的属性值进行类型限制和必要性限制
使用prop-types库进行限制（需要引入prop-types库）

Person.propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串age:PropTypes.number//限制age为数值
}

3.扩展属性：将对象的所有属性通过props传递

<div id='test'></div>
<div id='test1'></div>
<script type="text/babel">//1.创建组件class Person extends React.Component{render(){console.log(this)//读取状态const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>}}//2.渲染组件到页面//普通传值ReactDOM.render(<Person name="掌声" age="20" sex="男"/>,document.getElementById('test'))//多个参数传值const p = {name="lisi" age=18 sex="女"}console.log(...p)//报错，展开运算符不能展开对象ReactDOM.render(<Person {...p}/>,document.getElementById('test1'))//展开运算符展开对象，只适用于标签属性的传递
</script>

4.默认属性值

Person.defaultProps = {name:'tom',age:20
}

5.函数式组件使用props（只有props能使用），不需要写render

<div id='test'></div>
function Person(props){const {name,age,sex} = propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>)
}
//对标签属性进行类型，必要性的限制
Person.propTypes = {name:PropTypes.string.isRequired,//限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {name:'tom',age:20
}
//渲染组件到页面
ReactDOM.render(<Person name="lili"/>,document.getElementById('test'))

props基本使用:

<div id='test'></div>
<script type="text/babel">//1.创建组件class Person extends React.Component{render(){console.log(this)//读取状态const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>}}//对标签属性进行类型，必要性的限制Person.propTypes = {name:PropTypes.string.isRequired,//限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number，//限制age为数值speak:PropTypes.func//限制speak为函数}//指定默认标签属性值Person.defaultProps = {name:'tom',age:20}function speak(){console.log("讲话了.....")}//2.渲染组件到页面ReactDOM.render(<Person name="掌声" speak={speak}/>,document.getElementById('test'))

props简写(将限制和默认值移到类中)：关键字：static

<div id='test'></div>
<script type="text/babel">//1.创建组件class Person extends React.Component{//构造器与props的关系:构造器是否接受 props,是否传递给 super//取决于：是否希望在构造函数中通过 this 访问 propsconstructor(props){//构造器可省略不写console.log(props)//在React.Component子类实现构造函数时，在其他语句之前调用，否则this.props在构造函数中可能会出现未定义的bugsuper(props)//只要有构造器，必写super	console.log('constructor'，this.props)//this.props为undefined}//对标签属性进行类型，必要性的限制static propTypes = {name:PropTypes.string.isRequired,//限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number，//限制age为数值}//指定默认标签属性值static defaultProps = {name:'tom',age:20}render(){console.log(this)//读取状态const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>}}//2.渲染组件到页面ReactDOM.render(<Person name="掌声"/>,document.getElementById('test'))