Erste Schritte mit React: So erstellen Sie Komponenten in React

Erstellen Sie eine Komponente

Bevor Sie eine Komponente erstellen, achten Sie bitte auf folgende Punkte:

1. Der erste Buchstabe des Namens der Komponente muss großgeschrieben werden

2. Der in der Komponente zurückgegebene JSX kann nur ein Stammknoten sein und der gesamte Inhalt muss von einem Element umrahmt werden

1

Keine zustandsbehafteten Funktionskomponenten können verstehen, dass Erfolge von einer Funktion generiert werden, wodurch der Code lesbarer, rationalisiert und bequemer wird und Redundanz reduziert wird. Zustandslose Komponenten weisen die folgenden Eigenschaften auf:

1. Die Komponente kann nicht instanziiert werden und das Gesamtrendering wird verbessert

2. Die Komponente kann nicht auf dieses Objekt zugreifen, da sie nicht instanziiert ist, also kann sie nicht auf dieses Objekt zugreifen

3. Komponenten haben keinen Lebenszyklus

4. Zustandslose Komponenten können nur auf Eingabe-Requisiten zugreifen und haben keinen Status

import React from 'react'
import { connect } from 'dva';

 function CreateComponent(props) {
   console.log(props);
   return (
     <p>
        <span>{props.name}今年{props.age}岁</span>
     </p>
   )
 }

export default connect(state => ({
  name:'小明',
  age:15
}))(CreateComponent);

2. React.Component-Klassenkomponenten

Jede Komponentenklasse muss eine Rendermethode implementieren. Achten Sie hier besonders darauf, dass diese Rendermethode ein JSX-Element zurückgibt, das heißt, den gesamten Inhalt mit einem äußersten Element umschließen Mehrere JSX-Elemente sind unzulässig, wie unten gezeigt:

import React from 'react'

class CreateComponent extends React.Component {
     render() {
       return(
         <p>
           <h2>标题</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最后</li>
            </ul>
         </p>
       )
     }
}

export default CreateComponent;

Das obige Beispiel besteht darin, das h2-Element und ul mit einem p zu umschließen

1 Komponentenereignisüberwachung

import React from 'react'

class CreateComponent extends React.Component {

   clickFunc = (e) => {
     console.log("监听:",e.target.innerHTML);
   }

   clickValue = (value) => {
     console.log(value);
   }
    render() {
      return (
       <p>
         <a onClick={this.clickFunc}>监听事件</a>
         <br/>
         <a onClick={this.clickValue.bind(this,123)}>this对象</a>
      </p>
      )
    }

}

export default CreateComponent;

Das Obige sind Beispiele für Ereignisüberwachung und Parameterübergabe

2. Komponentenstatus und setState

Normalerweise wird in einer Komponente der Status verwendet, um den Status der internen Parameter der Komponente festzulegen, und setState wird verwendet um die Parameter im Zustand zu ändern, zum Beispiel:

import React from 'react'

class CreateComponent extends React.Component {
  state = {
    flag : true
  }
   clickValue = () => {
     this.setState({
       flag: !this.state.flag
     })
   }
    render() {
      return (
       <p>
         <span>flag的值为：{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改变flag值</button>
      </p>
      )
    }

}

export default CreateComponent;

3. Die Requisiten der Komponente

props sind die Eigenschaften in der Komponente, wie z Erstellen Sie als eine Komponente und rufen Sie diese Komponente dann wie folgt in einer anderen Komponente auf:

import React from 'react';

function NewComponent(props) {
  return (
    <p>
       {props.content}
    </p>
  );
}


export default NewComponent;

Erstellen Sie eine Komponente NewComponent und rufen Sie sie dann wie folgt auf:

import React from 'react'
import NewComponent from './newComponent.js'

class CreateComponent extends React.Component {
    render() {
      return (
       <p>
         <NewComponent content={&#39;我是内容&#39;} />
      </p>
      )
    }

}

export default CreateComponent;

Wie Sie sehen können Hier sind Requisiten die eingebrachten Attributwerte, Requisiten ermöglichen es externen Komponenten tatsächlich, sich selbst zu konfigurieren, und der Zustand ist der Zustand, in dem sich die Komponente selbst steuert

Komponentenlebenszyklus

Initialisierung der Konstruktorkomponente:

Der Konstruktor initialisiert einige Parametereigenschaften usw.

Bevor die Komponente „componentWillMount“ gerendert wird:

componentWillMount This Funktion wurde nach React16.3.0 langsam geändert. Veraltet, verwenden Sie ComponentDidMount, um

componentDidMount zu ersetzen. Nach dem Rendern der Komponente:

componentDidMount wird nach dem Rendern der Komponente ausgeführt und Daten können geladen werden

Komponenten-Rendering rendern:

Komponenten-Rendering-Anzeigeseite rendern

import React from 'react'

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化')
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
      </p>


      )
    }

}

