React中state和props分別是什麼？

***

整理一下react中關於state和props的知識點。

在任何應用中，資料都是必不可少的。我們需要直接的改變頁面上一塊的區域來使得檢視的重新整理，或者間接地改變其他地方的資料。react的資料是自頂向下單向流動的，即從父元件到子元件中，元件的資料儲存在props和state中，這兩個屬性有啥子區別呢？

react的核心思想就是元件化思想，頁面會被切分成一些獨立的、可復用的元件。

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

假設我們現在需要實現乙個列表，根據react元件化思想，我們可以把列表中的行當做乙個元件，也就是有這樣兩個元件：和。

先看看

import item from "./item";
export default class itemlist extends react.component)}}

列表的資料我們就暫時先假設是放在乙個data變數中，然後通過map函式返回乙個每一項都是的陣列，也就是說這裡其實包含了data.length個元件，資料通過在元件上自定義乙個引數傳遞。當然，這裡想傳遞幾個自定義引數都可以。

在中是這樣的：

export default class item extends react.componentli>)}}

在render函式中可以看出，元件內部是使用this.props來獲取傳遞到該元件的所有資料，它是乙個物件，包含了所有你對這個元件的配置，現在只包含了乙個item屬性，所以通過this.props.item來獲取即可。

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

在元件中，我們最好為props中的引數設定乙個defaultprops，並且制定它的型別。比如，這樣：

item.defaultprops = ;
item.proptypes = ;

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

optionalarray: proptypes.array, optionalbool: proptypes.bool, optionalfunc: proptypes.func, optionalnumber: proptypes.number, optionalobject: proptypes.object, optionalstring: proptypes.string, optionalsymbol: proptypes.symbol,

注意，bool和func是簡寫。

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

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
}  render())}}

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

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

比如，我們經常會通過非同步操作來獲取資料，我們需要在didmount階段來執行非同步操作：

componentdidmount());  
}}

當資料獲取完成後，通過this.setstate來修改資料狀態。

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

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

setstate接受乙個物件或者函式作為第乙個引數，只需要傳入需要更新的部分即可，不需要傳入整個物件，比如：

export default class itemlist extends react.component
}  componentdidmount())  
}}

在執行完setstate之後的state應該是。

setstate還可以接受第二個引數，它是乙個函式，會在setstate呼叫完成並且元件開始重新渲染時被呼叫，可以用來監聽渲染是否完成：

this.setstate(,()=>console.log('setstate finished'))

state的主要作用是用於元件儲存、控制以及修改自己的狀態，它只能在constructor中初始化，它算是元件的私有屬性，不可通過外部訪問和修改，只能通過元件內部的this.setstate來修改，修改state屬性會導致元件的重新渲染。

state是元件自己管理資料，控制自己的狀態，可變；

props是外部傳入的資料引數，不可變；

沒有state的叫做無狀態元件，有state的叫做有狀態元件；

多用props，少用state。也就是多寫無狀態元件。

React中state和props分別是什麼？

React中prop和state的區別

React中state和props分別是什麼？

react中state與setstate的使用

React中state和props分別是什麼？

React中prop和state的區別

React中state和props分別是什麼？

react中state與setstate的使用

相關推薦