React中props和state屬性有什么用法

本篇文章給大家分享的是有關(guān)React中props和state屬性有什么用法，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括做網(wǎng)站、網(wǎng)站制作、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營銷等。成都創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，成都創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

本篇文章主要介紹了React props和state屬性的具體使用方法，具有一定的參考價(jià)值，對此有需要的朋友可以參考學(xué)習(xí)下。如有不足之處，歡迎批評(píng)指正。

props

不知道大家還記不記得xml標(biāo)簽中的屬性，就像這樣：

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>

這樣一個(gè)xml文件表達(dá)的意思是1班有兩個(gè)學(xué)生，學(xué)號(hào)為1的學(xué)生名字為John Kindem，學(xué)號(hào)為2的學(xué)生名字為Alick Ice，其中id就是屬性，你可以把它看做一個(gè)常量，它是只讀的。
html繼承自xml，而JSX從莫種意義上又是html和js的擴(kuò)展，屬性的概念自然得到了傳承。
在React中，我們使用props這一概念向React組件傳遞只讀的值，就像這樣：

// 假設(shè)我們已經(jīng)自定義了一個(gè)叫Hello的組件
ReactDom.render(
  <Hello firstName={'John'} lastName={'Kindem'}/>,
  document.getElementById('root')
);

在調(diào)用React組件的時(shí)候，我們可以像上面一樣向組件傳遞一些常量，以便組件在內(nèi)部調(diào)用。而調(diào)用的方法，就像下面這樣：

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
 
  render() {
    return (
      <p>
        <h2>Hello, {this.props.firstName + ' ' + this.props.lastName}</h2>
      </p>
    );//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：864305860
  }//面向1-3年前端人員
}//幫助突破技術(shù)瓶頸，提升思維能力
 
ReactDom.render(
  <Hello firstName={'John'} lastName={'Kindem'}/>,
  document.getElementById('root')
);

在組件內(nèi)部獲取傳遞過來的props，只需要使用this.props對象即可，但是在使用之前，記得復(fù)寫組件的構(gòu)造函數(shù)，并且接受props的值以調(diào)用父類構(gòu)造。
當(dāng)然，props也能夠設(shè)置默認(rèn)值，向下面這樣：

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
 
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
 
  render() {
    return (
      <div>
        <h2>Hello, {this.props.firstName + ' ' + this.props.lastName}</h2>
      </div>
    );//歡迎加入前端全棧開發(fā)交流圈一起吹水聊天學(xué)習(xí)交流：864305860
  }//面向1-3年前端人員
}//幫助突破技術(shù)瓶頸，提升思維能力
 
ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);

只需在ES6類中聲明一個(gè)static的props默認(rèn)值即可，運(yùn)行效果和上面一樣。
props沒有多復(fù)雜，稍微練習(xí)即可習(xí)得。

state、組件生命周期

你可能回想，如果我想在React組件中添加動(dòng)態(tài)效果怎么辦？這一問題需要使用React組件的state來解決，state即狀態(tài)的意思，在React中，所有會(huì)變化的控制變量都應(yīng)該放入state，每當(dāng)state中的內(nèi)容變化時(shí)，頁面的相應(yīng)組件將會(huì)被重新渲染，另外，state完全是組件內(nèi)部的東西，外部無法向內(nèi)部傳遞state，也無法直接改變state的值。
先來舉一個(gè)例子：

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() {
    // 計(jì)算新時(shí)間
    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>
        <h2>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h2>
      </div>
    );
  }
}
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

這樣就完成了一個(gè)計(jì)數(shù)器，數(shù)值一秒鐘變化一次，來講解一下代碼：首先，state的初始化是在構(gòu)造函數(shù)中，像這樣：

constructor(props) {
  super(props);
 
  // 在這初始化state
  this.state = {
    ...
  }
}

而改變state是使用React組件基類中的一個(gè)自帶函數(shù)：

this.setState({
  ...
});

使用這個(gè)函數(shù)之前一定要注意this的作用域，箭頭函數(shù)中的this指向外部this，而普通函數(shù)中的this指向函數(shù)本身。
另外，這里使用到了兩個(gè)React組件的生命周期回調(diào)：`

componentDidMount() {
  // React組件被加載到dom中的時(shí)候被調(diào)用
  ...
}
componentWillUnmount() {
  // React組件從dom中卸載的時(shí)候被調(diào)用
  ...
}

所以這樣一下上面的計(jì)時(shí)器代碼應(yīng)該就不是什么難事了，在React組件被加載到dom中的時(shí)候設(shè)置一個(gè)計(jì)時(shí)器，每秒鐘更新一次state，state更新的同時(shí)頁面中的組件將會(huì)被重新渲染，而當(dāng)組件被卸載的時(shí)候，則需要清除定時(shí)器，就那么簡單。
不過React對于state的更新頻率，有一個(gè)最大的限度，超過這個(gè)限度則會(huì)導(dǎo)致頁面渲染的性能下降，大家需要注意不要在高頻函數(shù)中使用setState。

以上就是React中props和state屬性有什么用法，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：React中props和state屬性有什么用法
URL分享：http://muchs.cn/article2/pjjhic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容