React

React实现响应式布局的最佳实践-牛翰网

React实现响应式布局的最佳实践

目录 什么是响应式布局? React中的响应式布局实现方法 1. 使用CSS Flexbox和Grid 2. 使用CSS媒体查询 3. 使用第三方库 4. 使用CSS-in-JS解决方案 总结 什么是响应式布局? 响应式布局是一种网...
ffe2e08b477e5c99的头像-牛翰网JJCTO袁龙2个月前
0429
React视频播放控制组件Video Controls的实现-牛翰网

React视频播放控制组件Video Controls的实现

目录 引言 1. 基本概念 1.1 HTML5 <video> 标签 1.2 React 组件化思想 2. 创建基础的 Video Controls 组件 2.1 初始化项目 2.2 构建 VideoControls 组件 2.3 使用 VideoControl...
React实现一个支持动态插槽的Layout组件-牛翰网

React实现一个支持动态插槽的Layout组件

目录 思路 代码实现 一、定义 Context 二、封装 useSlotRegister 自定义 Hook 三、将插槽内的注册的内容渲染到 React 组件树上 目标实现一个支持动态注册内容的插槽组件,思路:提供一个 Contex...
4305f52d233bda68的头像-牛翰网小乌龟快跑2个月前
0479
使用React路由实现页面导航的示例代码-牛翰网

使用React路由实现页面导航的示例代码

目录 什么是React Router? 安装React Router 基本用法 创建基本路由 运行示例 进阶用法 嵌套路由 利用路由参数 总结 什么是React Router? React Router是一个用于React应用程序的标准路由库,...
ffe2e08b477e5c99的头像-牛翰网JJCTO袁龙2个月前
03910
React封装高阶组件实现路由权限的控制详解-牛翰网

React封装高阶组件实现路由权限的控制详解

目录 React高阶组件是什么 路由权限控制做什么 代码 缺点 比较 React高阶组件是什么 官方解释∶ 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分...
1099eda87c87420c的头像-牛翰网shenyaofeng2个月前
05515
React受控组件和非受控组件对比详解-牛翰网

React受控组件和非受控组件对比详解

目录 引言 受控组件(Controlled Components) 优点 示例代码 非受控组件(Uncontrolled Components) 优点 示例代码 受控组件与非受控组件的对比 何时使用受控组件和非受控组件? 结论 引言 在...
ffe2e08b477e5c99的头像-牛翰网JJCTO袁龙2个月前
04712
详解如何在React中执行条件渲染-牛翰网

详解如何在React中执行条件渲染

目录 引言 什么是条件渲染? 基础示例 使用逻辑与运算符(&&) 使用条件语句 列表中的条件渲染 总结 引言 在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效...
ffe2e08b477e5c99的头像-牛翰网JJCTO袁龙2个月前
04210
如何使用React的VideoPlayer构建视频播放器-牛翰网

如何使用React的VideoPlayer构建视频播放器

目录 一、引言 二、基础知识 1. HTML5 <video> 标签 2. React 组件化思想 三、构建基础 Video Player 组件 1. 初始设置 2. 创建 VideoPlayer 组件 3. 使用 VideoPlayer 组件 四...
如何使用React构建一个高效的视频上传组件-牛翰网

如何使用React构建一个高效的视频上传组件

目录 一、基础概念 (一)什么是视频上传组件 (二)为什么要使用React构建 二、常见问题及解决方案 (一)文件大小限制 1. 问题描述 2. 解决方案 (二)文件格式验证 1. 问题描述 2. 解决方案 ...
react的严格模式和解决react useEffect执行两次问题-牛翰网

react的严格模式和解决react useEffect执行两次问题

目录 useEffect执行两次 为什么useEffect执行两次 1.React的严格模式(模版创建项目) 2.React的严格模式(StrictMode包裹显渲染组件) 3.React的严格模式作用 作用1:识别不安全的生命周期 作...
ef5de2ca7d746980的头像-牛翰网满脑子技术的前端工程师2个月前
03312