Artikelverzeichnis
1. Ereignisbindung
Die Ereignisbehandlung für React-Elemente ähnelt der für DOM-Elemente. Es gibt jedoch einen kleinen Syntaxunterschied:
- React-Ereignisbindungseigenschaften werden in Kamel- und nicht in Kleinbuchstaben benannt.
- Wenn Sie die JSX-Syntax verwenden, müssen Sie eine Funktion als Event-Handler-Funktion übergeben
<button onClick={()=>{this.tick()}}> 增加 </button>
Wenn Sie in einer über die Klasse erstellten Komponente dies zum Aufrufen einer Funktion verwenden möchten, können Sie dieses Objekt im Konstruktor als aktuelles Objekt binden oder es zum Aufrufen in der Bindung verwenden.
class App extends React.Component{
constructor(props){
super(props)
this.state = {
age:this.props.age
}
this.ageChange = this.ageChange.bind(this);
}
ageChange(){
this.setState({
age:this.state.age+1
})
}
render(){
return <div>
<span>我今年{
this.state.age}岁了</span>
<button onClick={
()=>{
this.ageChange()}}>过年了</button>
</div>
}
}
2. Komponenten-Requisiten
Der Hauptunterschied zwischen Komponentenstatus und Requisiten besteht darin, dass Requisiten unveränderlich sind, während sich der Status je nach Benutzerinteraktion ändern kann. Der Status wird innerhalb der Komponente definiert, während Requisiten bereitgestellt werden, wenn die übergeordnete Komponente ihn aufruft.
function HelloMessage(props) {
return <h1>Hello {
props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
Mit der Klasse erstellte Komponenten verwenden dies zum Aufrufen von Requisiten. Vor der Verwendung muss jedoch die super(props)Injektion im Klassenkonstruktor verwendet werden.
class HelloMessage extends React.Component {
constructor(props){
super(props)
}
render() {
return <h1>Hello {
this.props.name}!</h1>;
}
}
3. Bedingtes Rendern
3.1 Grundlegende Übersicht
In React können Sie verschiedene Komponenten erstellen, um verschiedene benötigte Verhaltensweisen zu kapseln. Dann können Sie basierend auf den Statusänderungen der Anwendung nur einen Teil davon rendern. Sie können in React auch if- oder Bedingungsoperatoren verwenden, um Elemente zu erstellen, die den aktuellen Status darstellen, und React dann die Benutzeroberfläche basierend auf diesen aktualisieren zu lassen.
const NavTitle=(props)=>{
if(props.type===1){
return <h1>{
props.title}</h1>
}else if(props.type===2){
return <h2>{
props.title}</h2>
}
}
3.2 Trinokularer Betrieb
const NavTitle=(props)=>{
return props.type===1?<h1>{
props.title}</h1>: <h2>{
props.title}</h2>
}
4. Liste
In React kann eine Reihe von Standardstrukturkomponenten über Arrays generiert und mapdas Listenrendering über Methoden abgeschlossen werden.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{
numbers}</li>
);
Das Generierungsprinzip besteht eigentlich darin, listItemses zu einem Array-Container zu machen, und innerhalb des Containers befinden sich <li>{numbers}</li>Komponenten. Schließlich kann das Array zum Rendern direkt innerhalb von React erweitert werden .
Wenn es direkt als Komponente verwendet wird numbers, wird es in zu rendernden Inhalt erweitert . In React müssen Sie beim Rendern einer Liste eine Komponente als Komponente
angeben . Ein eindeutiger Bezeichner . Dieses Attribut wird nicht als Requisiten einer Komponente empfangen, sondern nur für interne Berechnungen in React verwendet. Der Schlüssel kann React dabei helfen, welche zu identifizieren Elemente haben sich geändert, wenn bestimmte Elemente im DOM hinzugefügt oder gelöscht werden.key
5. Refs
5.1 Übersicht
React unterstützt eine ganz besondere Eigenschaft Ref , die Sie verwenden können, um an die von render() ausgegebene Label-Ausgabe zu binden.
Mit dieser speziellen Eigenschaft können Sie auf die entsprechende Instanz verweisen.
<input ref="myInput" />
var input = this.refs.myInput;
5.2 Weiterleitungsreferenzen
Wenn Sie eine Referenz an eine Komponente binden müssen, wird die obige Methode nicht unterstützt. React bietet forwardRefeine Methode zur Unterstützung von Komponentenreferenzen. Die Referenztestmethode besteht darin, forwardRefeine Funktion zum Übergeben der Referenzreferenz zu verwenden.
const InpuDom= forwardRef((props, ref) => (
<input type="text" ref={
ref} />
));
class ForwardRef extends Component {
constructor(props) {
super(props);
this.ref = createRef();
}
componentDidMount() {
const {
current } = this.ref;
current.focus();
}
render() {
return (
<div>
<p>forward ref</p>
<InpuDom ref={
this.ref} />
</div>
);
}
}
6. Lebenszyklus der Komponenten
Die Methoden des Komponentenlebenszyklus sind:
- ComponentWillMount – wird vor dem Rendern aufgerufen
- ComponentDidMount – wird nach dem ersten Rendern aufgerufen
- ComponentWillReceiveProps – Wird aufgerufen, wenn die Komponente eine neue Requisite erhält (nach der Aktualisierung). Diese Methode wird beim Initialisieren des Renderns nicht aufgerufen.
- ShouldComponentUpdate – Gibt einen booleschen Wert zurück. Wird aufgerufen, wenn die Komponente neue Requisiten oder einen neuen Status erhält. Wird während der Initialisierung oder bei Verwendung von forceUpdate nicht aufgerufen. (Kann verwendet werden, wenn Sie bestätigen, dass Sie keine Komponenten aktualisieren müssen.)
- **componentWillUpdate** – Wird aufgerufen, wenn die Komponente neue Requisiten oder einen neuen Status erhält, aber noch nicht gerendert wurde. Wird während der Initialisierung nicht aufgerufen.
- ComponentDidUpdate – Wird sofort aufgerufen, nachdem die Aktualisierung der Komponente abgeschlossen ist. Wird während der Initialisierung nicht aufgerufen.
- **componentWillUnmount ** – Wird unmittelbar aufgerufen, bevor die Komponente aus dem DOM entfernt wird.