Heim >Web-Frontend >js-Tutorial >Was sind die Unterschiede zwischen State und Props in React?
Was sind die Unterschiede zwischen State und Props in React?
- 青灯夜游Original
- 2020-11-17 16:49:037014Durchsuche
Unterschied: Requisiten werden an die Komponente übergeben (ähnlich den formalen Parametern einer Funktion), während der Status innerhalb der Komponente von der Komponente selbst verwaltet wird (ähnlich einer innerhalb einer Funktion deklarierten Variablen). Der Zustand ist die eigene Datenverwaltung und Kontrolle der Komponente, die variabel ist; Requisiten sind die von außen übergebenen Datenparameter, die unveränderlich sind.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.
Verwandte Empfehlungen: „React Video Tutorial“
props
Die Kernidee von React ist die Idee der Komponentisierung, und die Seite wird in einige unabhängige und wiederverwendbare Komponenten unterteilt.
Konzeptionell ist eine Komponente eine Funktion, die einen Parameter als Eingabewert akzeptieren kann. Dieser Parameter ist props, sodass props als an die Komponente übergeben angesehen werden kann die Außendaten. Da es sich bei React um einen unidirektionalen Datenfluss handelt, handelt es sich bei props im Wesentlichen um die Daten, die von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden. 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函数返回一个每一项都是ff05269e63ade90f183a23f0bad90920的数组，也就是说这里其实包含了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
e1b09ceb0b21ad278364d5a8c2e78037 und <code>1209b554b906b4373fc153c06634de4b. 🎜🎜Schauen Sie sich zunächst die Daten von 793c14541c5258a30fd35e1c0d3045cd an. 🎜export default class ItemList extends React.Component{
constructor(){
super();
this.state = {
name:'axuebin',
age:25,
}
}
componentDidMount(){
this.setState({age:18})
}
}🎜Wir gehen vorerst davon aus, dass sie in einer data-Variable platziert sind, und übergeben sie dann mapDie Funktion gibt ein Array zurück, in dem jedes Element d8081f83c859d647f0e06097e43a5698 ist, was bedeutet, dass es tatsächlich data.length Eine <code>1209b554b906b4373fc153c06634de4b-Komponente. Daten werden durch Anpassen eines Parameters an die Komponente übergeben. Natürlich können Sie hier beliebig viele benutzerdefinierte Parameter übergeben. 🎜🎜In 48c57b37968f3b3c0d120bb9ea043c5a sieht es so aus: 🎜this.setState({
name:'xb'
},()=>console.log('setState finished'))🎜Wie Sie in der Funktion render sehen können, verwendet die Komponente this.props, um alle an die Komponente übergebenen Daten abzurufen. Es handelt sich um ein Objekt, das alle Ihre Konfigurationen für diese Komponente enthält. Jetzt enthält es nur ein <code>item-Attribut, also übergeben Sie einfach this props.item. 🎜🎜🎜Schreibgeschützt🎜🎜🎜props wird häufig zum Rendern von Komponenten und dem Initialisierungsstatus verwendet. Wenn eine Komponente instanziiert wird, sind ihre props nicht änderbar. Wenn props während des Rendervorgangs geändert werden kann, wird die Anzeigeform dieser Komponente unvorhersehbar. Neue props können nur durch erneutes Rendern der übergeordneten Komponente an die Komponente übergeben werden. 🎜🎜🎜Standardparameter🎜🎜🎜In der Komponente legen wir besser einen defaultProps für die Parameter in props fest und geben dessen Typ an. Zum Beispiel dies: 🎜rrreee🎜 In Bezug auf propTypes können die folgenden Typen deklariert werden: 🎜rrreee🎜🎜Summary🎜🎜🎜props ist ein Parameter, der an die Komponente übergeben wird Von außen besteht seine Hauptfunktion darin, Daten von der übergeordneten Komponente an die untergeordnete Komponente zu übertragen. Sie ist lesbar und unveränderlich. Die untergeordnete Komponente kann nur durch aktive Übergabe neuer props neu gerendert werden Andernfalls ändern sich die props der untergeordneten Komponente nicht. 🎜🎜🎜🎜Zustand🎜🎜🎜🎜Was ist Zustand? 🎜rrreee🎜Die Anzeigeform einer Komponente kann durch den Datenstatus und externe Parameter bestimmt werden. Die externen Parameter sind props und der Datenstatus ist state🎜🎜🎜Verwendung 🎜🎜rrreee 🎜Zuerst, wenn die Komponente initialisiert wird, legen Sie über this.state einen anfänglichen state für die Komponente fest, und beim ersten Mal render Code> Diese Daten werden zum Rendern der Komponente verwendet. 🎜🎜🎜setState🎜🎜🎜<code>state unterscheidet sich von props darin, dass state geändert werden kann. Es kann jedoch nicht direkt über this.state= geändert werden. Stattdessen muss state über die Methode this.setState() geändert werden. 🎜🎜Zum Beispiel erhalten wir Daten häufig durch asynchrone Vorgänge. Wir müssen asynchrone Vorgänge in der Phase didMount ausführen: 🎜rrreee🎜Nachdem die Datenerfassung abgeschlossen ist, übergeben Sie this.setStateCode >, um den Datenstatus zu ändern. 🎜🎜Wenn wir die Methode <code>this.setState aufrufen, aktualisiert React den Datenstatus state der Komponente und ruft die Methode render erneut auf, d. h. Dadurch wird die Komponente neu gerendert. 🎜🎜🎜Hinweis: Verwenden Sie this.state=, um state zu initialisieren, verwenden Sie this.setState, um state zu ändern, constructor ist der einzige Ort, der initialisiert werden kann. 🎜🎜🎜setState akzeptiert ein Objekt oder eine Funktion als ersten Parameter. Sie müssen nur den Teil übergeben, der aktualisiert werden muss, nicht das gesamte Objekt, wie zum Beispiel: 🎜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。也就是多写无状态组件。
更多编程相关知识，请访问：编程教学！！
Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen State und Props in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!