react中state和props有什么區(qū)別

這篇文章主要介紹了react中state和props有什么區(qū)別，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

區(qū)別：props是傳遞給組件的（類似于函數(shù)的形參），而state是在組件內(nèi)部被組件自己管理的（類似于在一個(gè)函數(shù)內(nèi)聲明的變量）。state是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；props是外部傳入的數(shù)據(jù)參數(shù)，不可變。

props

React的核心思想就是組件化思想，頁(yè)面會(huì)被切分成一些獨(dú)立的、可復(fù)用的組件。

組件從概念上看就是一個(gè)函數(shù)，可以接受一個(gè)參數(shù)作為輸入值，這個(gè)參數(shù)就是props，所以可以把props理解為從外部傳入組件內(nèi)部的數(shù)據(jù)。由于React是單向數(shù)據(jù)流，所以props基本上也就是從服父級(jí)組件向子組件傳遞的數(shù)據(jù)。

用法

假設(shè)我們現(xiàn)在需要實(shí)現(xiàn)一個(gè)列表，根據(jù)React組件化思想，我們可以把列表中的行當(dāng)做一個(gè)組件，也就是有這樣兩個(gè)組件：<ItemList/>和<Item/>。

先看看<ItemList/>

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

列表的數(shù)據(jù)我們就暫時(shí)先假設(shè)是放在一個(gè)data變量中，然后通過(guò)map函數(shù)返回一個(gè)每一項(xiàng)都是<Item item='數(shù)據(jù)'/>的數(shù)組，也就是說(shuō)這里其實(shí)包含了data.length個(gè)<Item/>組件，數(shù)據(jù)通過(guò)在組件上自定義一個(gè)參數(shù)傳遞。當(dāng)然，這里想傳遞幾個(gè)自定義參數(shù)都可以。

在<Item />中是這樣的：

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

在render函數(shù)中可以看出，組件內(nèi)部是使用this.props來(lái)獲取傳遞到該組件的所有數(shù)據(jù)，它是一個(gè)對(duì)象，包含了所有你對(duì)這個(gè)組件的配置，現(xiàn)在只包含了一個(gè)item屬性，所以通過(guò)this.props.item來(lái)獲取即可。

只讀性

props經(jīng)常被用作渲染組件和初始化狀態(tài)，當(dāng)一個(gè)組件被實(shí)例化之后，它的props是只讀的，不可改變的。如果props在渲染過(guò)程中可以被改變，會(huì)導(dǎo)致這個(gè)組件顯示的形態(tài)變得不可預(yù)測(cè)。只有通過(guò)父組件重新渲染的方式才可以把新的props傳入組件中。

默認(rèn)參數(shù)

在組件中，我們最好為props中的參數(shù)設(shè)置一個(gè)defaultProps，并且制定它的類型。比如，這樣：

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

關(guān)于propTypes，可以聲明為以下幾種類型：

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

總結(jié)

props是一個(gè)從外部傳進(jìn)組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)，它具有可讀性和不變性，只能通過(guò)外部組件主動(dòng)傳入新的props來(lái)重新渲染子組件，否則子組件的props以及展現(xiàn)形式不會(huì)改變。

state

state是什么呢？

State is similar to props, but it is private and fully controlled by the component.

一個(gè)組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，外部參數(shù)也就是props，而數(shù)據(jù)狀態(tài)就是state

用法

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些數(shù)據(jù)',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

首先，在組件初始化的時(shí)候，通過(guò)this.state給組件設(shè)定一個(gè)初始的state，在第一次render的時(shí)候就會(huì)用這個(gè)數(shù)據(jù)來(lái)渲染組件。

setState

state不同于props的一點(diǎn)是，state是可以被改變的。不過(guò)，不可以直接通過(guò)this.state=的方式來(lái)修改，而需要通過(guò)this.setState()方法來(lái)修改state。

比如，我們經(jīng)常會(huì)通過(guò)異步操作來(lái)獲取數(shù)據(jù)，我們需要在didMount階段來(lái)執(zhí)行異步操作：

componentDidMount(){
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

當(dāng)數(shù)據(jù)獲取完成后，通過(guò)this.setState來(lái)修改數(shù)據(jù)狀態(tài)。

當(dāng)我們調(diào)用this.setState方法時(shí)，React會(huì)更新組件的數(shù)據(jù)狀態(tài)state，并且重新調(diào)用render方法，也就是會(huì)對(duì)組件進(jìn)行重新渲染。

注意：通過(guò)this.state=來(lái)初始化state，使用this.setState來(lái)修改state，constructor是唯一能夠初始化的地方。

setState接受一個(gè)對(duì)象或者函數(shù)作為第一個(gè)參數(shù)，只需要傳入需要更新的部分即可，不需要傳入整個(gè)對(duì)象，比如：

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

在執(zhí)行完setState之后的state應(yīng)該是{name:'axuebin',age:18}。

setState還可以接受第二個(gè)參數(shù)，它是一個(gè)函數(shù)，會(huì)在setState調(diào)用完成并且組件開(kāi)始重新渲染時(shí)被調(diào)用，可以用來(lái)監(jiān)聽(tīng)渲染是否完成：

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

總結(jié)

state的主要作用是用于組件保存、控制以及修改自己的狀態(tài)，它只能在constructor中初始化，它算是組件的私有屬性，不可通過(guò)外部訪問(wèn)和修改，只能通過(guò)組件內(nèi)部的this.setState來(lái)修改，修改state屬性會(huì)導(dǎo)致組件的重新渲染。

區(qū)別

• props是傳遞給組件的（類似于函數(shù)的形參），而state是在組件內(nèi)部被組件自己管理的（類似于在一個(gè)函數(shù)內(nèi)聲明的變量）
  

• state是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；props是外部傳入的數(shù)據(jù)參數(shù)，不可變；

• 沒(méi)有state的叫做無(wú)狀態(tài)組件，有state的叫做有狀態(tài)組件；

• 多用props，少用state。也就是多寫無(wú)狀態(tài)組件。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享react中state和props有什么區(qū)別內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!