React のトップレベル API とは何ですか? React のトップレベル API の詳細な紹介

この記事では主に react のトップレベル API の導入について説明します

React は React ライブラリへの入り口です。 <script> タグを使用して React をロードする場合、これらのトップレベル API は React グローバル変数にあります。 npm で ES6 を使用している場合は、次のように import React from 'react' を記述できます。 npm で ES5 を使用している場合は、次のように var React = require('react') と記述できます。 React 是 React 库的入口。如果你用 <script> 标签来加载 React，这些顶级 API 都在React 这个全局变量上。如果你在 npm 下使用 ES6 ，你可以这样写 import React from 'react' 。如果你在 npm 下使用 ES5，你可以这样写var React = require('react') 。

概述

组件(Components)

React 组件允许你将UI拆分为独立的可重用的模块，并且每个模块逻辑也是独立的。 React组件可以通过扩展 React.Component 或React.PureComponent 来定义。

• React.Component

• React.PureComponent

如果你不使用 ES6 类(classes)，你也可以使用 create-react-class

概要

コンポーネント

React コンポーネントを使用すると、UI を独立した再利用可能なモジュールに分割でき、各モジュールのロジックも独立しています。 React コンポーネントは、

または React.PureComponent を拡張することで定義できます。 React.createElement()

• createElement()

• createFactory()

React.PureComponent

ES6 クラスを使用しない場合は、create-react-class モジュールを使用することもできます交換する。 チェック 詳細については、ES6 を使用せずに反応してください。

React 还提供了一些其他的 API ：

• cloneElement()

• isValidElement()

• React.Children

片段(Fragments)

React 还提供了一个用于渲染多个元素而没有包裹元素的组件。

• React.Fragment

参考

React.Component

React.ComponentReact 要素の作成

お勧めします JSX を使用して、UI がどのように見えるかを記述します。すべての JSX 要素が呼び出されます

糖衣構文。 JSX を使用する場合、次のメソッドを明示的に呼び出す必要はありません。

React.Component 基类相关的方法和属性，请参阅React.Component API参考。

React.PureComponent

React.PureComponentcreateElement()React.ComponentshouldComponentUpdate()中实现时，使用了 props 和 state 的浅比较。

如果你的React组件的 render() 函数在给定相同 props 和 state 情况下渲染相同的结果，在某些情况下，你可以使用React.PureComponent来提高性能。

注意：

React.PureComponent 的 shouldComponentUpdate() 仅对对象进行浅比较。 如果这些包含复杂的数据结构，它可能会在更深层数据差异比较时发生判断偏差。 所以扩展PureComponent 只能用于具有简单 props 和 state 的组件，或者在知道深层数据结构已更改时使用forceUpdate() 来强制更新的组件。 或者，考虑使用不可变对象来帮助嵌套数据的快速比较。

再者，React.PureComponent 的 shouldComponentUpdate() 方法跳过了整个组件子树的 props 更新。所以确保所有的子组件也是“pure”。

createElement()

createFactory()

View 詳細については、「JSX を使用せずに反応する」を参照してください。 'p' 或'span'

要素を変換する

React.createElement() 。 如果您使用JSX，则你可以不必显示地直接调用 React.createElement()。 请参阅不使用 JSX 的 React 了解更多信息。

cloneElement()

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

使用 element 作为起点，克隆并返回一个新的 React 元素。 所产生的元素将具有原始元素的 props ，新的 props 为浅层合并。 新的子元素将取代现有的子元素，key 和 ref 将被保留。（想看更多就到PHP中文网React参考手册栏目中学习）

React.cloneElement()React は他の API も提供します:

cloneElement()

🎜🎜🎜isValidElement() 🎜🎜 🎜🎜React.Children🎜🎜🎜🎜Fragments 🎜🎜React は、複数の要素をラップせずにレンダリングするためのコンポーネントも提供します。 🎜🎜🎜🎜React.Fragment🎜🎜🎜

参照

🎜🎜🎜🎜🎜はReactコンポーネントによって使用されます ES6 クラスが定義される基本クラス。 🎜🎜🎜

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

🎜🎜🎜 🎜基本クラス関連のメソッドとプロパティについては、React.Component API Referenceを参照してください。 🎜🎜React.PureComponent🎜🎜React.PureComponent 🎜 まったく同じですが、props と state の浅い比較を使用して shouldComponentUpdate() で実装されています。 🎜🎜 React コンポーネントの render() 関数が同じ props と state を与えられて同じ結果をレンダリングする場合、場合によっては React.PureComponent code> を使用してパフォーマンスを向上させることができます。 🎜

🎜注: 🎜

🎜React.PureComponent の shouldComponentUpdate() は、オブジェクトの浅い比較のみを実行します。 これらに複雑なデータ構造が含まれている場合、より深いデータの違いを比較するときに判断のバイアスが生じる可能性があります。 したがって、 PureComponent の拡張は、単純な props と state を持つコンポーネント、または深いデータ構造が変更されたことがわかっているときに forceUpdate() を使用して更新を強制するコンポーネントでのみ使用できます。 あるいは、ネストされたデータの高速な比較を支援するために、不変オブジェクトの使用を検討してください。 🎜🎜 さらに、React.PureComponent の shouldComponentUpdate() メソッドは、コンポーネント サブツリー全体の props 更新をスキップします。したがって、すべてのサブコンポーネントも「純粋」であることを確認してください。 🎜

🎜createElement()🎜🎜🎜

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

🎜🎜🎜 指定された型の新しい要素を作成して返します 要素に反応します。 type パラメータには、タグ名の文字列 (🎜 など)、または React コンポーネント タイプ (クラスまたは関数)、または 反応フラグメントのタイプ。 🎜🎜使用する JSX で書かれたコードは 🎜 を使用するように変換されます。 JSX を使用している場合は、🎜 を表示せずに直接呼び出すことができます。 詳細については、「JSX を使用しない反応」を参照してください。 🎜🎜cloneElement()🎜🎜🎜

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

🎜🎜🎜 element を開始点として使用して、新しい React 要素をクローンして返します。 結果の要素には元の要素の props が含まれ、新しい props は浅くマージされます。 新しい子要素は既存の子要素を置き換えますが、key と ref は保持されます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの React リファレンス マニュアル🎜 の列にアクセスして学習してください)🎜 🎜 React.cloneElement() は次とほぼ同等です: 🎜🎜🎜

React.createFactory(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>
  );}

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

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

以上がReact のトップレベル API とは何ですか? React のトップレベル API の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。