-
使用React 18和WebSocket构建实时通信功能
关键词 React WebSocket1. 引言WebSocket是一种在Web应用中实现双向通信的协议。它允许服务器主动向客户端推送数据，而不需要客户端发起请求。在现代的实时应用中，WebSocket经常用于实时数据传输、聊天功能、实时通知和多人协作等场景。在本篇博客中，我们将探索如何在React 18应用中使用WebSocket来实现实时通信。2. 准备工作在开始之前，我们需要安装React 18，并确定你已经掌握了React Hooks的基本知识。此外，我们还将使用WebSock...…
-
使用React和ResizeObserver实现自适应ECharts图表
关键词 React ECharts ResizeObserver摘要在现代 Web 开发中，响应式布局和数据可视化是非常常见的需求。本文将介绍如何使用React、ResizeObserver和ECharts库来创建一个自适应的图表组件。什么是ResizeObserverResizeObserver是JavaScript的一个API，用于监测元素的大小变化。它可以在元素大小发生变化时触发回调函数，使我们能够及时地作出相应的调整。为什么使用ResizeObserver在响应式布局中，我们经...…
-
React使用 useImperativeHandle 自定义暴露给父组件的实例方法（包括依赖）
关键词 React useImperativeHandle 摘要useImperativeHandle 是 React 提供的一个自定义 Hook，用于在函数组件中显式地暴露给父组件特定实例的方法。本文将介绍 useImperativeHandle 的基本用法、常见应用场景，以及如何处理其依赖项，以帮助读者全面理解其使用。引言在 React 中，通常通过 props 来进行组件之间的通信。然而，有时候我们希望在父组件中能够直接调用子组件的某些方法或访问其内部的状态。为了实现这一目的，R...…
-
React-hook-form-mui（五）：包含内嵌表单元素的表单
关键词 React MUI react-hook-form-mui前言在上一篇文章中，我们介绍了react-hook-form-mui如何与与后端数据联调。在实际项目中，从后端获取的数据可能是复杂的数据对象，本文将介绍，如何通过react-hook-form-mui实现一个包含内嵌表单元素的表单Demo以下代码实现了一个包含内嵌表单元素的表单的完整代码：import React from 'react';import { useForm } from 'react-hook-form';...…
-
React-hook-form-mui（四）：与后端数据联调
关键词 React MUI react-hook-form-mui前言在上一篇文章中，我们介绍了react-hook-form-mui的表单验证功能。本文将从实际项目出发，介绍在真实项目中，如何与后端数据联调并初始化页面数据。react-hook-form-mui提供了 reset方法，当页面初始化的时候，调用后端数据，并通过reset方法，初始化表单的数据。Demo以下代码简单的讲解了最基础的一种与后端联调的方式：import React from 'react';import { u...…