React props和state屬性的具體使用方法

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:16:53

React props和state屬性的具體使用方法

React props和state屬性的具體使用方法:在上一節(jié)中，我們講到了React組件，說了如何使用ES6類創(chuàng)建一個React組件并在其他的地方使用它。這一節(jié)我們將講到React組件的兩大靈魂——props和state。 props 不知道大家還記不記得xml標簽中的屬性，就像這樣： <class id=1>

推薦度：

點擊下載本文 文檔為doc格式

導讀React props和state屬性的具體使用方法:在上一節(jié)中，我們講到了React組件，說了如何使用ES6類創(chuàng)建一個React組件并在其他的地方使用它。這一節(jié)我們將講到React組件的兩大靈魂——props和state。 props 不知道大家還記不記得xml標簽中的屬性，就像這樣： <class id=1>

在上一節(jié)中，我們講到了React組件，說了如何使用ES6類創(chuàng)建一個React組件并在其他的地方使用它。這一節(jié)我們將講到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組件傳遞只讀的值，就像這樣：

// 假設(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對象即可，但是在使用之前，記得復寫組件的構(gòu)造函數(shù)，并且接受props的值以調(diào)用父類構(gòu)造。

當然，props也能夠設(shè)置默認值，向下面這樣：

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默認值即可，運行效果和上面一樣。

props沒有多復雜，稍微練習即可習得。

state、組件生命周期

你可能回想，如果我想在React組件中添加動態(tài)效果怎么辦？目前學過的知識好像無法解決這一問題。

這一問題需要使用React組件的state來解決，state即狀態(tài)的意思，在React中，所有會變化的控制變量都應該放入state，每當state中的內(nèi)容變化時，頁面的相應組件將會被重新渲染，另外，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)用
 ...
}

所以這樣一下上面的計時器代碼應該就不是什么難事了，在React組件被加載到dom中的時候設(shè)置一個計時器，每秒鐘更新一次state，state更新的同時頁面中的組件將會被重新渲染，而當組件被卸載的時候，則需要清除定時器，就那么簡單。

不過React對于state的更新頻率，有一個最大的限度，超過這個限度則會導致頁面渲染的性能下降，大家需要注意不要在高頻函數(shù)中使用setState。

這一節(jié)React輕松入門就到這了，下一節(jié)，我將會為大家介紹React組件的事件處理。如果覺得文章有幫助，請關(guān)注我，我會持續(xù)更新，為大家獻上更好更優(yōu)質(zhì)的文章！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

React props和state屬性的具體使用方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用的方法 rea

熱門焦點

React props和state屬性的具體使用方法

React props和state屬性的具體使用方法

React props和state屬性的具體使用方法

最新推薦

猜你喜歡

熱門推薦