React props和state屬性的具體使用方法
在上一節(jié)中，我們講到了React組件，說了如何使用ES6類創(chuàng)建一個React組件并在其他的地方使用它。這一節(jié)我們將講到React組件的兩大靈魂——props和state。
props
不知道大家還記不記得xml標(biāo)簽中的屬性，就像這樣：
<class id="1"> <student id="1">John Kindem</student> <student id="2">Alick Ice</student> </class>
這樣一個xml文件表達的意思是1班有兩個學(xué)生，學(xué)號為1的學(xué)生名字為John Kindem，學(xué)號為2的學(xué)生名字為Alick Ice，其中id就是屬性，你可以把它看做一個常量，它是只讀的。
html繼承自xml，而JSX從莫種意義上又是html和js的擴展，屬性的概念自然得到了傳承。
在React中，我們使用props這一概念向React組件傳遞只讀的值，就像這樣：
// 假設(shè)我們已經(jīng)自定義了一個叫Hello的組件
ReactDom.render(
<Hello firstName={'John'} lastName={'Kindem'}/>,
document.getElementById('root')
);
在調(diào)用React組件的時候，我們可以像上面一樣向組件傳遞一些常量，以便組件在內(nèi)部調(diào)用。而調(diào)用的方法，就像下面這樣：
class Hello extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
</div>
);
}
}
ReactDom.render(
<Hello firstName={'John'} lastName={'Kindem'}/>,
document.getElementById('root')
);
在組件內(nèi)部獲取傳遞過來的props，只需要使用this.props對象即可，但是在使用之前，記得復(fù)寫組件的構(gòu)造函數(shù)，并且接受props的值以調(diào)用父類構(gòu)造。
當(dāng)然，props也能夠設(shè)置默認(rèn)值，向下面這樣：
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>
);
}
}
ReactDom.render(
<Hello/>,
document.getElementById('root')
);
只需在ES6類中聲明一個static的props默認(rèn)值即可，運行效果和上面一樣。
props沒有多復(fù)雜，稍微練習(xí)即可習(xí)得。
state、組件生命周期
你可能回想，如果我想在React組件中添加動態(tài)效果怎么辦？目前學(xué)過的知識好像無法解決這一問題。
這一問題需要使用React組件的state來解決，state即狀態(tài)的意思，在React中，所有會變化的控制變量都應(yīng)該放入state，每當(dāng)state中的內(nèi)容變化時，頁面的相應(yīng)組件將會被重新渲染，另外，state完全是組件內(nèi)部的東西，外部無法向內(nèi)部傳遞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;
// 設(shè)置新狀態(tài)
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')
);
這樣就完成了一個計數(shù)器，數(shù)值一秒鐘變化一次，來講解一下代碼：首先，state的初始化是在構(gòu)造函數(shù)中，像這樣：
constructor(props) {
super(props);
// 在這初始化state
this.state = {
...
}
}
而改變state是使用React組件基類中的一個自帶函數(shù)：
this.setState({
...
});
使用這個函數(shù)之前一定要注意this的作用域，箭頭函數(shù)中的this指向外部this，而普通函數(shù)中的this指向函數(shù)本身。
另外，這里使用到了兩個React組件的生命周期回調(diào)：
componentDidMount() {
// React組件被加載到dom中的時候被調(diào)用
...
}
componentWillUnmount() {
// React組件從dom中卸載的時候被調(diào)用
...
}
所以這樣一下上面的計時器代碼應(yīng)該就不是什么難事了，在React組件被加載到dom中的時候設(shè)置一個計時器，每秒鐘更新一次state，state更新的同時頁面中的組件將會被重新渲染，而當(dāng)組件被卸載的時候，則需要清除定時器，就那么簡單。
不過React對于state的更新頻率，有一個最大的限度，超過這個限度則會導(dǎo)致頁面渲染的性能下降，大家需要注意不要在高頻函數(shù)中使用setState。
這一節(jié)React輕松入門就到這了，下一節(jié)，我將會為大家介紹React組件的事件處理。如果覺得文章有幫助，請關(guān)注我，我會持續(xù)更新，為大家獻上更好更優(yōu)質(zhì)的文章！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
修復(fù)Next.js中window?is?not?defined方法詳解
這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React使用hook如何實現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要介紹了React使用hook如何實現(xiàn)數(shù)據(jù)雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React?Context是React提供給開發(fā)者的一種常用的狀態(tài)管理機制，本文主要來和大家講講為什么需要Context，又是如何使用Context的，感興趣的可以了解一下2023-05-05
React 提供了 refrefref 屬性，讓我們可以引用組件的實例或者原生 DOM 元素,使用 refrefref，可以在父組件中調(diào)用子組件暴露出來的方法，或者調(diào)用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
使用React+SpringBoot開發(fā)一個協(xié)同編輯的表格文檔實現(xiàn)步驟
隨著云計算和團隊協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡單的開發(fā)一個協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了React Native仿地址挑選器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解
這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
react頁面中存在多個input時巧妙設(shè)置value屬性方式
這篇文章主要介紹了react頁面中存在多個input時巧妙設(shè)置value屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
React如何使用Portal實現(xiàn)跨層級DOM渲染
Portal 就像是一個“傳送門”,能讓你把組件里的元素“傳送到”其他 DOM 節(jié)點下面去渲染,下面小編就來和大家簡單介紹一下具體的使用方法吧2025-04-04
react中通過props實現(xiàn)父子組件間通信的使用示例
在React中,父組件可以通過props屬性向子組件傳遞數(shù)據(jù),子組件可以通過props屬性接收父組件傳遞過來的數(shù)據(jù),本文就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-10-10