react 中 props 和 state 的区别有哪些? 下面本篇文章给大家介绍一下 react 中 props 和 state 的区别. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
组件内可以通过 props 来获得属性值, 看下面的实例先来回顾 一下 Props 最基本的使用:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
- <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
- <script src="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 与 age
- MyComponent.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>;
- }
- }
- // 子组件 Name
- class Name extends React.Component{
- render(){
- return <div>{this.props.name}</div>
- }
- }
- // 子组件 Age
- class 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 src="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 对其进行更改.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17809.html