React頂層API是什麼？ react的頂層api的詳細介紹

本篇文章主要的講述了關於react的頂層api的介紹，下面就讓我們一起來閱讀這篇文章吧

React 是React庫的入口。如果你用 3f1c4e4b6b16bbbd69b2ee476dc4f83a 標籤來載入 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 模組來替代。查看 不要使用 ES6 的 React 以取得更多相關資訊。

建立 React 元素

我們建議 使用 JSX 來描述你的 UI 應該是什麼樣子。每個 JSX 元素都是調用 React.createElement() 的語法糖。如果使用 JSX ，你不必顯示地呼叫下面的方法。

• createElement()

• #createFactory()

查閱 不要使用 JSX 的 React 來獲取更多資訊。

轉換元素

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

• cloneElement()

• isValidElement()

• #React.Children

片段(Fragments)

React

也提供了一個用於渲染多個元素而沒有包裹元素的元件。 React.Fragment

#參考React.Component

React.Component 是React 元件使用 ES6 類別(classes) 定義時的基底類別。

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

有關

React.Component 基底類別相關的方法和屬性，請參閱React.Component API參考。 React.PureComponent

React.PureComponent 與 React.Component

完全相同，但是在

shouldComponentUpdate()中實作時，使用了 props 和 state 的淺比較。

如果你的React元件的

render()

函數在給定相同props 和state 情況下渲染相同的結果，在某些情況下，你可以使用

React. PureComponent

來提升效能。

注意：React.PureComponent 的

shouldComponentUpdate()

僅對物件進行淺比較。如果這些包含複雜的資料結構，它可能會在更深層資料差異比較時發生判斷偏差。所以擴充功能PureComponent 只能用於具有簡單 props 和 state 的元件，或是在知道深層資料結構已變更時使用

forceUpdate()

來強制更新的元件。或者，考慮使用不可變物件來幫助嵌套資料的快速比較。

再者，

React.PureComponent### 的 ###shouldComponentUpdate()### 方法跳過了整個元件子樹的 props 更新。所以確保所有的子組件也是「pure」。 ############createElement()############

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

#########建立並傳回一個新的給定類型的 React 元素 。這個 type(類型) 參數可以是一個標籤名字字串（例如 ###'p'### 或###'span'###），或是一個 React 元件 類型（一個類別或函數），或一個 React fragment 類型。 ######使用 JSX 所寫的程式碼將會被轉換成使用 ###React.createElement()### 。如果您使用JSX，則您可以不必顯示地直接呼叫 ###React.createElement()###。請參閱不使用 JSX 的 React 以了解更多資訊。 #########cloneElement()############

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

#########使用###element### 作為起點，複製並傳回一個新的React 元素。所產生的元素將具有原始元素的 props ，新的 props 為淺層合併。新的子元素將取代現有的子元素，###key### 和 ###ref### 將會被保留。 （想看更多就到PHP中文網###React參考手冊###欄位學習）##########React.cloneElement()### 幾乎等效於：##### ####

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

以上是React頂層API是什麼？ react的頂層api的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！