1 天前 / 九彩拼盘
视频课程 (opens new window)Vue 技术揭秘 (opens new window)点亮不迷路 (opens new window)前言导学视频章节说明章节列表理念篇 架构篇 实现篇 本书的宗旨是打造一本严谨、易懂的 React 源码分析教程。 为了达到这个目标，在行文上，本书会遵循： 不预设观点 —— 所有观点来自 React 核心团队成员在公开场合的分享。 丰富的参考资料 —— 包括在线 Demo、文章、视频。 保持更新 —— 在 React 版本更新后会及时补充。当前版本 v17.0.0-alpha。
3 天前 / 九彩拼盘
点击上方“魔术师卡颂”，选择“设为星标” 专注 React，学不会你打我！ 这篇文章包括如下内容： 简要回顾下 React 从 16～21 年的迭代历程 React 为什么对新特性（Concurrent Mode）有这么大执念 为什么当前社区项目 / 库要升级到 Concurrent Mode 比较困难 迭代历程回顾 React Core Team 从 16 年开始改造 React 的核心模块 Reconciler（diff 算法会在该模块执行）。 经过一年多的改造，将其从流程不可中断的「递归实现」（被称为 Stack Reconciler）改为流程可中断的「遍历实现」（被称为 Fiber Reconciler）。
26 天前 / Dunizb
原文：https://blog.logrocket.com/dexie-js-indexeddb-react-apps-offline-data-storage/ 作者：Ebenezer Don 离线存储应用程序数据已成为现代 Web 开发中的必要条件。内置的浏览器 localStorage 可以用作简单轻量数据的数据存储，但是在结构化数据或存储大量数据方面却不足。 最重要的是，我们只能将字符串数据存储在受 XSS 攻击的 localStorage 中，并且它没有提供很多查询数据的功能。 这就是 IndexedDB 的亮点。使用 IndexedDB，我们可以在浏览器中创建结构化的数据库，将几乎所有内容存储在这些数据库中，并对数据执行各种类型的查询。
38 天前 / 太空编程
目录函数组件 (Function component)属性解构 (Destructuring props)JSX 中的属性展开 (JSX spread attributes)合并解构属性和其它值 (Merge destructured props with other values)条件渲染 (Conditional rendering)子元素类型 (Children types)数组做为子元素 (Array as children)函数做为子元素 (Function as children)渲染属性 (Render prop)子组件的传递 (Children pass-through)代理组件 (Proxy component)样式组件 (Style component)组织事件 (Event switch)布局组件 (Layout component)容器组件 (Container component)高阶组件 (Higher-order compo...
40 天前 / 西岭老湿
首发于西岭老湿写文章 React 面试筹备不完全指南西岭老湿一个普通文艺码农 1 人赞同了该文章知乎编辑器，全网最烂…… 开篇我们今天主要讲解的内容就是关于 React 面试相关的，我相信你在面试中，也会被问到各种各样的非常多的问题，我举几个例子你看看，在自己心里想一想，你会怎么回答？ 为什么 React 选择使用 JSX ？ JSX 映射虚拟 Dom 的原理 setState 到底是同步的，还是异步的？ 如何面向组件跨层级通信？ 聊聊 Redux 和 Vuex 的设计思想有什么不同和相同之处？ React 事件与 DOM 事件有什么区别？ 为什么 React 要加入 Hook 说一下你对 diff 算法...
45 天前 / 阿伟
写文章前端测试心法 + React 组件测试实践阿伟身在高楼心在北大荒，我就这副死样～4 人赞同了该文章说来惭愧，从事前端开发多年，也开源过不少项目，然而却从未做过测试工作。内心抵触的原因大概是： 我的代码不需要测试！（手动狗头测试用例写起来太麻烦了没想清楚前端的测试用例到底该测啥不清楚组件测试该怎么做（技术栈太复杂）随着这些年打工搬砖的积累，以上问题已逐渐有了模糊的答案。再加上随后需要做一个正经的开源项目了，如果还是没有完备的测试实在是没有排面。
67 天前 / 太空编程
公众号关注“太空编程”设为 “星标”，带你了解硬核的编程知识！ 众所周知，Tailwind CSS 框架越来越流行，所以我决定尝试学习并使用 Tailwind CSS 来搭建一个项目模板，一方面自己深入学习下，二来帮助新人更快地上手 Tailwind CSS 开发。 创建一个 React 项目通过使用 create-react-app 命令创建一个新的 React 项目 npxcreate-react-appcra-tailwind-template cdcra-tailwind-template 如果没有安装过 create-react-app 包，会先安装包，输入 yes 直接安装 这样就成功创建了一个 React 项目模板...
69 天前 / 冷星1024
点上方蓝字关注公众号「前端从进阶到入院」 精选原创好文、进阶交流群助你进入大厂 前言 最近在业务的开发中，业务方需要我们性能监控平台提供火焰图来展示函数堆栈以及相关的耗时信息。 根据 Brendan Gregg 在 FlameGraph[1] 主页中的定义： Flame graphs are a visualization of profiled software, allowing the most frequent code-paths to be identified quickly and accurately 火焰图是一种可视化分析软件，让我们可以快速准确的发现调用频繁的函数堆栈。 可以在这里查看火焰图的示例 [2]。
77 天前 / Ryan众乐
首发于 React 的秘密写文章一篇长文帮你彻底搞懂 React 的调度机制原理 Nero 公众号 一口一个前端 14 人赞同了该文章点击进入 React 源码调试仓库。 Scheduler 作为一个独立的包，可以独自承担起任务调度的职责，你只需要将任务和任务的优先级交给它，它就可以帮你管理任务，安排任务的执行。这就是 React 和 Scheduler 配合工作的模式。 对于多个任务，它会先执行优先级高的。聚焦到单个任务的执行上，会被 Scheduler 有节制地去执行。换句话说，线程只有一个，它不会一直占用着线程去执行任务。而是执行一会，中断一下，如此往复。
82 天前 / 公子
奇虎科技有限公司 前端工程师 9 人赞同了该文章前段时间 React 团队发布了一项用于解决 React 页面在多接口请求下的性能问题的解决方案 React Server Components。当然该方案目前还在草案阶段，官方也只是发了视频和一个示例 demo 来说明这个草案。 Server Components 官方在视频和 RFC 中说明了产生这个方案的主要原因是因为大量的 React 组件依赖数据请求才能做渲染。如果每个组件自己去请求数据的话会出现子组件要等父组件数据请求完成渲染子组件的时候才会开始去请求子组件的数据，也就是官方所谓的 WaterFall 数据请求队列的问题。
84 天前 / 太空编程
以上是将要实现的效果，Javascript 框架 React 的 Logo 图形，首先我们来拆解下，它包括三个交叉的椭圆和中间一个圆点，所以我们 Html 元素可以用以下代码实现： 整个 logo 图形的外层以 main 类包裹，里面的 ellipse 类元素表示椭圆，最下面的类名 ball 表示中间的圆点 首先我们让整个 logo 图形水平垂直居中 .main { height: 100vh; display: flex; justify-content: center;align-items:center;position: relative;} 然后我们给类名 ellipse 元素（及椭圆）添加样式...
89 天前 / Ryan众乐
写文章 Rxjs + React 实战，看完你就知道为什么说 angular 在 5 年后等你 buhi 全不栈程序员 53 人赞同了该文章 rxjs 相信大家都听说过， 没听说过的可以看看他们官网， 是一个响应式编程的库， Rxjs 跟 react 结合来用的人就比较少了， 这里专门用一个例子来举例看看如何使用 rxjs 替代 redux 此类的状态管理库来充当 react 等框架的 model 层。 下面假设读者具有了 rxjs 的基础知识， 对最基础的 API, 例如 subscribe 和 unsubscribe 不做特别介绍。
90 天前 / Ryan众乐
首发于前端备忘录写文章 React 下 DDD 的威力江湖术士埋头搞事中 104 人赞同了该文章总结一下 DDD 下，React 在解决各项问题时的威力： 组件状态保持 Vue 有 keep-alive 用来保持组件状态，用起来还挺舒服的 但是要加个前提 —— 在没有逻辑复用的情况下，用起来挺舒服的 在有逻辑复用的情况下 —— 组件状态保持不是一个问题 为什么？组件逻辑服务单例声明在 条件渲染 之前，状态必然保持 因为不是个问题，所以根本不用讨论，对这个问题说 byebye 吧~ 动画还在想动画的事情？还在选适合自己的动画插件？ 没有必要啦 我们来看看看看，搭配 anime.js ...
93 天前 / Dunizb
什么是 AnimXYZ？ AnimXYZ 是一个 CSS 动画库，用于为你的网站创建自定义 CSS 动画。是什么让 AnimXYZ 如此之好，它是可组合的，这意味着你可以组合和混合不同的动画来创建自己的高度可定制的 CSS 动画，而无需编写一个单一的关键帧。 制作动画就像用文字描述一样简单 例如，你可以通过编写 xyz = "fade big up" 来创建动画，该动画可以使用 AnimXYZ 淡入淡出，按比例放大和向上移动。 AnimXYZ 还有一个小软件包，基本功能是 2.68kb，如果包含方便的实用程序，则是 11.4kb。
96 天前 / Ryan众乐
首发于前端备忘录写文章 React 下，谈谈编程范式江湖术士控制自己，少点发言，越学越觉得自己菜 57 人赞同了该文章大家经常听到 React 环境下，对 函数式，面向对象 等 编程范式 的阐述 但却很少有文章结合 React 特殊语境，对这两个范式进行详细说明，因此，写这篇文章，帮助大家形成 共同语言 首先，编程范式除了实现方式不同以外，其区别的根源在于 —— 关注点不同函数的关注点在于 —— 变化面向对象的关注点在于 —— 结构对于函数，因为结构方便于处理变化，即输入输出是天然关注点...