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

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

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。