What is the top-level API of React? Detailed introduction to react's top-level API

This article mainly talks about the introduction of the top-level API of react, let us read this article together

React is React The entrance to the library. If you use the <script> tag to load React, these top-level APIs are on the React global variable. If you use ES6 under npm, you can write import React from 'react' like this. If you are using ES5 under npm, you can write var React = require('react') like this.

Overview

Components

React components allow you to split the UI into independent reusable modules, and each module logic is also independent. React components can be defined by extending React.Component or React.PureComponent.

• React.Component

• React.PureComponent

If you don't use ES6 classes, you can also use the create-react-class module instead. Check React without ES6 for more information.

Creating React Elements

We recommend Use JSX to describe what your UI should look like. Every JSX element is called React.createElement() syntactic sugar. If using JSX, you don't have to explicitly call the following method.

• createElement()

• ##createFactory()

Check React without JSX for more information.

Convert elements

React also provides some other APIs:

• cloneElement()

• isValidElement()

• ##React.Children

Fragments

React

also provides a component for rendering multiple elements without wrapping elements.

• React.Fragment

Reference

React.Component

React.Component

is used by React components The base class upon which ES6 classes are defined.

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

For methods and properties related to the

React.Component

base class, see the React.Component API reference.

React.PureComponent

React.PureComponent

with React.Component Exactly the same, but when implemented in shouldComponentUpdate(), a shallow comparison of props and state is used. If your React component's

render()

function renders the same result given the same props and state, in some cases you can use React. PureComponent to improve performance.

Note:

##shouldComponentUpdate()

of React.PureComponent only performs a shallow comparison of objects. If these contain complex data structures, it may lead to judgment bias when comparing deeper data differences. So extending PureComponent can only be used on components with simple props and state, or components that use forceUpdate() to force an update when they know the deep data structure has changed. Alternatively, consider using immutable objects to aid in fast comparison of nested data. Furthermore, the shouldComponentUpdate()

method of

React.PureComponent skips the props update of the entire component subtree. So make sure all subcomponents are "pure" as well.

createElement()

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

Creates and returns a new element of the given type React elements . The type parameter can be a tag name string (such as

'p'

or

'span'), or a React component type (a class or function), or a React fragment type. use Code written in JSX will be converted to use React.createElement()

. If you're using JSX, you can call

React.createElement() directly without having to explicitly do it. See React without JSX for more information. cloneElement()

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

Using

element

as a starting point, clone and return a new React element. The resulting element will have the props of the original element, with the new props being shallowly merged. The new child element will replace the existing child element,

key and ref will be retained. (If you want to learn more, go to the PHP Chinese website React Reference Manual column to learn) React.cloneElement()

is almost equivalent to:

<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>
  );}

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

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

The above is the detailed content of What is the top-level API of React? Detailed introduction to react's top-level API. For more information, please follow other related articles on the PHP Chinese website!