HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

ReactJS 教程

ReactJS 主页 ReactJS 简介 ReactJS 路线图 ReactJS 下载安装和环境配置 ReactJS 功能 ReactJS 优势和缺点 ReactJS 架构 ReactJS 创建 React 应用程序 ReactJS JSX ReactJS 组件 ReactJS 嵌套组件 ReactJS 使用组件 ReactJS 集合组件 ReactJS 样式 ReactJS 属性 (props) ReactJS 使用属性创建组件 ReactJS props 验证 ReactJS 构造函数 ReactJS 组件生命周期 ReactJS 事件管理 ReactJS 创建事件感知组件 ReactJS Expense Manager 事件 ReactJS 状态管理 ReactJS 状态管理 API ReactJS 无状态组件 ReactJS Hooks 进行状态管理 ReactJS Hooks 的组件生命周期 ReactJS 布局组件 ReactJS 分页 ReactJS Material UI ReactJS Http 客户端编程 ReactJS 表单编程 ReactJS 受控组件 ReactJS 非受控组件 ReactJS Formik ReactJS 条件渲染 ReactJS 列表 ReactJS Key 键 ReactJS 路由 ReactJS Redux ReactJS 动画 ReactJS Bootstrap ReactJS Map ReactJS 表格 ReactJS 使用 Flux 管理状态 ReactJS 测试 ReactJS CLI 命令 ReactJS 构建和部署 ReactJS 示例

Hooks

ReactJS Hooks 简介 ReactJS 使用 useState ReactJS 使用 useEffect ReactJS 使用 useContext ReactJS 使用 useRef ReactJS 使用 useReducer ReactJS 使用 useCallback ReactJS 使用 useMemo ReactJS 自定义 Hooks

ReactJS 高级

ReactJS 可访问性 ReactJS 代码拆分 ReactJS 上下文 ReactJS 错误边界 ReactJS 转发 Refs ReactJS 片段 ReactJS 高阶组件 ReactJS 与其他库集成 ReactJS 优化性能 ReactJS Profiler API ReactJS Portals ReactJS 不使用 ES6 ECMAScript ReactJS 不使用 JSX 的 React ReactJS Reconciliation ReactJS Refs 和 DOM ReactJS 渲染道具 ReactJS 静态类型检查 ReactJS 严格模式 ReactJS Web 组件

其他概念

ReactJS 日期选择器 ReactJS Helmet ReactJS 内联样式 ReactJS PropTypes ReactJS BrowserRouter ReactJS DOM ReactJS 轮播 ReactJS 图标 ReactJS 表单组件 ReactJS 参考 API

ReactJS 有用资源

ReactJS 快速指南 ReactJS 备忘录 Axios 备忘录 ReactJS 有用资源 ReactJS 讨论

❮ ReactJS Form 表单组件 Reactjs 快速指南 ❯

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 兼容的捆绑器的指令。

S.No 函数 &说明
1 使用客户端

用于标记在客户端上运行什么代码。
2 使用服务器

用于标记服务器端函数。

内置 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

显示组件树中的子节点。
❮ ReactJS Form 表单组件 Reactjs 快速指南 ❯