首頁 >web前端 >js教程 >react props與state屬性實戰案例詳解

react props與state屬性實戰案例詳解

php中世界最好的语言原創: 2018-06-08 14:14:162529瀏覽

這次帶給大家react props與state屬性實戰案例詳解，react props與state屬性實戰的注意事項有哪些，以下就是實戰案例，一起來看一下。

在上一節中，我們講到了React元件，說如何使用ES6類別建立一個React元件並在其他的地方使用它。這一節我們將講到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={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  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>
    );
  }
}
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  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 (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
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 (
      <p>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </p>
    );
  }
}
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。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！