Erstellen Sie eine Komponente
Bevor Sie eine Komponente erstellen, achten Sie bitte auf folgende Punkte:
Der erste Buchstabe des Namens der Komponente muss großgeschrieben werden
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:
-
Die Komponente kann nicht instanziiert werden und das Gesamtrendering wird verbessert
Die Komponente kann nicht auf dieses Objekt zugreifen, da sie nicht instanziiert ist, also kann sie nicht auf dieses Objekt zugreifen
Komponenten haben keinen Lebenszyklus
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);Nach dem Login kopieren
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;Nach dem Login kopieren
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;Nach dem Login kopieren
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;Nach dem Login kopieren
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;Nach dem Login kopieren
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={'我是内容'} />
</p>
)
}
}
export default CreateComponent;Nach dem Login kopieren
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;Nach dem Login kopieren
Ausgabeergebnis:
construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
Nach dem Login kopieren
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;Nach dem Login kopieren
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='删除' onClick={this.deleteFunc}/>
{!this.state.isDelete?(
<NewComponent content={this.state.content}/>
):(null)}
</p>
)
}
}
export default CreateComponent;Nach dem Login kopieren
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:将要从页面中删除
Nach dem Login kopieren
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='删除' onClick={this.deleteFunc}/>
{!this.state.isDelete?(
<NewComponent content={this.state.content}/>
):(null)}
</p>
)
}
}
export default CreateComponent;Nach dem Login kopieren
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;Nach dem Login kopieren
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='修改content' onClick={this.changeFunc}/>
{!this.state.isDelete?(
<NewComponent content={this.state.content}/>
):(null)}
</p>
)
}
}
export default CreateComponent;Nach dem Login kopieren
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
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!
