本文主要介紹了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
}
}
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>
);//歡迎加入全棧開發交流圈一起學習交流:864305860
}//面向1-3年前端人員
} //幫助突破技術瓶頸,提升思維能力
ReactDom.render(
<Time/>,
document.getElementById('root')
);
這樣就完成了一個計數器,數值一秒鐘變化一次,來講解一下代碼:首先,state的初始化是在構造函數中,像這樣:
constructor(props) {
super(props);
// 在這初始化state
this.state = {
...//歡迎加入全棧開發交流圈一起學習交流:864305860
}//面向1-3年前端人員
}//幫助突破技術瓶頸,提升思維能力
而改變state是使用React組件基類中的一個自帶函數:
this.setState({
...
});
使用這個函數之前一定要注意this的作用域,箭頭函數中的this指向外部this,而普通函數中的this指向函數本身。 另外,這裏使用到了兩個React組件的生命週期回調:
componentDidMount() {
// React組件被加載到dom中的時候被調用
...
}
componentWillUnmount() {
// React組件從dom中卸載的時候被調用
...
}
所以這樣一下上面的計時器代碼應該就不是什麼難事了,在React組件被加載到dom中的時候設置一個計時器,每秒鐘更新一次state,state更新的同時頁面中的組件將會被重新渲染,而當組件被卸載的時候,則需要清除定時器,就那麼簡單。 不過React對於state的更新頻率,有一個最大的限度,超過這個限度則會導致頁面渲染的性能下降,大家需要注意不要在高頻函數中使用setState。 結語
感謝您的觀看,如有不足之處,歡迎批評指正。