专题
React 原理与实践
从 Fiber、组件更新到合成事件,系统梳理 React 运行机制与实际开发中常见的问题。
这个专题会帮你理清
- 理解 Fiber 为什么出现,以及它如何拆分渲染工作
- 串起组件、事件与更新流程
- 从原理回到日常开发的判断与排错
全部文章
17 篇React 面试集锦(一):Hooks、组件通信与 Fiber
整理三道常见 React 面试题:Hooks 为什么不能写在条件语句里、组件通信方式有哪些、React Fiber 解决了什么问题。重点放在原理、边界和面试表达。
·约 6 分钟·社区来稿 · batype
我对 React Server Components 的看法:方向对了,代价被低估了
RSC 解决的是真问题,但它给心智模型和生态带来的撕裂,比宣传里说的大得多。
·约 1 分钟
如何监听 div 是否渲染完成
本文介绍了在Next.js中使用NextMarkdownPreview组件时,如何通过MutationObserver监听div的ref对象来解决按需加载导致的加载慢问题。通过监听childList变化,可以及时获取容器内容变化,优化用户体验。
·约 1 分钟·社区来稿 · admin
react-monaco-markdown 操作手册
react-monaco-markdown是一个React组件,集成了Monaco编辑器和Markdown解析,支持实时预览和编辑Markdown文档。支持npm、pnpm、yarn安装。提供多种配置选项,如主题、只读模式、自定义渲染等。适用于Next.js等SSR环境。MIT许可。
·约 2 分钟·社区来稿 · song-shao
monaco-editor-react
Monaco Editor for React集成了monaco-editor,适用于任何React应用,无需配置webpack等打包工具。支持TypeScript重写,提供多模型编辑器,与@monaco-editor/loader集成,提供开发/游乐场地。主要特性包括:无需配置即可使用、支持多模型编辑、提供Editor和DiffEditor组件、支持自定义主题和语言、提供丰富的API和事件处理。
·约 14 分钟·社区来稿 · song-shao
testDemo
探索React组件中SignUpButton的实现,了解如何通过Button组件创建具有文本类型和白色文本的注册按钮,并实现模态弹窗和页面重定向功能。
·约 1 分钟·社区来稿 · batype
回调式用法
TypeScript编写的拖放节点更新回调函数,用于树形数据结构中节点的拖拽操作。函数`onDropNodeUpdateCallback`处理单个节点的拖放逻辑,而`onDropNodeCallback`递归处理拖放节点的所有子节点。`onDropNode`函数负责更新树形数据结构,根据拖放位置插入或替换节点,并调用回调函数。
·约 1 分钟·社区来稿 · admin
深入理解React中的ReactNode:构建动态用户界面的关键
ReactNode是React中用于表示可渲染内容的数据类型,它支持字符串、数字、React元素等多种形式。本文深入探讨了ReactNode的定义、重要性以及在动态内容渲染和处理多种子元素中的应用实践,帮助开发者更灵活地构建用户界面,提升应用的可维护性和用户体验。
·约 2 分钟·社区来稿 · song-shao
React 实现原理
1. jsx-dev-runtime.js jsx export { jsxDEV } from "./jsx/ReactJSXElement"; 2. ReactJSXElement.js jsx
·约 4 分钟
unstate-next 的实现原理
需要实现包装方法和获取数据的 hooks
·约 1 分钟
unstate-next 的使用
Code-Test
·约 1 分钟
Fiber 架构工作原理
“双缓存” 是一种常见的图形处理技术,用于在图像渲染中实现平滑的、无闪烁的更新效果。它通过使用两个缓冲区(即两块内存区域)来完成。其中一个缓冲区用于显示图像,而另一个缓冲区则用于在后台进行图像的更新和
·约 3 分钟
Fiber 架构实现流程
Fiber 架构是 React 中用于实现虚拟 DOM 的一种算法架构。它的目标是提高渲染性能和用户体验,通过将渲染工作分割成多个小任务,在不阻塞主线程的情况下逐步完成整个渲染过程。
·约 1 分钟
Fiber 架构的起源
Fiber 架构的起源可以追溯到 React 团队在 2017 年提出的一项重大改进计划。在过去的 React 版本中,渲染过程是基于递归的,即组件树的遍历是通过递归函数来完成的。这种方式在大规模复杂
·约 3 分钟
FiberNode 结构解析
FiberNode(也称为 Fiber 节点)是 React Fiber 架构中的核心概念之一,用于表示组件的层级结构和渲染过程中的任务。
·约 2 分钟
React 获取服务器端时间
思路 :React 获取服务器端时间,本质上就是给服务器端发送一个请求,然后从返回数据里面的 headers 里面获取到服务器 date,然后更新服务器时间去格式化,获取服务器时间结束。按秒进行数据
·约 1 分钟
React 使用合成事件(SyntheticEvent)
React 使用合成事件(SyntheticEvent)来处理浏览器原生事件的跨浏览器兼容性问题。合成事件是一个封装了原生事件的对象,提供了一致的跨浏览器接口,使您能够在不同浏览器中以一致的方式处理事
·约 2 分钟