这次给大家带来React props与state属性使用详解，React props与state属性使用的注意事项有哪些，下面就是实战案例，一起来看一下。
props
不知道大家还记不记得xml标签中的属性，就像这样：
John Kindem Alick Ice
登录后复制
这样一个xml文件表达的意思是1班有两个学生，学号为1的学生名字为John Kindem，学号为2的学生名字为Alick Ice，其中id就是属性，你可以把它看做一个常量，它是只读的。
html继承自xml，而JSX从莫种意义上又是html和js的扩展，属性的概念自然得到了传承。
在React中，我们使用props这一概念向React组件传递只读的值，就像这样：
// 假设我们已经自定义了一个叫Hello的组件ReactDom.render( , document.getElementById('root'));
登录后复制
在调用React组件的时候，我们可以像上面一样向组件传递一些常量，以便组件在内部调用。而调用的方法，就像下面这样：
class Hello extends React.Component { constructor(props) { super(props); } render() { return (
Hello, {this.props.firstName + ' ' + this.props.lastName}
); }}ReactDom.render( , 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 (
Hello, {this.props.firstName + ' ' + this.props.lastName}
); }}ReactDom.render( , 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 (
current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}
); }}ReactDom.render( , 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。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
angular6.0实现组件懒加载功能（附代码）
jQuery编码转化base64通过AJAX上传
以上就是React props与state属性使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2766336.html
