React의 최상위 API는 무엇입니까? React의 최상위 API에 대한 자세한 소개

이 글은 주로 react의 최상위 API 소개에 대해 다루고 있습니다. 이 글을 함께 읽어보세요

React React 라이브러리의 진입점입니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 React를 로드하는 경우 이러한 최상위 API는 React 전역 변수에 있습니다. npm에서 ES6를 사용하는 경우 import React from 'react'를 이렇게 작성할 수 있습니다. npm에서 ES5를 사용하는 경우 var React = require('react')를 이렇게 작성하면 됩니다. 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()

개요

구성 요소

React 구성 요소를 사용하면 UI를 독립적인 재사용 가능한 모듈로 분할할 수 있으며 각 모듈 로직도 독립적입니다. React 구성 요소는 React.Component 또는 React.PureComponent를 확장하여 정의할 수 있습니다.

• React.Component

• React.PureComponent#🎜🎜#

#🎜🎜#ES6 클래스(클래스)를 사용하지 않는 경우 create-react-class를 사용할 수도 있습니다. 코드> 모듈 대신. 확인하다 자세한 내용은 ES6 없이 반응하세요. #🎜🎜#

React 요소 만들기

#🎜🎜#추천합니다 JSX를 사용하여 UI가 어떤 모습이어야 하는지 설명하세요. 모든 JSX 요소가 호출됩니다. React.createElement() 구문 설탕. JSX를 사용하는 경우 다음 메서드를 명시적으로 호출할 필요가 없습니다. #🎜🎜#

• #🎜🎜#createElement()#🎜🎜#
• #🎜🎜#createFactory()#🎜🎜#

#🎜🎜#View 자세한 내용은 JSX 없이 반응하세요. #🎜🎜#

요소 변환

#🎜🎜#React는 다른 API도 제공합니다: #🎜🎜#

#🎜🎜#cloneElement()#🎜🎜#
• #🎜🎜#isValidElement()#🎜🎜#
#🎜🎜#React.Children#🎜🎜#

프래그먼트

#🎜🎜#React 구성 요소도 제공 여러 요소를 래핑하지 않고 렌더링하기 위한 것입니다. #🎜🎜#

• #🎜🎜#React.Fragment#🎜🎜#

참조

React.Component

#🎜🎜#React.Component는 React 구성 요소에서 사용됩니다. ES6 클래스가 정의될 ​​때의 기본 클래스입니다. #🎜🎜##🎜🎜##🎜🎜#

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

#🎜🎜##🎜🎜##🎜🎜#React.Component 기본 클래스와 관련된 메서드 및 속성은 React를 참조하세요. .Component API 참조. #🎜🎜#

React.PureComponent

#🎜🎜#React.PureComponent 포함 React.Component 완전히 동일하지만 props와 상태의 얕은 비교를 사용하여 shouldComponentUpdate()에서 구현되었습니다. #🎜🎜##🎜🎜#React 구성 요소의 render() 함수가 동일한 props 및 state에 대해 동일한 결과를 렌더링하는 경우 경우에 따라 React.PureComponent를 사용할 수 있습니다. > 성능을 향상시키기 위해. #🎜🎜#

#🎜🎜#참고: #🎜🎜#

#🎜🎜#React.PureComponent의 shouldComponentUpdate() 사물을 얕은 비교만 하세요. 여기에 복잡한 데이터 구조가 포함되어 있으면 더 깊은 데이터 차이를 비교할 때 판단 편향이 발생할 수 있습니다. 따라서 PureComponent 확장은 단순한 props와 state가 있는 구성 요소 또는 forceUpdate()를 사용하여 심층 데이터 구조가 변경되었음을 알 때 업데이트를 강제하는 구성 요소에서만 사용할 수 있습니다. 또는 중첩된 데이터를 빠르게 비교할 수 있도록 불변 객체를 사용하는 것을 고려해 보세요. #🎜🎜##🎜🎜#게다가 React.PureComponent의 shouldComponentUpdate() 메서드는 전체 구성 요소 하위 트리의 props 업데이트를 건너뜁니다. 따라서 모든 하위 구성 요소도 "순수"한지 확인하세요. #🎜🎜#

createElement()

#🎜🎜##🎜🎜#

React.createFactory(type)

#🎜🎜##🎜🎜##🎜🎜#생성 및 반환 주어진 유형의 새로운 반응 요소 . 유형 매개변수는 태그 이름 문자열(예: 'p' 또는 'span')이거나 React 구성 요소 유형(클래스 또는 함수) 또는 반응 조각 유형. #🎜🎜##🎜🎜#사용 JSX로 작성된 코드는 React.createElement()를 사용하도록 변환됩니다. JSX를 사용하는 경우 명시적으로 호출할 필요 없이 React.createElement()를 직접 호출할 수 있습니다. 자세한 내용은 JSX 없이 반응을 참조하세요. #🎜🎜#

cloneElement()

#🎜🎜##🎜🎜#

React.isValidElement(object)

#🎜🎜##🎜🎜##🎜🎜#요소 사용 시작점으로 새 React 요소를 복제하고 반환합니다. 결과 요소에는 원본 요소의 소품이 포함되며 새 소품은 얕게 병합됩니다. 새 하위 요소가 기존 하위 요소를 대체하고 key 및 ref는 유지됩니다. (자세한 내용을 알고 싶으시면 PHP 중국어 웹사이트 React Reference Manual#🎜🎜# 컬럼으로 이동하여 learn)#🎜 🎜##🎜🎜#React.cloneElement()는 다음과 거의 같습니다: #🎜🎜##🎜🎜##🎜🎜#

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

#🎜🎜##🎜🎜#

然而，它也会保留 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!