1. 程式人生 > >深入解析React props和state屬性

深入解析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 (
      <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。 結語

感謝您的觀看,如有不足之處,歡迎批評指正。