Was ist die Top-Level-API von React? Detaillierte Einführung in die Top-Level-API von React

In diesem Artikel geht es hauptsächlich um die Einführung der Top-Level-API von React. Lassen Sie uns diesen Artikel gemeinsam lesen.

React ist der Einstieg in die React-Bibliothek. Wenn Sie das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a zum Laden von React verwenden, befinden sich diese APIs der obersten Ebene in der globalen Variablen React. Wenn Sie ES6 unter npm verwenden, können Sie import React from 'react' so schreiben. Wenn Sie ES5 unter npm verwenden, können Sie var React = require('react') so schreiben.

Übersicht

Komponenten

Mit React-Komponenten können Sie die Benutzeroberfläche in unabhängige wiederverwendbare Module aufteilen, und jede Modullogik ist auch unabhängig. Reaktionskomponenten können durch Erweitern von React.Component oder React.PureComponent definiert werden.

• React.Component

• React.PureComponent

Wenn Sie keine ES6-Klassen verwenden) , können Sie stattdessen auch das Modul create-react-class verwenden. Überprüfen Für weitere Informationen reagieren Sie ohne ES6.

React-Elemente erstellen

Wir empfehlen Verwenden Sie JSX, um zu beschreiben, wie Ihre Benutzeroberfläche aussehen soll. Jedes JSX-Element wird aufgerufen React.createElement() syntaktischer Zucker. Wenn Sie JSX verwenden, müssen Sie die folgende Methode nicht explizit aufrufen.

• createElement()

• createFactory()

Ansicht Für weitere Informationen reagieren Sie ohne JSX.

Elemente konvertieren

React bietet auch einige andere APIs:

• cloneElement()

• isValidElement()

• React.Children

Fragmente

React stellt einem Benutzer auch eine Komponente zur Verfügung, die mehrere Elemente rendert ohne sie einzuwickeln.

• React.Fragment

Referenz

React.Component

React.Component ist eine React-Komponente gebraucht Die Basisklasse, auf der ES6-Klassen definiert werden.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }}

Methoden und Eigenschaften im Zusammenhang mit der React.Component-Basisklasse finden Sie in der React.Component-API-Referenz.

React.PureComponent

React.PureComponent mit React.Component Genau das Gleiche, aber implementiert in shouldComponentUpdate() unter Verwendung eines oberflächlichen Vergleichs von Requisiten und Zustand.

Wenn die render()-Funktion Ihrer React-Komponente bei denselben Requisiten und demselben Status dasselbe Ergebnis liefert, können Sie in einigen Fällen React.PureComponent verwenden, um die Leistung zu verbessern.

Hinweis: Das

von

React.PureComponentshouldComponentUpdate() führt nur einen oberflächlichen Vergleich von Objekten durch. Wenn diese komplexe Datenstrukturen enthalten, kann es beim Vergleich tieferer Datenunterschiede zu einer Beurteilungsverzerrung kommen. Daher kann die Erweiterung von PureComponent nur für Komponenten mit einfachen Requisiten und Zuständen oder für Komponenten verwendet werden, die forceUpdate() verwenden, um eine Aktualisierung zu erzwingen, wenn sie wissen, dass sich die tiefe Datenstruktur geändert hat. Alternativ können Sie auch unveränderliche Objekte verwenden, um einen schnellen Vergleich verschachtelter Daten zu ermöglichen.

Darüber hinaus überspringt die React.PureComponent-Methode von shouldComponentUpdate() die Requisitenaktualisierung des gesamten Komponententeilbaums. Stellen Sie daher sicher, dass auch alle Unterkomponenten „rein“ sind.

createElement()

React.createElement(
  type,
  [props],
  [...children])

Erstellt eine neue Instanz des angegebenen Typs und gibt sie zurück Elemente reagieren. Der Typparameter kann eine Tag-Namenszeichenfolge (z. B. 'p' oder 'span') oder ein sein React-Komponententyp (eine Klasse oder Funktion) oder a Fragmenttyp reagieren.

