props和state的区别
porps:父组件向子组件传递的参数,用于组件之间的通信,值不可变
state:组件内部的状态,值可变
1.props的用法
class Person extends React.Component {
render() {
const { name, age, sex } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person age={18} sex="男" name="张三" />, document.getElementById('test1'))
// 组件的属性支持解构赋值
const data = { name: '小二', sex: '女', age: 15}
ReactDOM.render(<Person {...data} />, document.getElementById('test2'))
2.使用prop-types限制数据的类型的必要性
- 引入prop-types库
<script type="text/javascript" src="../js/prop-types.js"></script>
-
static propTypes
是固定写法,react会识别到
class Person extends React.Component {
/*
2.写在类里面必须使用static声明,因为propTypes和defaultProps是挂在类自身的,而不是实例对象上.
*/
static propTypes = {
name: PropTypes.string.isRequired, // 必传
age: PropTypes.number, // 不传不会报错,但是传了非数字的值会报错
sex: PropTypes.string
}
render() {
const { name, age, sex } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person sex="男" name="张三" />, document.getElementById('test'))
3.设置props的默认值
- 同样是使用prop-types库
class Person extends React.Component {
// 指定默认标签属性值
static defaultProps = {
sex: '男',
age: 3
}
render() {
const { name, age, sex } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person sex="男" name="张三" />, document.getElementById('test'))
4.函数式组件使用props
function Person(props) {
const {name, age, sex} = props
return (
<ul>
<li><mark>姓名:</mark> {name}</li>
<li>年龄: {age}</li>
<li>性别: {sex}</li>
</ul>
)
}
/*
函数定义的组件的props限制和默认值设置,只能写在函数外面
*/
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, // 必传
age: PropTypes.number, // 不传不会报错,但是传了非数字的值会报错
sex: PropTypes.string
}
// 指定默认标签属性值
Person.defaultProps = {
sex: '男',
age: 3
}
ReactDOM.render(<Person name="张三" />, document.getElementById('test'))