本篇文章给大家带来的内容是关于react中props和state属性的用法详解（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
本篇文章主要介绍了react props和state属性的具体使用方法，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。
props
不知道大家还记不记得xml标签中的属性，就像这样：
<class id="1"> <student id="1">john kindem</student> <student id="2">alick ice</student></class>
这样一个xml文件表达的意思是1班有两个学生，学号为1的学生名字为john kindem，学号为2的学生名字为alick ice，其中id就是属性，你可以把它看做一个常量，它是只读的。
html继承自xml，而jsx从莫种意义上又是html和js的扩展，属性的概念自然得到了传承。
在react中，我们使用props这一概念向react组件传递只读的值，就像这样：
// 假设我们已经自定义了一个叫hello的组件reactdom.render(  <hello firstname={'john'} lastname={'kindem'}/>,  document.getelementbyid('root'));
在调用react组件的时候，我们可以像上面一样向组件传递一些常量，以便组件在内部调用。而调用的方法，就像下面这样：
class hello extends react.component {  constructor(props) {    super(props);  }   render() {    return (      <p>        <h1>hello, {this.props.firstname + ' ' + this.props.lastname}</h1>      </p>    );//欢迎加入前端全栈开发交流圈一起学习交流：864305860  }//面向1-3年前端人员}//帮助突破技术瓶颈，提升思维能力 reactdom.render(  <hello firstname={'john'} lastname={'kindem'}/>,  document.getelementbyid('root'));
在组件内部获取传递过来的props，只需要使用this.props对象即可，但是在使用之前，记得复写组件的构造函数，并且接受props的值以调用父类构造。
当然，props也能够设置默认值，向下面这样：
class hello extends react.component {  constructor(props) {    super(props);  }   static defaultprops = {    firstname: 'john',    lastname: 'kindem'  };   render() {    return (      <div>        <h1>hello, {this.props.firstname + ' ' + this.props.lastname}</h1>      </div>    );//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860  }//面向1-3年前端人员}//帮助突破技术瓶颈，提升思维能力 reactdom.render(  <hello/>,  document.getelementbyid('root'));
只需在es6类中声明一个static的props默认值即可，运行效果和上面一样。
props没有多复杂，稍微练习即可习得。
state、组件生命周期
你可能回想，如果我想在react组件中添加动态效果怎么办？这一问题需要使用react组件的state来解决，state即状态的意思，在react中，所有会变化的控制变量都应该放入state，每当state中的内容变化时，页面的相应组件将会被重新渲染，另外，state完全是组件内部的东西，外部无法向内部传递state，也无法直接改变state的值。
先来举一个例子：
import react from 'react';import reactdom from 'react-dom'; class time extends react.component {  constructor(props) {    super(props);     // 初始化state    this.state = {      hour: 0,      minute: 0,      second: 0    }  }  componentdidmount() {    this.interval = setinterval(() => this.tick(), 1000);  }   componentwillunmount() {    clearinterval(this.interval);  }   tick() {    // 计算新时间    let newsecond, newminute, newhour;    let carryminute = 0, carryhour = 0;    newsecond = this.state.second + 1;    if (newsecond > 59) {      carryminute = 1;      newsecond -= 60;    }    newminute = this.state.minute + carryminute;    if (newminute > 59) {      carryhour = 1;      newminute -= 60;    }    newhour = this.state.hour + carryhour;    if (newhour > 59) newhour -= 60;     // 设置新状态    this.setstate({      hour: newhour,      minute: newminute,      second: newsecond    });  }   render() {    return (      <div>        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>      </div>    );  }}reactdom.render(  <time/>,  document.getelementbyid('root'));
这样就完成了一个计数器，数值一秒钟变化一次，来讲解一下代码：首先，state的初始化是在构造函数中，像这样：
constructor(props) {  super(props);   // 在这初始化state  this.state = {    ...  }}
而改变state是使用react组件基类中的一个自带函数：
this.setstate({  ...});
使用这个函数之前一定要注意this的作用域，箭头函数中的this指向外部this，而普通函数中的this指向函数本身。
另外，这里使用到了两个react组件的生命周期回调：`
componentdidmount() {  // react组件被加载到dom中的时候被调用  ...}componentwillunmount() {  // react组件从dom中卸载的时候被调用  ...}
所以这样一下上面的计时器代码应该就不是什么难事了，在react组件被加载到dom中的时候设置一个计时器，每秒钟更新一次state，state更新的同时页面中的组件将会被重新渲染，而当组件被卸载的时候，则需要清除定时器，就那么简单。
不过react对于state的更新频率，有一个最大的限度，超过这个限度则会导致页面渲染的性能下降，大家需要注意不要在高频函数中使用setstate。
以上就是react中props和state属性的用法详解（代码示例）的详细内容。