export default CreateComponent;

Ausgabeergebnis:

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束

componentWillUnmount Komponentenlöschung

Die Funktion „componentWillUnmount“ ist eine Funktion, die ausgeführt wird, bevor die Komponente gelöscht wird. Der folgende Code:

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;

Erstellen Sie eine Komponente „NewComponent“ und führen Sie diese Komponente dann wie folgt in die Komponente „CreateComponent“ ein :

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

Wenn auf die Schaltfläche „Löschen“ geklickt wird, wird die Komponente „NewComponent“ gelöscht und die Funktion „componentWillUnmount“

wird vor dem Löschen ausgeführt. Das Ausgabeergebnis ist:

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
componentWillUnmount:将要从页面中删除

Die oben genannten Lebenszyklen sind die Komponentenlebenszyklen, die wir üblicherweise verwenden. Der Lebenszyklus von Komponenten Es gibt auch Lebenszyklen in der Aktualisierungsphase, diese werden jedoch relativ selten verwendet:

shouldComponentUpdate(nextProps, nextState)

Verwenden Sie diese Methode, um zu steuern, ob die Komponente aktualisiert wird. Rendering: Wenn false zurückgegeben wird, wird sie nicht erneut gerendert, wie unten gezeigt

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  shouldComponentUpdate(nextProps, nextState){
    if(nextState.isDelete){
      return false;
    }

  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

Klicken Sie zu diesem Zeitpunkt auf die Schaltfläche „Löschen“, und die Seite wird nicht gerendert. Dies liegt daran, dass der Rückgabewert in „shouldComponentUpdate“ auf „false“ gesetzt ist. Die Seite kann nicht erneut gerendert werden. Der erste Parameter dieser Funktion stellt die neuesten Requisiten dar und der zweite Parameter stellt den neuesten Status dar

componentWillReceiveProps(nextProps)

Die Komponente empfängt neue Requisiten von der übergeordneten Komponente Der zuvor aufgerufene Funktionsparameter nextProps repräsentiert die empfangenen Daten

in der NewComponent-Komponente:

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;

in der Komponente CreateComponent:

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  changeFunc = () => {
    this.setState({
      content:'文字修改'
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;修改content&#39; onClick={this.changeFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

ComponentWillReceiveProps startet jedoch in React16.3.0 Später veraltet

componentWillUpdate:

Diese Methode wird aufgerufen, bevor die Komponente erneut gerendert wird, und wird nach React16.3.0 veraltet sein

ComponentDidUpdate:

Die Komponente rendert und ändert die Änderungen am echten DOM und ruft dann

Hinweis: ComponentWillUpdate, ComponentWillReceiveProps, ComponentWillMount diese drei Lebenszyklen auf wird in „react116“ enthalten sein. Ab 3.0 veraltet sein

Verwandte Empfehlungen:

React Component Life Cycle Instance Analysis

Detaillierte Erklärung der Reaktionskomponente Dragact 0.1.4

Das obige ist der detaillierte Inhalt vonErste Schritte mit React: So erstellen Sie Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!