ReactJS - 参考 API
React JS 是一个用于构建用户界面的 JavaScript 库。React 允许开发人员高效地创建交互式 UI 组件。因此，本参考资料试图记录 React JS 提供的每个内置函数、Hooks(钩子)、组件和其他基本功能。在本教程中，我们将使用 React@18 版本。
在 React JS 中，函数根据其功能和用途分为两个主要部分。以下是 React JS 中的主要函数
内置 Hooks(Hooks(钩子))
在此，我们包含了所有内置Hooks(钩子)，这些Hooks(钩子)可与组件中的不同 React 功能一起使用。
| S.No | 函数 &描述 |
|---|---|
| 1 | use() 让我们读取资源的值。 |
| 2 | useDebugValue() 向自定义Hooks(钩子)添加标签。 |
| 3 | useDeferredValue() 让我们推迟更新部分用户界面。 |
| 4 | useId() 用于生成唯一 ID。 |
| 5 | useImperativeHandle() 帮助我们连接子组件。 |
| 6 | useInsertionEffect() 允许我们将元素插入 DOM。 |
| 7 | useLayoutEffect() 用于执行布局测量。 |
| 8 | useSyncExternalStore() 让我们订阅外部商店。 |
| 9 | useTransition() 帮助我们更新状态而不阻塞 UI。 |
内置组件
在此我们记录了您可以在代码中使用的组件和其他组件很好。
| S.No | 功能与说明 |
|---|---|
| 1 | <Suspense> 显示回退，直到其子项完成加载。 |
内置 React API
React 提供了一些内置 API，可用于定义组件。
| S.No | Function &描述 |
|---|---|
| 1 | cache() 缓存数据获取的结果。 |
| 2 | createContext() 它创建组件可以提供的上下文。 |
| 3 | lazy() 允许我们延迟加载组件的代码。 |
| 4 | startTransition() 在不阻塞 UI 的情况下更新状态。 |
指令
这些是与 React Server Components 兼容的捆绑器的指令。
内置 React DOM Hooks
有一些内置的 React DOM Hooks 在浏览器 DOM 环境中运行。这些 Hooks 不适合非浏览器环境，如 Android、iOS 和 Windows 应用程序。
| S.No | 函数 &描述 |
|---|---|
| 1 | useFormState() 根据表单操作的结果更新状态。 |
| 2 | useFormStatus() 提供上次表单提交的状态信息。 |
事件处理函数
在本节中，我们包含了一些支持所有内置 HTML 和 SVG 组件的事件处理函数。
| S.No | 函数 &描述 |
|---|---|
| 1 | event 事件对象 充当我们的代码和浏览器事件之间的链接。 |
| 2 | AnimationEvent 处理程序 CSS 动画事件的事件处理程序类型。 |
| 3 | ClipboardEvent 处理程序 它是 Clipboard API 事件的事件处理程序类型。 |
| 4 | CompositionEvent 处理程序 它是输入法编辑器事件的事件处理程序类型。 |
| 5 | DragEvent 处理程序 HTML Drag and Drop API 事件的事件处理程序类型。 |
| 6 | FocusEvent 处理程序 焦点事件的事件处理程序类型。 |
| 7 | InputEvent 处理程序 事件处理程序onBeforeInput 事件的类型。 |
| 8 | KeyboardEvent 处理程序 处理键盘事件的事件。 |
| 9 | MouseEvent 处理程序 鼠标事件的事件处理程序类型。 |
| 10 | PointerEvent 处理程序 它是指针事件的事件处理程序类型。 |
| 11 | TouchEvent 处理程序 触摸事件的事件处理程序类型。 |
| 12 | TransitionEvent 处理程序 CSS 转换事件的事件处理程序类型。 |
| 13 | UIEvent 处理程序 通用用户界面事件的事件处理程序类型。 |
| 14 | WheelEvent 处理程序 onWheel 的事件处理程序类型事件。 |
React DOM API
react-dom 包包含仅支持 Web 应用程序的方法。在本节中，我们包含了 API、客户端 API 和服务器 API。
| S.No | 函数 &描述 |
|---|---|
| 1 | createPortal() 获取当前 Axes 实例。 |
| 2 | flushSync() 创建一个新的 Axes 实例。 |
| 3 | findDOMNode() 关闭当前图形。 |
| 4 | createRoot() 清除当前图形。 |
| 5 | hydrateRoot() 检查是否存在具有给定图形编号的图形。 |
| 6 | renderToReadableStream() 创建一个新图形。 |
| 7 | renderToString() 获取当前图。 |
| 8 | renderToStaticMarkup() 获取所有图形的标签。 |
| 9 | cloneElement() 将当前 Axes 实例设置为给定的轴。 |
| 10 | isValidElement() 向轮廓图添加轮廓标签。 |
| 11 | PureComponent 它是常规Component的增强版本。 |
其他类组件
这些组件是定义为 JavaScript 类的 React 组件的基类。React 仍然支持类组件，因此我们将它们包含在下面的部分中。
| S.No | 函数 &描述 |
|---|---|
| 1 | componentDidCatch() 用于在某些子组件抛出错误时调用。 |
| 2 | componentDidUpdate() 用于在组件重新渲染后立即调用。 |
| 3 | componentWillUnmount() 在组件被加载之前调用已删除。 |
| 4 | forceUpdate() 强制组件重新渲染。 |
| 5 | getChildContext() 指定旧上下文的值。 |
| 6 | getSnapshotBeforeUpdate() 使您的组件能够捕获一些信息。 |
| 7 | static contextType 让我们指定使用哪个旧上下文。 |
| 8 | static defaultProps 用于设置类的默认 props。 |
| 9 | static propTypes 声明您的组件。 |
| 10 | static getDerivedStateFromError() 当子组件在渲染过程中抛出错误时调用它。 |
| 11 | static getDerivedStateFromProps() 用于在调用渲染之前调用它。 |
| 12 | UNSAFE_componentWillMount() 它是一个生命周期方法，在服务器渲染期间运行。 |
| 13 | UNSAFE_componentWillReceiveProps() 用于在组件收到新 props 时调用。 |
| 14 | UNSAFE_componentWillUpdate() 在使用新 props 或状态渲染之前调用它。 |
| 15 | createElement() 创建一个 React 元素，以替代编写JSX。 |
| 16 | createRef() 创建一个 ref 对象以包含任意值。 |
测试实用程序
测试实用程序用于在您选择的测试框架中轻松测试 React 组件。在本节中，我们包含了一些执行测试的功能。
| S.No | 函数和说明 |
|---|---|
| 1 | act() 包装与组件交互的代码。 |
| 2 | mockComponent() 创建 React 组件的模拟版本。 |
| 3 | isElement() 检查给定对象是否为 React 元素。 |
| 4 | isElementOfType() 检查给定对象是否是特定类型的元素。 |
| 5 | isDOMComponent() 检查给定对象是否是 DOM 组件。 |
| 6 | isCompositeComponent() 检查给定对象是否是复合组件。 |
| 7 | isCompositeComponentWithType() 检查给定的对象是否为特定类型的复合组件。 |
| 8 | findAllInRenderedTree() 在树中查找组件的所有渲染实例。 |
| 9 | scryRenderedDOMComponentsWithClass() 查找具有特定类的所有 DOM 组件。 |
| 10 | findRenderedDOMComponentWithClass() 在渲染树中查找具有特定类的第一个 DOM 组件。 |
| 11 | scryRenderedDOMComponentsWithTag() 查找具有特定标记的所有 DOM 组件。 |
| 12 | findRenderedDOMComponentWithTag() 查找具有特定标记的第一个 DOM 组件。 |
| 13 | scryRenderedComponentsWithType() 查找特定类型的所有复合组件。 |
| 14 | findRenderedComponentWithType() 查找特定类型的第一个复合组件。 |
| 15 | renderIntoDocument() 将 React 组件渲染到 DOM 中。 |
| 16 | Simulate() 用于模拟用户交互。 |
测试渲染器
测试渲染器是一个实用程序，用于将 React 组件渲染为纯 JavaScript 对象，而无需 DOM。在本节中，我们为该实用程序提供了一些函数。
| S.No | 函数和说明 |
|---|---|
| 1 | TestRenderer.create() 在测试渲染器实例中渲染 React 组件。 |
| 2 | TestRenderer.act() 执行与测试渲染器的交互。 |
| 3 | testRenderer.toJSON() 返回已渲染组件树的 JSON 表示形式。 |
| 4 | testRenderer.toTree() 返回显示渲染的组件树的树结构。 |
| 5 | testRenderer.update() 手动触发渲染组件的更新。 |
| 6 | testRenderer.unmount() 卸载渲染的组件。 |
| 7 | testRenderer.getInstance() 返回根组件的实例。 |
| 8 | testRenderer.root() 提供对组件树根节点的访问。 |
| 9 | testInstance.find() 查找组件树中的节点。 |
| 10 | testInstance.findByType() 根据类型在组件树中查找节点。 |
| 11 | testInstance.findByProps() 根据 props 在组件树中查找节点。 |
| 12 | testInstance.findAll() 查找组件中的所有节点树。 |
| 13 | testInstance.findAllByType() 根据类型查找组件树中的所有节点。 |
| 14 | testInstance.findAllByProps() 根据 props 查找所有节点。 |
| 15 | testInstance.instance 表示实际组件的实例。 |
| 16 | testInstance.type 表示组件的类型。 |
| 17 | testInstance.props 表示传递给组件的 props。 |
| 18 | testInstance.parent 表示组件中的父节点树。 |
| 19 | testInstance.children 显示组件树中的子节点。 |
