這篇文章帶給大家的內容是關於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屬性的用法詳解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