Verwenden In JSX geschriebener Code wird zur Verwendung von React.createElement() konvertiert. Wenn Sie JSX verwenden, können Sie React.createElement() direkt aufrufen, ohne es anzeigen zu müssen. Weitere Informationen finden Sie unter Reagieren ohne JSX.

cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

Verwenden Sie element als Ausgangspunkt, klonen Sie ein neues React-Element und geben Sie es zurück. Das resultierende Element verfügt über die Requisiten des ursprünglichen Elements, wobei die neuen Requisiten flach zusammengeführt werden. Das neue untergeordnete Element ersetzt das vorhandene untergeordnete Element, key und ref bleiben erhalten. (Wenn Sie mehr erfahren möchten, lesen Sie die Spalte React Reference Manual auf der chinesischen PHP-Website, um mehr zu erfahren.)

React.cloneElement() ist fast gleichbedeutend mit:

<element.type {...element.props} {...props}>{children}</element.type>

然而，它也会保留 ref 。这意味着，如果你通过它上面的 ref 获取自己的子节点，你将不会有机会从你的祖先获取它。你只会获得绑定在你的新元素上的相同ref 。

这个 API 引入作为废弃的 React.addons.cloneWithProps() 替代品。

createFactory()

React.createFactory(type)

返回一个函数，该函数生成给定类型的 React 元素。 像React.createElement()一样，type(类型) 参数可以是一个标签名字字符串（例如'p' 或'span'），或者是一个 React 组件 类型（类或者是函数）。参数可以是标签名称字符串（例如’p’或’span’）或者React组件类型（类或函数）。

这个函数被认为是遗留的API，并且我们鼓励你使用 JSX ，或直接使用 React.createElement()。

如果您使用JSX，则通常不需要直接调用 React.createFactory()。请参阅不使用 JSX 的 React 了解更多信息。

isValidElement()

React.isValidElement(object)

验证对象是否是一个 React 元素。 返回 true 或 false 。

React.Children

React.Children 提供了处理 this.props.children 这种不透明数据结构的实用程序。

React.Children.map

React.Children.map(children, function[(thisArg)])

对包含在 children 中的每个直接子元素调用一个函数，使用 this 设置 thisArg 。 如果children 是一个键片段（keyed fragment）或数组，它将被遍历：该函数永远不会传递容器对象（container objects）。 如果children 为 null 或 undefined ，返回 null 或undefined，而不是一个数组。

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

类似于 React.Children.map() ，但是不返回一个新数组。

React.Children.count

React.Children.count(children)

返回 children 中的组件总数，等于传递给 map 或 forEach 的回调将被调用的次数。

React.Children.only

React.Children.only(children)

返回 children 中的唯一子集。否则抛出异常。

注意：

React.Children.only() 不接受 React.Children.map() 的返回值，因为它是一个数组而不是一个 React 元素。

React.Children.toArray

React.Children.toArray(children)

将 children 不透明数据结构作为一个平面数组返回，并且 key 分配给每个子集。 如果你想在渲染方法中操作children集合，特别是如果你想在传递它之前重新排序或切割this.props.children ，这将非常有用。

注意：

React.Children.toArray() 更改 keys 去防止嵌套数组的语法当扁平化子节点列表。 也就是说，toArray为返回数组中的每个key赋予前缀，以便将每个元素的 key 范围限定为包含它的输入数组。

React.Fragment

React.Fragment 组件允许你在 render() 方法中返回多个元素，而无需创建额外的 DOM 元素：

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );}

你也可以用简写的 a8093152e673feb7aba1828c435320945f557f62ae7ac7a14e0b1cb564790dfc 语法来使用它。 有关更多信息，请参见片段 Fragments 或者 React v16.2.0: Improved Support for Fragments。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWas ist die Top-Level-API von React? Detaillierte Einführung in die Top-Level-API von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!