react中state和props的差別有哪些？

區別：props是傳遞給元件的（類似函數的形參），而state是在元件內部被元件自己管理的（類似於在一個函數內宣告的變數）。 state是元件自己管理數據，控制自己的狀態，可變；props是外部傳入的資料參數，不可變。

本教學操作環境：Windows7系統、react18版、Dell G3電腦。

相關推薦：《React影片教學》

#props

React的核心思想就是組件化思想，頁面會被切割成一些獨立的、可重複使用的元件。

元件在概念上就是一個函數，可以接受一個參數作為輸入值，這個參數就是props，所以可以把props理解為從外部傳入組件內部的數據。由於React是單向資料流，所以props基本上也就是從服父級元件傳遞給子元件的資料。

用法

假設我們現在需要實作一個列表，根據React元件化思想，我們可以把列表中的行當做一個元件，也就是有這樣兩個組件：793c14541c5258a30fd35e1c0d3045cd和1209b554b906b4373fc153c06634de4b。

先看看793c14541c5258a30fd35e1c0d3045cd

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

清單的資料我們就暫時先假設是放在一個data變數中，然後透過map函數傳回一個每一項都是c2bedfeeb766fab6cc5eeda0f3de8b36的數組，也就是說這裡其實包含了data.length 個1209b554b906b4373fc153c06634de4b元件，資料透過在元件上自訂一個參數傳遞。當然，這裡想傳遞幾個自訂參數都可以。

在48c57b37968f3b3c0d120bb9ea043c5a中是這樣的：

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

在render函數中可以看出，元件內部是使用this.props來取得傳遞到該元件的所有數據，它是一個對象，包含了所有你對這個元件的配置，現在只包含了一個item屬性，所以透過this.props.item來取得即可。

只讀性

props經常被用作渲染元件和初始化狀態，當一個元件被實例化之後，它的props是唯讀的，不可改變的。如果props在渲染過程中可以被改變，會導致這個元件顯示的形態變得無法預測。只有透過父元件重新渲染的方式才可以把新的props傳入元件中。

預設參數

在元件中，我們最好為props中的參數設定一個defaultProps，並且制定它的類型。例如，這樣：

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

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

關於propTypes，可以宣告為下列幾種型別：

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

總結

props是一個從外部傳入元件的參數，主要作為就是從父元件向子元件傳遞數據，它具有可讀性和不變性，只能透過外部元件主動傳入新的props 來重新渲染子元件，否則子元件的props以及展現形式不會改變。

state

state是什麼呢？

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

一個元件的顯示形態可以由資料狀態和外部參數決定，外部參數也就是props，而資料狀態就是state

用法

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

首先，在元件初始化的時候，透過this.state給元件設定一個初始的state，在第一次render的時候就會用這個資料來渲染元件。

setState

state不同於props的一點是，state是可以改變的。不過，不可以直接透過this.state=的方式來修改，而需要透過this.setState()方法來修改state。

例如，我們經常會透過非同步操作來取得數據，我們需要在didMount階段來執行非同步操作：

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

當資料取得完成後，透過this.setState來修改資料狀態。

當我們呼叫this.setState方法時，React會更新元件的資料狀態state，並且重新呼叫render方法，也就是會對元件進行重新渲染。

注意：透過this.state=來初始化state，使用this.setState來修改state，constructor是唯一能夠初始化的地方。

setState接受一個物件或函數作為第一個參數，只需要傳入需要更新的部分即可，不需要傳入整個對象，例如：

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

在执行完setState之后的state应该是{name:'axuebin',age:18}。

setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

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

总结

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

区别

• props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
  

• state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；

• 没有state的叫做无状态组件，有state的叫做有状态组件；

• 多用props，少用state。也就是多写无状态组件。

更多编程相关知识，请访问：编程教学！！

以上是react中state和props的差別有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！