React之Props，及与state的区别
标签：
JavaScript
在之前关于组件的文章当中已经对Props有所涉及！而本篇文章主要是对Props进行更加全面介绍！以及总结props与state的区别！
组件内可以通过props来获得属性值，看下面的实例先来回顾 一下Props最基本的使用：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script></head><body><div id="wrap"></div></body><script type="text/babel">
class MyComponent extends React.Component { //此处的构造器是可以省略的
constructor(props){ super(props);
}
render() { return <div>好神奇！ {this.props.siteName}!</div>;
}
} var element = <MyComponent siteName="zhangpeiyue.com"/>;
ReactDOM.render(
element,
document.querySelector("#wrap")
);</script></html>通过以上实例咱们知道通过props可以得到组件MyComponent的属性siteName的值。
通过defaultProps添加默认Props
咱们可以通过为组件类添加defaultProps属性来为props设置默认值。defaultProps是一个对象，只要将添加的值放到defaultProps的属性中即可，例如：
class MyComponent extends React.Component {
render() { //此处返回 <div>小张今年18岁了</div>
return <div>
{this.props.userName}今年{this.props.age}岁了！ </div>;
}
}//为组件添加默认属性 userName与ageMyComponent.defaultProps={ userName:"小张", age:18}var element = <MyComponent/>;
ReactDOM.render(
element, document.querySelector("#wrap")
);State和Props
咱们可以通过在父组件当中设置State，然后通过在子组件上使用props来接收收父组件的state值。
//父组件class MyComponent extends React.Component {
constructor(){
super(); //设置sate,添加name与age属性
this.state={
name:"张培跃",
age:18
}
}
render() { return <div>
<Name name={this.state.name}/>
<Age age={this.state.age}/>
</div>;
}
}//子组件Nameclass Name extends React.Component{
render(){ return <div>{this.props.name}</div>
}
}//子组件Ageclass Age extends React.Component{
render(){ return <div>{this.props.age}</div>
}
}var element = <MyComponent/>;
ReactDOM.render(
element,
document.querySelector("#wrap")
);使用PropTypes进行类型检测
为了保证咱们的组件被正确使用，React提供了可以对Props进行验证的功能PropTypes。PropTypes为组件类自身的属性，提供了很多验证器，来验证传入的数据是否有效。当传入的数据无效时，JavaScript控制台会抛出警告。
另外需要注意的是，在开发环境下，当你使用了一个无效的值作为prop时，控件台会出现警告;在生产环境下，为了性能考虑会将PropTypes忽略掉！
要想使用propTypes,首先要对prop-type.js文件进行引入。
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://zhangpeiyue.com/wp-content/uploads/2018/08/prop-types.js"></script>
具体使用，可看以下示例：
var name="老大"var age=18;class MyComponent extends React.Component {
render() { return <div>
{this.props.name}今年{this.props.age}岁了！ </div>;
}
}//propTypes是组件类的静态属性MyComponent.propTypes={ //将name设置为string类型
name:PropTypes.string, //将age设置为number类型
age:PropTypes.number
};var element = <MyComponent name={name} age={age} />;
ReactDOM.render(
element,
document.querySelector("#wrap")
);以上示例当中的name与age不合法时，会弹出类型不符的警告！所以在项目开发中使用PropTypes进行对props的验证还是很有好处的！
更多验证器说明如下：
MyComponent.propTypes = { // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!');
}
}
}
}现在我们来总结下,props与state的区别：
props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改！
state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。
props和state是经常要结合使用的，父组件的state可以转化为props来为子组件进行传值。在这种情况下，子组件接收的props是只读的，想要改变值，只能通过父组件的state对其进行更改。
作者：张培跃
链接：https://www.jianshu.com/p/3cb5026edee8
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