Detaillierte Erläuterung der Verwendung von React-Komponenten

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von React-Komponenten und der Vorsichtsmaßnahmen für die Verwendung von React-Komponenten geben. Hier sind praktische Fälle, werfen wir einen Blick darauf .

Als ich anfing, React zu schreiben, sah ich viele Möglichkeiten, Komponenten zu schreiben. Es gibt hundert Möglichkeiten, hundert Tutorials zu schreiben. Obwohl React selbst ausgereift ist, scheint es keinen „richtigen“ Weg zu geben, es zu verwenden. Deshalb fasse ich (der Autor) hier die Erfahrungen mit der Verwendung von React zusammen, die unser Team im Laufe der Jahre gesammelt hat. Ich hoffe, dieser Artikel ist für Sie nützlich, egal ob Sie Anfänger oder Veteran sind.

Bevor Sie beginnen:

Wir verwenden die ES6- und ES7-Syntax. Wenn Sie sich über den Unterschied zwischen Anzeigekomponenten und Containerkomponenten nicht ganz im Klaren sind, empfehlen wir Ihnen, zunächst diesen Artikel zu lesen. Wenn Sie Vorschläge oder Fragen haben, hinterließ Duqing eine Nachricht in den Kommentaren zu klassenbasierten Komponenten

Heutzutage werden React-Komponenten im Allgemeinen mithilfe klassenbasierter Komponenten entwickelt. Als nächstes schreiben wir unsere Komponente in die gleiche Zeile:

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import ExpandableForm from './ExpandableForm';
import './styles/ProfileContainer.css';

Ich mag CSS in Javascript. Allerdings ist diese Methode des Schreibstils noch zu neu. Deshalb führen wir in jeder Komponente CSS-Dateien ein. Darüber hinaus werden lokal eingeführte Importe und globale Importe durch eine Leerzeile getrennt.

Status initialisieren

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
 state = { expanded: false }

Sie können die alte Methode verwenden, um constructor in state zu initialisieren. Weitere relevante Informationen finden Sie hier. Aber wir wählen einen klareren Ansatz.

Außerdem haben wir darauf geachtet, vor der Klasse export default hinzuzufügen. (Anmerkung des Übersetzers: Obwohl dies bei Verwendung von Redux möglicherweise nicht korrekt ist.)

propTypes und defaultProps

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
 state = { expanded: false }
 
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 // ...
}

propTypes und defaultProps sind statische Eigenschaften. Definieren Sie es so früh wie möglich in der Komponentenklasse, damit andere Entwickler es beim Lesen des Codes sofort bemerken können. Sie können als Dokumentation dienen.

Wenn Sie React 15.3.0 oder höher verwenden, müssen Sie das prop-types-Paket separat importieren, anstatt React.PropTypes zu verwenden. Weitere Inhalte werden hierher verschoben.

Alle Ihre Komponenten sollten Requisitentypen haben.

Methoden

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
 state = { expanded: false }
 
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
 
 handleNameChange = (e) => {
  this.props.model.changeName(e.target.value)
 }
 
 handleExpand = (e) => {
  e.preventDefault()
  this.setState({ expanded: !this.state.expanded })
 }
 // ...
}

Wenn Sie in Klassenkomponenten Methoden an untergeordnete Komponenten übergeben, müssen Sie sicherstellen, dass diese mit der richtigen Funktion aufgerufen werden. Dies geschieht normalerweise, wenn es an eine untergeordnete Komponente übergeben wird: this.handleSubmit.bind(this).

Es ist viel einfacher, die Pfeilmethode von ES6 zu verwenden. Es behält automatisch den richtigen Kontext bei (this).

Übergeben Sie eine Methode an setState

Im obigen Beispiel gibt es diese Zeile:

this.setState({ expanded: !this.state.expanded });

setStateEs ist tatsächlich asynchron! Um die Leistung zu verbessern, ruft React mehrere setState zusammen auf. Daher ändert sich der Status möglicherweise nicht unbedingt sofort nach dem Aufruf von setState.

Wenn Sie also setState aufrufen, können Sie sich nicht auf den aktuellen Statuswert verlassen. Weil ich seinen Wert überhaupt nicht kenne.

Lösung: Übergeben Sie eine Methode an setState und übergeben Sie den Statuswert, bevor Sie diese Methode als Parameter aufrufen. Schauen Sie sich das Beispiel an:

this.setState(prevState => ({ expanded: !prevState.expanded }))

Danke an Austin Wood für die Hilfe.

Komponenten zerlegen

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
 state = { expanded: false }
 
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
 
 handleNameChange = (e) => {
  this.props.model.changeName(e.target.value)
 }
 
 handleExpand = (e) => {
  e.preventDefault()
  this.setState(prevState => ({ expanded: !prevState.expanded }))
 }
 
 render() {
  const {
   model,
   title
  } = this.props
  return ( 
   
    

     
{title}
     
    

   
  )
 }
}

Bei mehrzeiligen Elementen props sollte jede Requisite eine separate Zeile belegen. Genau wie das obige Beispiel. Der beste Weg, dieses Ziel zu erreichen, ist die Verwendung einer Reihe von Tools: Prettier.

Decorator

