這篇文章帶給大家的內容是關於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中文網其他相關文章!