Einführung

Bei React.js geht es darum, eine Benutzeroberfläche zu erstellen . Jedes Objekt oder jede Funktion in einer React.js Anwendung trägt zur Benutzeroberfläche bei. In diesem Artikel werde ich die Arten von Komponenten erklären, die in React.js verwendet werden, und mögliche Anwendungsfälle für jeden Typ.

Komponentenumfang

Solange Reagieren innerhalb des Geltungsbereichs liegt, kann eine JavaScript-Funktion oder ES6-JavaScript-Klasse in eine React-Komponente umgewandelt werden.

import React from 'react';

Komponententypen

Funktional

Funktionale Komponenten sind Funktionen, die Props akzeptieren als Argumente und geben gültiges JSX zurück . Funktionskomponenten sind in der Regel die bevorzugte Wahl beim Bau von Komponenten mit React, da sie weniger Overhead erfordern.

import React from 'react';

function Todo(props){

    return (
      <div className="Todo">
        <h1>New Task: {props.task}</h1>
      </div>
    );
}

export default Todo;

Anwendungsfall - Wenn Sie eine generische Ausgangsvorlage zum Erstellen einer Komponente benötigen.

Komponente (Reaktionsklasse)

Klassenkomponenten in React.js erben den Komponentenkonstruktor. Sie können den Zustand initialisieren , implementieren Sie das Rendering Methode und Verwendung Lebenszyklus Haken.

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentWillMount() {}

  componentDidMount() {}

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

Anwendungsfall - Wenn die Komponente zum DOM gerendert wird und volle Reaktionsfähigkeit erfordert.

Rein (Reaktionsklasse)

Der Unterschied zwischen der Pure- und der Component-Klasse ist das Rendering Methode. Eine reine Komponente aktualisiert den Status nicht, wenn sich die Werte nicht geändert haben.

   import React, { PureComponent } from 'react';

    class Result extends PureComponent {
      render() {
        return <li>{this.props.result}</li>;
      }
    }

    export default Result;

Anwendungsfall - Wenn Sie konsistente Renderings der Komponente vermeiden müssen.

Stateful – (Container, Smart)

Zustandsbehaftete Komponenten sind Komponenten, die den Zustand verwalten des Bauteils. Die Komponente kann den Status mithilfe von this.state verwalten Objekt oder die useState Haken. Zustandsbehaftete Komponenten werden oft als Container bezeichnet oder Smart Komponenten, da der Zustand oft mit einer Live-Datenquelle verbunden ist.

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
     text: 'Do Something',
     completed: false
    }
  }

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

Ein anderes Beispiel

import React from 'react';
import { useState } from 'react'


function Todo(props){

  const [todo, setTodo] = useState({
    text: 'Do something',
    completed: false
    })
    return (
      <div className="Todo">
        <h1>New Task: {todo.text}</h1>
      </div>
    );
}

export default Todo;

Anwendungsfall - Wenn Sie den Status einer Komponente verwalten oder aktualisieren müssen.

Staatenlos - (präsentativ, dumm)

Zustandslose Komponenten nicht Status einer Komponente verwalten. Sie werden oft als Präsentation bezeichnet oder Dumm Komponenten, da ihre einzige Aufgabe darin besteht, einen Teil der Benutzeroberfläche bereitzustellen.

import React from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

export default Todo

Ein anderes Beispiel

import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
export default TodoList

Anwendungsfall - Wenn die Komponente in verschiedenen Teilen der Anwendung wiederverwendet wird und nur als Ansicht fungiert.

Höhere Ordnung (HOC)

Eine Komponente höherer Ordnung ist eine Funktion oder Komponente an sich, die eine Komponente als Requisiten nimmt und eine neue Komponente zurückgibt. Es unterscheidet sich von anderen Komponenten, da es keine Ansicht auf das DOM rendert.

import React from 'react';

const withClass = props => (
  <div className={props.classes}>{props.children}</div>
);

export default withClass;

Anwendungsfall - Sie möchten einer Komponente einige zusätzliche Funktionen oder Stile hinzufügen.

Fazit

Dies sind die verschiedenen Arten von Komponenten in React.js. Die zwei am häufigsten verwendeten Komponenten in der Entwicklung sind Class und Funktional . Seien Sie wie immer vorsichtig und ich hoffe, dieser Artikel hilft Ihnen beim Erlernen von React.js