@observer
export default class ProfileContainer extends Component {

Wenn Sie einige Bibliotheken kennen, z. B. mobx, können Sie das obige Beispiel verwenden, um Klassenkomponenten zu ändern. Ein Dekorator ist eine Methode, die eine Klassenkomponente als Parameter übergibt.

Dekoratoren ermöglichen das Schreiben flexiblerer und lesbarerer Komponenten. Wenn Sie keinen Dekorator verwenden möchten, können Sie Folgendes tun:

class ProfileContainer extends Component {
 // Component code
}
export default observer(ProfileContainer)

Schließung

Versuchen Sie, die Übergabe von Schließungen in untergeordneten Komponenten zu vermeiden. wie zum Beispiel:

<input
 type="text"
 value={model.name}
 // onChange={(e) => { model.name = e.target.value }}
 // ^ Not this. Use the below:
 onChange={this.handleChange}
 placeholder="Your Name"/>

Hinweis: Wenn input eine React-Komponente ist, wird dadurch automatisch das Neuzeichnen ausgelöst, unabhängig davon, ob sich andere Requisiten geändert haben.

Konsistenzprüfung ist der ressourcenintensivste Teil von React. Fügen Sie hier keine zusätzliche Arbeit hinzu. Der beste Weg, das Problem im obigen Beispiel zu lösen, besteht darin, eine Klassenmethode zu übergeben, die besser lesbar und einfacher zu debuggen ist. Zum Beispiel:

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
// Separate local imports from dependencies
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
// Use decorators if needed
@observer
export default class ProfileContainer extends Component {
 state = { expanded: false }
 // Initialize state here (ES7) or in a constructor method (ES6)
 
 // Declare propTypes as static properties as early as possible
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 // Default props below propTypes
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 // Use fat arrow functions for methods to preserve context (this will thus be the component instance)
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
 
 handleNameChange = (e) => {
  this.props.model.name = e.target.value
 }
 
 handleExpand = (e) => {
  e.preventDefault()
  this.setState(prevState => ({ expanded: !prevState.expanded }))
 }
 
 render() {
  // Destructure props for readability
  const {
   model,
   title
  } = this.props
  return ( 
   
    // Newline props if there are more than two
    

     
{title}
      { model.name = e.target.value }}
      // Avoid creating new closures in the render method- use methods like below
      onChange={this.handleNameChange}
      placeholder="Your Name"/>
    

   
  )
 }
}

方法组件

这类组件没有state没有props，也没有方法。它们是纯组件，包含了最少的引起变化的内容。经常使用它们。

propTypes

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool
}
// Component declaration

我们在组件的声明之前就定义了propTypes。

分解Props和defaultProps

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
function ExpandableForm(props) {
 const formStyle = props.expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={props.onSubmit}>
   {props.children}
   <button onClick={props.onExpand}>Expand</button>
  </form>
 )
}

我们的组件是一个方法。它的参数就是props。我们可以这样扩展这个组件：

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}

现在我们也可以使用默认参数来扮演默认props的角色，这样有很好的可读性。如果expanded没有定义，那么我们就把它设置为false。

但是，尽量避免使用如下的例子：

const ExpandableForm = ({ onExpand, expanded, children }) => {

看起来很现代，但是这个方法是未命名的。

如果你的Babel配置正确，未命名的方法并不会是什么大问题。但是，如果Babel有问题的话，那么这个组件里的任何错误都显示为发生在 <>里的，这调试起来就非常麻烦了。

匿名方法也会引起Jest其他的问题。由于会引起各种难以理解的问题，而且也没有什么实际的好处。我们推荐使用function，少使用const。

装饰方法组件

由于方法组件没法使用装饰器，只能把它作为参数传入别的方法里。

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}
export default observer(ExpandableForm)

只能这样处理：export default observer(ExpandableForm)。

这就是组件的全部代码：

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
// Separate local imports from dependencies
import './styles/Form.css'
// Declare propTypes here, before the component (taking advantage of JS function hoisting)
// You want these to be as visible as possible
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
// Destructure props like so, and use default arguments as a way of setting defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? { height: 'auto' } : { height: 0 }
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}
// Wrap the component instead of decorating it
export default observer(ExpandableForm)

条件判断

某些情况下，你会做很多的条件判断：

<p id="lb-footer">
 {props.downloadMode && currentImage && !currentImage.video && currentImage.blogText
 ? !currentImage.submitted && !currentImage.posted
 ? <p>Please contact us for content usage</p>
  : currentImage && currentImage.selected
   ? <button onClick={props.onSelectImage} className="btn btn-selected">Deselect</button>
   : currentImage && currentImage.submitted
    ? <button className="btn btn-submitted" disabled>Submitted</button>
    : currentImage && currentImage.posted
     ? <button className="btn btn-posted" disabled>Posted</button>
     : <button onClick={props.onSelectImage} className="btn btn-unselected">Select post</button>
 }
</p>

这么多层的条件判断可不是什么好现象。

有第三方库JSX-Control Statements可以解决这个问题。但是与其增加一个依赖，还不如这样来解决：

<p id="lb-footer">
 {
  (() => {
   if(downloadMode && !videoSrc) {
    if(isApproved && isPosted) {
     return <p>Right click image and select "Save Image As.." to download</p>
    } else {
     return <p>Please contact us for content usage</p>
    }
   }
   // ...
  })()
 }
</p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JsChart的组件使用详解

JS的图片处理与合成详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!