[英]What is the difference between state and props in React?
我在看一個關於 React 的 Pluralsight 課程，講師說 props 不應該被改變。 我現在正在閱讀一篇關於 props vs. state 的文章 (uberVU/react-guide) ，它說
道具和 state 更改都會觸發渲染更新。
文章后面說：
道具（屬性的縮寫）是組件的配置，如果可以的話，它是選項。 它們是從上面接收的並且是不可變的。
getInitialState在 React 組件中設置？道具和狀態是相關的。 一個組件的狀態往往會成為子組件的 props。 Props 在父級的 render 方法中作為React.createElement()的第二個參數傳遞給子級，或者，如果您使用的是 JSX，則可以使用更熟悉的標記屬性。
<MyChild name={this.state.childsName} />
childsName的父狀態值成為孩子的this.props.name 。 從孩子的角度來看，名稱道具是不可變的。 如果需要更改，父級應該只更改其內部狀態：
this.setState({ childsName: 'New name' });
React 會為你將它傳播給孩子。 一個自然的后續問題是：如果孩子需要更改其名稱道具怎么辦？ 這通常通過子事件和父回調來完成。 孩子可能會公開一個名為onNameChanged的事件。 然后，父級將通過傳遞回調處理程序來訂閱事件。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
孩子將通過調用將其請求的新名稱作為參數傳遞給事件回調，例如this.props.onNameChanged('New name') ，並且父母將使用事件處理程序中的名稱來更新其狀態。
handleName: function(newName) {
this.setState({ childsName: newName });
}
親子交流，簡單的傳遞props。
使用狀態將當前頁面需要的數據存儲在控制器視圖中。
使用道具將數據和事件處理程序向下傳遞給您的子組件。
在處理組件中的數據時，這些列表應有助於指導您。
道具
狀態
對於沒有父子關系的兩個組件之間的通信，可以設置自己的全局事件系統。 在 componentDidMount() 中訂閱事件，在 componentWillUnmount() 中取消訂閱，並在收到事件時調用 setState()。 通量模式是安排這一點的可能方式之一。 - https://facebook.github.io/react/tips/communicate-between-components.html
哪些組件應該有狀態？
大多數組件應該簡單地從道具中獲取一些數據並渲染它。 但是，有時您需要響應用戶輸入、服務器請求或時間的流逝。 為此，您使用狀態。
盡量保持盡可能多的組件無狀態。 通過這樣做，您可以將狀態隔離到其最合乎邏輯的位置並最大限度地減少冗余，從而更容易推理您的應用程序。
一種常見的模式是創建幾個僅渲染數據的無狀態組件，並在層次結構中在它們之上有一個有狀態組件，通過 props 將其狀態傳遞給其子級。 有狀態組件封裝了所有的交互邏輯，而無狀態組件則以聲明的方式處理數據。 - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components -should-have-state
狀態應該是什么？
狀態應包含組件的事件處理程序可能更改以觸發 UI 更新的數據。 在實際應用程序中，這些數據往往非常小並且可以進行 JSON 序列化。 在構建有狀態組件時，請考慮其狀態的最小可能表示形式，並且僅將這些屬性存儲在 this.state 中。 在 render() 內部，只需根據此狀態計算您需要的任何其他信息。 你會發現以這種方式思考和編寫應用程序往往會導致最正確的應用程序，因為向狀態添加冗余或計算值意味着你需要顯式地保持它們同步，而不是依賴 React 為你計算它們。 - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state
您可以通過將其與普通 JS 函數相關聯來更好地理解它。
簡單的說，
狀態是組件的本地狀態，不能在組件外部訪問和修改。 它相當於函數中的局部變量。
純 JS 函數
const DummyFunction = () => {
let name = 'Manoj';
console.log(`Hey ${name}`)
}
反應組件
class DummyComponent extends React.Component {
state = {
name: 'Manoj'
}
render() {
return <div>Hello {this.state.name}</div>;
}
另一方面， Props通過使組件能夠以 props 的形式從其父組件接收數據，從而使組件可重用。 它們等價於函數參數。
純 JS 函數
const DummyFunction = (name) => {
console.log(`Hey ${name}`)
}
// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');
反應組件
class DummyComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />
致謝： Manoj Singh Negi
文章鏈接： React State vs Props 解釋
我最喜歡的 props vs state 總結在這里： react-guide Big hattip to those guy。 以下是該頁面的編輯版本：
tl;dr如果組件需要在某個時間點更改其屬性之一，則該屬性應該是其狀態的一部分，否則它應該只是該組件的道具。
道具（屬性的縮寫）是組件的配置。 它們是從上面接收的，並且就接收它們的組件而言是不可變的。 一個組件不能改變它的 props，但是它負責把它的子組件的 props 放在一起。 道具不必只是數據——回調函數可以作為道具傳入。
狀態是一個數據結構，當一個組件掛載時，它以一個默認值開始。 它可能會隨着時間而發生變化，主要是由於用戶事件。
組件在內部管理自己的狀態。 除了設置初始狀態外，它沒有任何事情擺弄其子節點的狀態。 您可以將狀態概念化為該組件的私有狀態。
props state
Can get initial value from parent Component? Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No
狀態是可選的。 由於狀態增加了復雜性並降低了可預測性，因此最好使用沒有狀態的組件。 即使您顯然不能在交互式應用程序中沒有狀態，您也應該避免使用過多的有狀態組件。
無狀態組件只有道具，沒有狀態。 除了 render() 函數之外，沒有太多事情發生。 他們的邏輯圍繞着他們收到的道具。 這使得它們很容易遵循和測試。
有狀態的組件props 和 state。 當您的組件必須保留某些狀態時使用這些。 這是客戶端-服務器通信（XHR、Web 套接字等）、處理數據和響應用戶事件的好地方。 這些物流應該封裝在適量的有狀態組件中，而所有可視化和格式化邏輯都應該向下移動到許多無狀態組件中。
props （“properties”的縮寫）和state都是純 JavaScript 對象。 雖然兩者都保存影響渲染輸出的信息，但它們在一個重要方面有所不同：props 被傳遞給組件（類似於函數參數），而狀態是在組件內管理的（類似於在函數中聲明的變量）。
因此，狀態僅限於您當前的組件，但道具可以傳遞給您希望的任何組件...您可以將當前組件的狀態作為道具傳遞給其他組件...
同樣在 React 中，我們有無狀態組件，它們只有 props 而沒有內部狀態......
下面的示例展示了它們在您的應用中的工作方式：
父級（狀態完整組件）：
class SuperClock extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
}
render() {
return (
<div>
<Clock name={this.state.name} date={this.state.date} />
</div>
);
}
}
孩子（無狀態組件）：
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
props 和 state 之間的主要區別在於 state 是內部的，由組件本身控制，而 props 是外部的，由渲染組件的任何東西控制。
function A(props) {
return <h1>{props.message}</h1>
}
render(<A message=”hello” />,document.getElementById(“root”));
class A extends React.Component{
constructor(props) {
super(props)
this.state={data:"Sample Data"}
}
render() {
return(<h2>Class State data: {this.state.data}</h2>)
}
}
render(<A />, document.getElementById("root"));
基本上，不同之處在於狀態類似於 OOP 中的屬性：它是類（組件）的本地內容，用於更好地描述它。 道具就像參數一樣——它們從組件的調用者（父級）傳遞給組件：就好像你用某些參數調用了一個函數一樣。
React 中的state和props都是用來控制數據進入組件的，一般 props 由父組件設置並傳遞給子組件，並且它們在整個組件中是固定的。 對於將要發生變化的數據，我們必須使用狀態。 並且 props 是不可變的，而 state 是mutable ，如果你想改變 props 你可以從父組件做，然后將它傳遞給子組件。
Props ：Props 只不過是組件的屬性，而 React 組件只不過是一個 javascript 函數。
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
常量元素 = ;
這里<Welcome name="Sara" />傳遞一個對象 {name : 'Sara'} 作為 Welcome 組件的 props。 要將數據從一個父組件傳遞到子組件，我們使用道具。 道具是不可變的。 在組件的生命周期中，道具不應更改（認為它們是不可變的）。
狀態：狀態只能在組件內訪問。 為了跟蹤組件內的數據，我們使用狀態。 我們可以通過 setState 改變狀態。 如果我們需要將狀態傳遞給孩子，我們必須將其作為道具傳遞。
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}
正如我在使用 react 時了解到的那樣。
組件使用props從外部環境獲取數據，即另一個組件（純、函數或類）或通用類或javascript/typescript代碼
狀態用於管理組件的內部環境，意味着組件內部的數據變化
狀態：
道具：
class Parent extends React.Component{ render() { return( <div> <Child name = {"ron"}/> </div> ); } } class Child extends React.Component{ { render(){ return( <div> {this.props.name} </div> ); } }
state - 它是一個特殊的可變屬性，用於保存組件數據。 Componet 掛載時具有默認值。
props - 它是一種特殊屬性，本質上是不可變的，用於從父級到子級的值傳遞。 props 只是組件之間的溝通渠道，總是從頂部（父）移動到底部（子）。
以下是結合狀態和道具的完整示例：-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>state&props example</title>
<script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var TodoList = React.createClass({
render(){
return <div className='tacos-list'>
{
this.props.list.map( ( todo, index ) => {
return <p key={ `taco-${ index }` }>{ todo }</p>;
})}
</div>;
}
});
var Todo = React.createClass({
getInitialState(){
return {
list : [ 'Banana', 'Apple', 'Beans' ]
}
},
handleReverse(){
this.setState({list : this.state.list.reverse()});
},
render(){
return <div className='parent-component'>
<h3 onClick={this.handleReverse}>List of todo:</h3>
<TodoList list={ this.state.list } />
</div>;
}
});
ReactDOM.render(
<Todo/>,
document.getElementById('root')
);
</script>
</body>
</html>
Props：表示“只讀”數據，它們是不可變的，並且引用父組件的屬性。
狀態：表示可變數據，最終影響頁面上呈現的內容並由組件本身內部管理，並且通常由於用戶輸入而超時更改。
基本上，props 和 state 是組件可以知道渲染什么以及如何渲染的兩種方式。 應用程序狀態的哪一部分屬於狀態，哪一部分屬於某個頂級商店，與您的應用程序設計更相關，而不是 React 的工作方式。 IMO，最簡單的決定方法是考慮這個特定的數據是否對整個應用程序有用，或者它是一些本地信息。 此外，重要的是不要重復狀態，因此如果可以從 props 計算某些數據 - 它應該從 props 計算。
例如，假設您有一些下拉控件（它包含用於自定義樣式的標准 HTML 選擇），它可以 a）從列表中選擇一些值，並且 b）打開或關閉（即顯示或隱藏選項列表）。 現在，假設您的應用程序顯示某種項目的列表，並且您的下拉控件過濾列表條目。 然后，最好將活動過濾器值作為道具傳遞，並保持本地打開/關閉狀態。 此外，為了使其正常工作，您將從父組件傳遞一個 onChange 處理程序，該處理程序將在下拉元素內部調用，並立即將更新的信息（新選擇的過濾器）發送到商店。 另一方面，打開/關閉狀態可以保留在下拉組件中，因為應用程序的其余部分並不真正關心控件是否打開，直到用戶實際更改它的值。
以下代碼不完全正常工作，它需要 css 和處理下拉單擊/模糊/更改事件，但我想保持示例最小化。 希望它有助於理解差異。
const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}
function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;
case 'new':
return items.filter(function(item) { return Boolean(item.new); });
case 'important':
return items.filter(function(item) { return Boolean(item.important); });
default:
return items;
}
}
const App = React.createClass({
render: function() {
return (
<div>
My list:
<ItemList items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});
const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});
const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},
render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>
<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},
onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});
ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);
狀態是 react 處理組件持有的信息的方式。
假設您有一個組件需要從服務器獲取一些數據。 您通常希望通知用戶請求是否正在處理、是否失敗等。這是一條僅與該特定組件相關的信息。 這是狀態進入游戲的地方。
通常定義狀態的最佳方式如下：
class MyComponent extends React.Component {
constructor() {
super();
this.state = { key1: value1, key2: value2 }
}
}
但是在 react native 的最新實現中，您可以這樣做：
class MyComponent extends React.Component {
state = { key1: value1, key2: value2 }
}
這兩個示例以完全相同的方式執行，只是語法改進。
那么，與我們在 OO 編程中一直使用的對象屬性有什么不同呢？ 通常，您的狀態中保存的信息並不意味着是靜態的，它會隨着時間而變化，您的視圖需要更新以反映這種變化。 State 以一種簡單的方式提供了這個功能。
狀態是不可變的！ 我不能對此做出足夠的強調。 這是什么意思？ 這意味着你永遠不應該做這樣的事情。
state.key2 = newValue;
正確的做法是：
this.setState({ key2: newValue });
使用 this.setState 您的組件會在更新周期中運行，如果狀態的任何部分發生更改，您的組件渲染方法將再次調用以反映此更改。
檢查反應文檔以獲得更詳細的解釋： https ://facebook.github.io/react/docs/state-and-lifecycle.html
道具只是屬性的簡寫。 Props 是組件之間的通信方式。 如果您完全熟悉 React，那么您應該知道 props 從父組件向下流動。
還有一種情況是你可以有默認的 props，這樣即使父組件沒有向下傳遞 props，也會設置 props。
這就是為什么人們將 React 稱為具有單向數據流的原因。 這需要你花點時間思考，我稍后可能會在博客上討論這個問題，但現在請記住：數據從父級流向子級。 道具是不可變的（花哨的詞不會改變）
所以我們很高興。 組件從父級接收數據。 都整理好了，對吧？
嗯，不完全是。 當組件從父級以外的其他人那里接收數據時會發生什么？ 如果用戶直接向組件輸入數據怎么辦？
好吧，這就是我們有狀態的原因。
狀態
道具不應該改變，所以狀態會增加。 通常組件沒有狀態，因此被稱為無狀態。 使用狀態的組件稱為有狀態的。 隨意在聚會上丟掉那個小花絮，看着人們遠離你。
因此使用狀態，以便組件可以跟蹤它所做的任何渲染之間的信息。 當您 setState 時，它會更新狀態對象，然后重新渲染組件。 這非常酷，因為這意味着 React 可以處理繁重的工作並且速度非常快。
作為狀態的一個小例子，這里是一個搜索欄的片段（如果你想了解更多關於 React 的信息，值得看看這門課程）
Class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
}
render() {
return (
<div className="search-bar">
<input
value={this.state.term}
onChange={event => this.onInputChange(event.target.value)} />
</div>
);
}
onInputChange(term) {
this.setState({term});
this.props.onSearchTermChange(term);
}
}
概括
Props 和 State 做類似的事情，但以不同的方式使用。 您的大部分組件可能是無狀態的。
Props 用於將數據從父級傳遞給子級或由組件本身傳遞。 它們是不可變的，因此不會改變。
狀態用於可變數據或將更改的數據。 這對於用戶輸入特別有用。 以搜索欄為例。 用戶將輸入數據，這將更新他們看到的內容。
簡而言之。
道具值不能改變[不可變]
可以使用 setState 方法更改狀態值 [可變]
道具
props 用於在子組件中傳遞數據
props 更改組件外部的值（子組件）
狀態
在類組件中使用狀態
state 改變組件內的值
如果渲染頁面，則調用 setState 來更新 DOM（更新頁面值）
狀態在反應中具有重要作用
在回答關於 props 是不可變的最初問題時，就子組件而言，它們被稱為是不可變的，但在父組件中是可變的。
通常，一個組件（父組件）的狀態是子組件的道具。
道具通常是不可變的。
class Parent extends React.Component { constructor() { super(); this.state = { name : "John", } } render() { return ( <Child name={this.state.name}> ) } } class Child extends React.Component { constructor() { super(); } render() { return( {this.props.name} ) } }在上面的代碼中，我們有一個父類（Parent），它的狀態為 name，它作為 prop 傳遞給子組件（Child class），子組件使用 {this.props.name} 渲染它
在 React 中，狀態存儲數據以及道具。 它與后者的區別在於存儲的數據可以通過不同的變化進行修改。 這些只不過是用平面 JavaScript 編寫的對象，因此它們可以包含數據或代碼，代表您想要建模的信息。 如果您需要更多詳細信息，建議您查看這些出版物Use of the State in React和Use of Props in React
這是我目前關於 state 和 props 之間解釋的觀點
狀態就像組件中的局部變量。 您可以使用 set state 來操作 state 的值。 然后，您可以將 state 的值傳遞給您的子組件。
Props 是恰好位於您的 redux 存儲中的值，這實際上來自於源自 reducer 的狀態。 你的組件應該連接到 redux 以從 props 中獲取值。 您還可以將 props 值傳遞給您的子組件
您有一些用戶正在應用程序中某處輸入的數據。
正在輸入數據的組件應該具有該數據的狀態，因為它需要在數據輸入期間對其進行操作和更改
在應用程序的任何其他地方，數據應該作為道具傳遞給所有其他組件
所以是的，道具正在改變，但它們在“源頭”發生了變化，然后會簡單地從那里流下來。 所以 props在接收它們的組件的上下文中是不可變的。
例如，用戶編輯供應商列表的參考數據屏幕將在狀態下進行管理，然后會有一個操作導致更新的數據保存在 ReferenceDataState 中，它可能比 AppState 低一級，然后這個供應商列表將作為道具傳遞到需要使用它的所有組件。
反應中“狀態”和“道具”之間的一些差異。
React 根據狀態控制和渲染 DOM。 組件狀態有兩種：props 是組件之間傳遞的狀態，state 是組件內部的狀態。 Props 用於從父組件到子組件的數據傳輸。 組件內部也有自己的狀態：只能在組件內部修改的狀態。
通常某個組件的狀態可以是子組件的 props，props 會傳遞給子組件，子組件在父組件的渲染方法中聲明
來自：Andrea Chiarelli 的書《Beginning React：使用 React 簡化前端開發工作流程並增強應用程序的用戶體驗》：
每個 React 組件都有一個props屬性。 此屬性的目的是收集傳遞給組件本身的數據輸入。 JSX屬性附加到 React 元素，具有相同名稱的屬性附加到props對象。 因此，我們可以使用附加屬性訪問傳遞的數據。 此外， props的不變性讓我們可以將組件視為純函數，它們是沒有副作用的函數（因為它們不會改變輸入數據）。 我們可以將數據從一個組件傳遞到另一個組件視為從父組件到子組件的單向數據流。 這給了我們一個更可控的系統。
React 提供了一種機制來支持在數據更改時自動渲染組件。 這種機制是基於狀態的概念。 React狀態是一個表示隨時間變化的數據的屬性。 每個組件都支持state屬性，但應謹慎使用。 存儲可以隨時間變化的數據的組件被稱為有狀態組件。 有狀態組件將狀態存儲在this.state屬性中。 要通知組件狀態已更改，您必須使用setState()方法。 狀態初始化是唯一可以在不使用setState()的情況下為this.state屬性賦值的情況。
setState()將新數據與狀態中已經包含的舊數據合並，並覆蓋之前的狀態setState()觸發render()方法的執行，所以你永遠不應該顯式調用render()
props 和 state 之間的主要區別在於 state 是內部的，由組件本身控制，而 props 是外部的，由渲染組件的任何東西控制。
React 組件使用狀態來讀取/寫入可以更改/變異的內部變量，例如：
this.setState({name: 'Lila'})
React props 是一個特殊的對象，它允許程序員將變量和方法從父組件獲取到子組件中。
這有點像房子的門窗。 道具也是不可變的子組件不能更改/更新它們。
有幾種方法可以幫助在父組件更改道具時進行偵聽。
簡單的解釋是：STATE 是組件的本地狀態，例如 color = "blue" 或 animation=true 等。 使用 this.setState 來改變組件的狀態。 PROPS 是組件如何相互通信（將數據從父級發送到子級）並使組件可重用。
State 是你的數據，是可變的，你可以用它做任何你需要的事情，props 是只讀數據，通常當你傳遞 props 時，你已經使用了你的數據，你需要子組件來渲染它，或者你的 props 是函數你調用它來執行任務
狀態是真相的起源，您的數據所在的地方。 你可以說狀態通過道具表現出來。
為組件提供道具是使您的 UI 與數據保持同步的原因。 組件實際上只是一個返回標記的函數。
給定相同的道具（要顯示的數據），它總是會產生相同的標記。
所以 props 就像將數據從源頭傳送到功能組件的管道。
主要區別在於狀態是組件私有的，並且只能在該組件內部更改，而道具只是通過父組件傳遞並且不能在子組件內部更改的子組件的靜態值和鍵
React 組件使用狀態來讀取/寫入可以更改/變異的內部變量，例如：
this.setState({name: 'Lila'})
React props 是一個特殊的對象，它允許程序員將變量和方法從父組件獲取到子組件中。
這有點像房子的門窗。 道具也是不可變的子組件不能更改/更新它們。
有幾種方法可以幫助在父組件更改道具時進行偵聽。
狀態駐留在組件中，其中道具從父級傳遞到子級。 道具通常是不可變的。
class Parent extends React.Component {
constructor() {
super();
this.state = {
name : "John",
}
}
render() {
return (
<Child name={this.state.name}>
)
}
}
class Child extends React.Component {
constructor() {
super();
}
render() {
return(
{this.props.name}
)
}
}
在上面的代碼中，我們有一個父類（Parent），它的狀態為 name，它作為 prop 傳遞給子組件（Child class），子組件使用 {this.props.name} 渲染它
主要區別在於狀態只能在組件內部處理，而道具在組件外部處理。如果我們從外部獲取數據並進行處理，那么我們應該使用狀態。
props 和 states 在觸發重新渲染的方式上是相同的。 不同之處在於 props 來自父組件，而狀態在當前組件中進行管理。 所以狀態是可變的，道具是不可變的
簡單地說：
狀態由組件自己管理。 它是可重用的、組件私有的和可修改的。
道具從父母傳遞給孩子。 它是單向流，對子組件是只讀的。 父組件的狀態可以作為道具傳遞給子組件。
React props用於向子組件發送信息，大多數時候，您的子組件是無狀態的，這意味着它們代表其父級提供給它的數據/信息，
另一方面，狀態處理組件本身，可以借助 setState 和 useState 鈎子在組件內更改狀態。
例如
class Parent extends Component{
constructor(props){
super(props);
this.state = {
fruit: 'apple'
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(){
this.setState({fruit: 'mango'})
}
render(){
return (
<div>
<Child fruit={this.state.fruit} />
<button onClick={this.handleChange}>Change state</button>
</div>
)
}
}
當單擊按鈕並將其狀態作為道具傳遞給子組件時，此父類將其狀態從蘋果更改為芒果。 現在，甚至沒有狀態的子組件根據父組件的狀態顯示不同的標題。
class Child extends Component{
render(){
return(
<h1>I have received a prop {this.props.fruit}</h1>
)
}
}
因此，在根級別上，props 是父級與其子級通信，而 state 是描述父級情況等。
state : 是內部有價值的，這意味着僅在該類組件中有效，因此您不能將其傳遞給另一個組件。
props ：另一方面，您可以將 props 從父級傳遞給子級或從子級傳遞給父級。
狀態
狀態是 React Native 中用於跟蹤信息的組件的內部。 1.狀態是可變的 2.在組件內使用（僅限當前組件） 3.在構造函數內初始化 4.使用“this.setState”更新對象。 5.可以從父組件獲取初始化，但不能從父組件更改 6.可以設置初始化子組件的值，不能在子組件中更改 7.可以在組件內部設置默認值，並且可以在組件內部更改。
8.示例： - 組件內的用戶交互，如填寫表單、復選框、按鈕單擊語法
道具
Props 是屬性的縮寫形式，可以指代可以在組件中動態更改的東西。 在這里，組件從父組件接收道具。 1.Props 是不可變的 2.用於將數據從父級傳遞給子級。 3.用於傳遞數據以及回調函數作為道具。 4.可以從父組件獲取初始化，可以從父組件更改 5.可以為子組件設置初始化值，可以在子組件中更改 6.可以在組件內部設置默認值，可以在組件內部更改 7.示例：- 在父組件中使用子組件。
為了給出最簡單的解釋，補充上述評論：
根據 React 的官方文檔，他們將“狀態”視為
To “remember” things, components use state.
而 props 可以理解為從父組件到子組件傳遞的變量。
如果你想在你的應用程序中記住一些東西，你會使用 state，如果你想傳遞數據，你會使用 props。
讓我再給你一個類比，假設你試圖在你的腦海中添加前 25 個自然數的序列。
1+2+3+4.....
您將從 1 開始，然后將 2 添加到其中，現在您將添加到 3，然后您將添加到您當前的總數（現在 6），然后您將添加 4 到您當前的總數（6），所以新的當前總數為 10。
當前總數是您程序的state ，假設您需要找到總和的平均值。 你將把這個總和放入一個等式中，你將把你的總和作為props傳遞。
希望這有點道理。
React props和state的主要區別在於props是不可變的，一旦組件收到props ，它就不能改變它的值，而另一方面，React state是可變的，組件可以根據需要隨意改變它的值.
state是 react 中的一個特殊變量，用於在組件更新時重新渲染組件
狀態是組件本身私有的。 即，它不能在組件之外訪問或修改。 setState/hook 用於更新狀態。 每當狀態更新時，組件重新渲染
狀態是可變的
道具是組件的輸入，並使用道具數據呈現內容
道具是不可變的（Object.Frozen= true）
我們可以更改 states 值但我們不能更改 props 值，或者我們可以說 props 是不可變的，而 states 是可變的
在 React 中，我們通常使用模塊來分隔組件。 有時分離的組件需要在其中共享數據。 如果父組件有一些數據應該在子組件上共享，那么 props 就是解決方案。 我們可以使用來自父母的道具分享數據給孩子。 Props 是不可變的，這意味着您無法更改數據。
另一方面，狀態用於跟蹤數據的任何變化。 您可以將狀態視為數據的存儲和可以更新該數據的函數。 狀態是可變的。 您可以在同一組件中使用 setState 函數更改狀態
React 中的 props 和 state 之間有一些關鍵的區別。 道具是不可變的——一旦設置，就無法更改。 另一方面，狀態可以隨時更改。 道具也從父級傳遞給子級，而狀態是單個組件的本地。
我想用簡單的方式給你解釋state和道具：
我們使用狀態來存儲一些數據。 它也像一個變量，當您更改它時，您的組件將再次呈現。
要使用狀態，您需要導入useState鈎子：
import { useState } from 'react';
const [state_name,function_name] = useState(initial_value);
您可以通過 state_name 訪問您的state_name ，您可以更改它並通過function_name為其設置新值。
更多信息： https://reactjs.org/docs/state-and-lifecycle.html
它是一種將數據從一個組件發送到另一個組件的機制。 它也看起來像 CSS 中的屬性。 例如：
<Component props_value={custom_function} />
您可以將自定義 function 發送到組件並接收它以進行操作。
道具是在渲染時傳遞給組件的值、對象或數組。 這些道具通常是組件內創建 UI、設置某些默認功能或用於填充字段所需的值。 道具也可以以從父組件傳遞下來的函數的形式出現，這些函數可以被子組件調用。
狀態在組件（子或父）內進行管理。
這是我發現支持這一點的定義：
在React.js中使用this.props和props有什么區別？
[英]What is the difference between using this.props and props in React.js?
react-native 中的 loadingIndicatorSource 和 defaultSource 道具有什么區別？
[英]What is the difference between loadingIndicatorSource and defaultSource props in react-native?
React 組件實例屬性和狀態屬性有什么區別？
[英]What is the difference between React component instance property and state property?
React：在構造函數中設置狀態與僅在類中設置狀態之間的核心區別是什么？
[英]React: What is the core difference between setting a state in a constructor vs. just setting the state within the class?
react-redux：state.setIn() 和 state.set() 有什么區別？
[英]react-redux: What is the difference between state.setIn() and state.set()?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.