共计 3118 个字符，预计需要花费 8 分钟才能阅读完成。
本篇文章主要介绍了 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 (
<div>
<h1>Hello, {this.props.firstName + ‘ ‘ + this.props.lastName}</h1>
</div>
);// 欢迎加入前端全栈开发交流圈一起学习交流：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
}
}
// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
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;
}// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
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>
);// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
}// 面向 1 - 3 年前端人员
}// 帮助突破技术瓶颈，提升思维能力
ReactDom.render(
<Time/>,
document.getElementById(‘root’)
);
这样就完成了一个计数器，数值一秒钟变化一次，来讲解一下代码：首先，state 的初始化是在构造函数中，像这样：
constructor(props) {
super(props);
// 在这初始化 state
this.state = {
…
}
}// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
而改变 state 是使用 React 组件基类中的一个自带函数：
this.setState({
…
});
使用这个函数之前一定要注意 this 的作用域，箭头函数中的 this 指向外部 this，而普通函数中的 this 指向函数本身。另外，这里使用到了两个 React 组件的生命周期回调：`
componentDidMount() {
// React 组件被加载到 dom 中的时候被调用
…
}
// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
componentWillUnmount() {
// React 组件从 dom 中卸载的时候被调用
…
}
所以这样一下上面的计时器代码应该就不是什么难事了，在 React 组件被加载到 dom 中的时候设置一个计时器，每秒钟更新一次 state，state 更新的同时页面中的组件将会被重新渲染，而当组件被卸载的时候，则需要清除定时器，就那么简单。不过 React 对于 state 的更新频率，有一个最大的限度，超过这个限度则会导致页面渲染的性能下降，大家需要注意不要在高频函数中使用 setState。
结语
感谢您的观看，如有不足之处，欢迎批评指正。
