Quelle est l'API de haut niveau de React ? Introduction détaillée à l'API de premier niveau de React

Cet article parle principalement de l'introduction de l'API de haut niveau de react Lisons cet article ensemble

React est l'entrée de la bibliothèque React. Si vous utilisez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour charger React, ces API de niveau supérieur se trouvent sur la variable globale React. Si vous utilisez ES6 sous npm, vous pouvez écrire import React from 'react' comme ceci. Si vous utilisez ES5 sous npm, vous pouvez écrire var React = require('react') comme ceci.

Vue d'ensemble

Composants

Les composants React vous permettent de diviser l'interface utilisateur en modules réutilisables indépendants, et chaque logique de module est également indépendante. Les composants React peuvent être définis en étendant React.Component ou React.PureComponent .

• React.Component

• React.PureComponent

Si vous n'utilisez pas de classes ES6) , vous pouvez également utiliser le module create-react-class à la place. Vérifier Réagissez sans ES6 pour plus d’informations.

Création d'éléments React

Nous vous recommandons Utilisez JSX pour décrire à quoi devrait ressembler votre interface utilisateur. Chaque élément JSX est appelé React.createElement() sucre syntaxique. Si vous utilisez JSX, vous n'êtes pas obligé d'appeler explicitement la méthode suivante.

• createElement()

• createFactory()

Voir Réagissez sans JSX pour plus d'informations.

Convertir les éléments

React fournit également d'autres API :

• cloneElement()

• isValidElement()

• React.Children

Fragments

React fournit également à un utilisateur un composant qui restitue plusieurs éléments sans les envelopper.

• React.Fragment

Référence

React.Component

React.Component est un composant React utilisé Classe de base sur laquelle les classes ES6 sont définies.

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

Pour les méthodes et propriétés liées à la classe de base React.Component, consultez la référence de l'API React.Component.

React.PureComponent

React.PureComponent avec React.Component Exactement la même chose, mais implémenté dans shouldComponentUpdate() en utilisant une comparaison superficielle des accessoires et de l'état.

Si la fonction render() de votre composant React donne le même résultat avec les mêmes accessoires et le même état, dans certains cas, vous pouvez utiliser React.PureComponent pour améliorer les performances.

Remarque : Le

de

React.PureComponentshouldComponentUpdate() n'effectue qu'une comparaison superficielle des objets. Si celles-ci contiennent des structures de données complexes, cela peut conduire à un biais de jugement lors de la comparaison de différences de données plus profondes. Ainsi, l'extension de PureComponent ne peut être utilisée que sur des composants avec des accessoires et un état simples, ou sur des composants qui utilisent forceUpdate() pour forcer une mise à jour lorsqu'ils savent que la structure profonde des données a changé. Vous pouvez également envisager d’utiliser des objets immuables pour faciliter une comparaison rapide des données imbriquées.

De plus, la méthode React.PureComponent de shouldComponentUpdate() ignore la mise à jour des accessoires de l'ensemble du sous-arbre de composants. Assurez-vous donc que tous les sous-composants sont également « purs ».

createElement()

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

Crée et renvoie une nouvelle instance du type donné Réagir aux éléments. Le paramètre type peut être une chaîne de nom de balise (telle que 'p' ou 'span'), ou un Type de composant React (une classe ou une fonction), ou un Type de fragment de réaction.

Utiliser Le code écrit en JSX sera converti pour utiliser React.createElement() . Si vous utilisez JSX, vous pouvez appeler React.createElement() directement sans avoir à le montrer. Voir React sans JSX pour plus d'informations.

cloneElement()

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

En utilisant element comme point de départ, clonez et renvoyez un nouvel élément React. L'élément résultant aura les accessoires de l'élément d'origine, les nouveaux accessoires étant fusionnés superficiellement. Le nouvel élément enfant remplacera l'élément enfant existant, key et ref seront conservés. (Si vous souhaitez en savoir plus, rendez-vous dans la colonne React Reference Manual sur le site PHP chinois pour apprendre)

React.cloneElement() est presque équivalent à :

<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使用手册栏目中学习），有问题的可以在下方留言提问。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!