大家好，我卡颂。请思考一个问题：如果有一个HTML标签，React围绕他专门出了2个hook，那这个标签对React未来的发展一定非常重要，这没毛病吧？这个标签就是 ——form。React围绕form新出了如下2个hook：useOptimisticuseFormStatus本文会聊聊React围绕form的布局与发展。欢迎加入人类高质量前端交流群，带飞Next.js的发展历程说到React未来的发展，必须从Next.js聊起。毕竟，React团队成员不是加入Next团队，就是在加入的路上。web开发中涉及到前后端交互的部分主要包括：根据后端数据渲染前端页面根据前端用户输入保存数据到后端Next.js的发展主要围绕以上两点展开。根据后端数据渲染前端页面前期，Next.js的主打特性是SSR、SSG。也就是把根据后端数据渲染前端页面的过程从前端挪到后端。这个时期的Next.js路由被称为Pages Router。时间来到Next.js v13，以RSC（React Server Component）为核心的App Router取代Pages Router成为默认配置。很多朋友不熟悉RSC，认为他是实验特性。实际上，RSC借由Next.js已经落地了。一句话理解RSC—— 客户端组件（在浏览器渲染的React组件）可以根据依赖分为两部分：依赖数据源（比如数据库、文件系统）的组件，可以 ...继续阅读 (40)

react 18 新增了启发式的并发渲染机制，副作用函数会因为组件重渲染可能调用多次，为了帮助用户理清正确的副作用使用方式，在开发模式启用StrictMode时，会刻意的故意调用两次副作用函数，来达到走查用户逻辑的效果，但此举也给部分升级用户带来了困扰，本文将讨论helux如何规避此问题。helux 简介helux是一个主打轻量、高性能、0成本接入的react状态库，你的应用仅需替换useState为useShared，然后就可以在其他代码一行都不用修改的情况下达到提升react局部状态为全局共享状态的效果，可访问此在线示例了解更多。import React from 'react'; + import { createShared, useShared } from 'helux'; + const { state: sharedObj } = createShared({a:100, b:2}); function HelloHelux(props: any) { - const [state, setState] = React.useState({ a: 100, b: 2 }); + const [state, setState] = useShared(sharedObj); // 当前组件仅依赖a变更才触发重渲染 // helux会动态收集当前组件 ...继续阅读 (44)

大家好，我是沐华。最近部门招人，捞了一批简历至少都是5年以上的前端来面试，其中不乏360的，腾讯的，简历上写的基本都是熟练使用Vue2、Vue3、React并阅读源码对其实现原理有自己的理解，实际问起来却不免让人唏嘘比如：既然两个框架都用过，那能说一下你觉得这俩有什么区别吗？毕竟是两个框架，不像两个API，要说细节上的区别就太多太多了，可能能聊几个小时都聊不完，所以你给自己的定位是什么呢？说说 Vue 和 React 的区别青铜级只要真正了解一些，或者用过两个框架开发，就一定能说上来的一些语法层面：Vue API多，React API少Vue双向绑定，修改数据自动更新视图，而React单向数据流，需要手动setStateVue template结构表现分离，React用jsx结构表现融合，html/css都可以写到js里都可以通过props进行父子组件数据传递，只是Vue props要声明，React不用声明可能直接使用Vue可以用插槽，React是万物皆可propsVue2利用基本都是Mixin，React可以用高阶函数、自定义hook实现Vue的frgments、hook到Vue3才有，Vue还有丰富的指令，过滤器都支持服务端渲染，都有虚拟DOM，数据驱动，组件化开发，响应式，组件通信，生命周期，Diff，都有状态管理Vuex/Pinia、Redux/Mobx，等等等等.... ...继续阅读 (33)

在线演示 立刻下载 THEME OVERVIEW Welcome to our React Creative Agency, React Portfolio and Corporate Multi-P...阅读更多 ...继续阅读 (27)

大家好，我卡颂。有一句话相信大家都听过：取代泡面的，并不是更高级的泡面，而是外卖的兴起在前端领域，也存在同样的现象。作为前端缓存库中的佼佼者，React-Query一直拥有大量受众，官方推出的React-Query课程都卖出了8w+份。但就是这样一款能打的产品，居然有被淘汰的风险，这究竟是为什么？本文参考了文章You Might Not Need React Query欢迎加入人类高质量前端交流群，带飞前端缓存库的本质React-Query的定位是前端缓存库。如果从前端的视角来理解这个库，可能会认为它是axios加强版。但要理解这个库的本质，其实需要我们从后端的视角出发。在后端看来，后端负责提供数据，前端负责展示数据，那么：数据更新后，前端应该如何渲染？数据失效后，前端应该如何渲染？本质来说，这是个数据/缓存同步的问题，只不过在SPA时代，这个问题刚好交给前端解决而已。但是，后端天生离数据更近，解决这个问题更有优势。所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。SSR技术的更迭这里说的渲染任务逐渐移向后端就是指SSR（服务端渲染）。但是，SSR出现很多年了，为什么之前没有说要取代React-Query？这是因为，传统的SSR主要应用在数据的首屏渲染。当首屏渲染 ...继续阅读 (41)

在线演示 立刻下载 Multikart – Responsive React Ecommerce Template Note:IMPORTANT:It’s built with...阅读更多 ...继续阅读 (19)

在线演示 立刻下载 EasyDev is a dashboard template based on React Components and Bootstrap 5 Framework. It is...阅读更多 ...继续阅读 (17)

在线演示 立刻下载 THEME OVERVIEW Welcome to our React Creative Agency, React Portfolio and Corporate Multi-P...阅读更多 ...继续阅读 (17)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1.Github Desktop 汉化 https://github.com/robotze/GithubDesktopZhTool https://desktop.github.com/ Github Desktop 汉化工具 支持 Windows Mac Linux 2.ByteMD https://github.com/bytedance/bytemd ByteMD 是一个使用 Svelte 构建的 Markdown 编辑器组件。它还可以用于其他库/框架，例如 React、Vue 和 Angular。 目前掘金社区使用的就是这款编辑器。 ...继续阅读 (40)

在线演示 立刻下载 Criptic is a Web3 NFT Crypto Dashboard Template built with `React`, `NextJS`, `TypeScript`...阅读更多 ...继续阅读 (8)

在线演示 立刻下载 Modern Multi-Purpose Responsive React JS Template Keystroke is a modern Responsive Multi-P...阅读更多 ...继续阅读 (9)

在线演示 立刻下载 A creative React JS template for startups, digital agencies, and creative professionals Ab...阅读更多 ...继续阅读 (6)

在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。 ...继续阅读 (42)

在线演示 立刻下载 Our latest release Interactive Agency Its a modern design with all related features for cr...阅读更多 ...继续阅读 (16)

考研总算落下帷幕，已顺利上岸，终于有时间来水文了。这是一篇科普文章，聊一聊MDX格式。如果不出意外，在最新版的Cuteen主题中(Cuteen6.x系列)，将会天然支持这种格式，以取代不够灵活的短代码。什么是MDX格式MDX是一种结合了Markdown语法和React组件的格式，可以让您在Markdown文档中使用React组件。MDX的全称是Markdown + JSX，是一种使用JavaScript语法编写的Markdown扩展语法。MDX格式的文档可以被解析成React组件，这意味着您可以在Markdown文档中使用JSX语法来编写交互式的组件，例如表单、按钮、动画等。同时，MDX也支持Markdown的常用语法，如标题、列表、链接等，因此可以方便地编写文档和博客文章。以上内容来自官网：https://mdxjs.com/MDX的特点支持Markdown语法和JSX语法：MDX可以在Markdown文档中使用JSX语法，例如React组件、变量、循环等，同时也支持Markdown的常用语法，如标题、列表、链接等。可以使用所有的React组件：MDX支持使用所有的React组件，包括第三方组件库中的组件，因此可以方便地创建交互式的文档和博客文章。可以使用动态数据：MDX可以使用JavaScript语法来处理动态数据，例如从API获取数据并在文档中显示。可以使用MDX工具链：MD ...继续阅读 (52)

在线演示 立刻下载 Mitra – Personal Portfolio React/NextJS Template Mitra – is a multi-purpose, g...阅读更多 ...继续阅读 (9)

在线演示 立刻下载 Bigdeal – eCommerce HTML Template Bigdeal Ecommerce Theme Endless Features 6+ Multi-...阅读更多 ...继续阅读 (10)

大家好，我卡颂。React的代码量可以说是相当庞大。在如此庞大的库中是否存在文档中未提及，但是实际存在的功能呢？答案是肯定的。本文将向你介绍3个文档中未提及的隐藏彩蛋功能。欢迎加入人类高质量前端交流群，带飞ref cleanup在当前React中，Ref存在两种数据结构：(instance: T) => void{current: T}对于大部分需求，我们会使用第二种数据结构。同时，他也是useRef、createRef返回的数据结构。第一种数据结构主要用于DOM监控，比如在下面的例子中，div的尺寸会反映到height状态中：function MeasureExample() { const [height, setHeight] = useState(0); const measuredRef = useCallback(node => { if (node !== null) { setHeight(node.getBoundingClientRect().height); } }, []); return (Hello 卡颂); }但在上面的例子中，DOM的尺寸变化无法实时反映到height状态。为了反映实时变化，需要使用监控DOM的原生API，比如：ResizeObserver，监控DOM尺寸变化IntersectionOb ...继续阅读 (40)

在线演示 立刻下载 ------------------------------------------- Latest Version 1.1.0 - 01 March 2023 ---------...阅读更多 ...继续阅读 (8)

前年年底一时兴起，我开始尝试 React。从《手动搭建基于 Webpack 的 React 项目开发环境》这篇文章起，我逐渐把手头的个人项目都迁移到了 React。一年多过去了，我决定回到 Vue。 ...继续阅读 (62)

在线演示 立刻下载 Appexy – Responsive Landing Page Template built with ReactJS and the most popular fr...阅读更多 ...继续阅读 (21)

大家好，我卡颂。当一个React应用逻辑变得复杂后，组件render花费的时间会显著增长。如果从组件render到视图渲染期间消耗的时间过长，用户就会感知到页面卡顿。为了解决这个问题，有两个方法：让组件render的过程从同步变为异步，这样render过程页面不会卡死。这就是并发更新的原理减少需要render的组件数量，这就是常说的React性能优化通常，对于不同类型组件，我们会采取以上不同的方法。比如，对于下面这样的有耗时逻辑的输入框，方法1更合适（因为并发更新能减少输入时的卡顿）：function ExpensiveInput({onChange, value}) { // 耗时的操作 const cur = performance.now(); while (performance.now() - cur < 20) {} return; }那么，能不能在整个应用层面同时兼顾这2种方式呢？答案是 —— 不太行。这是因为，对于复杂应用，并发更新与性能优化通常是相悖的。就是本文要聊的 —— 并发悖论。欢迎加入人类高质量前端交流群，带飞从性能优化聊起对于一个组件，如果希望他非必要时不render，需要达到的基本条件是：props的引用不变。比如，下面代码中Child组件依赖fn props，由于fn是内联形式，所以每次App组件render时引用都会变，不利于Ch ...继续阅读 (42)

在线演示 立刻下载 Fastone – is a multi-purpose, gorgeous, and creative portfolio ReactJS template with...阅读更多 ...继续阅读 (12)

在线演示 立刻下载 Atena – Personal Portfolio React/NextJS Template Atena – is a multi-purpose, g...阅读更多 ...继续阅读 (10)

在线演示 立刻下载 Minimau – React Portfolio Template Minimau – React Minimal Portfolio Template ...阅读更多 ...继续阅读 (11)

前言先解释一下标题。 Ant Design 大家应该非常熟悉了，但是 React Hook Form 可能在国内并没有那么火。尽管 Ant Design 拥有自己的Form组件，不过 React Hook Form 也有其优势：强性能，减少渲染次数轻量无依赖类型安全支持多种验证库校验（如 Zod、Yup、Class Validator、Ajv 等等）支持多种 UI 库GitHub（3w+⭐）：https://github.com/react-hook-form/react-hook-form官网：https://react-hook-form.com从功能上来说，其比 Ant Design 的Form.useForm要强大不少。但是 Ant Design 目前并没有官方支持 React Hook Form。解决为了解决在 Ant Design 中使用 React Hook Form。我为此写了一个开源库来包装 Ant Design 的Form.ItemGitHub:https://github.com/jsun969/react-hook-form-antd示例CodeSandbox 示例其中使用了 Zod 进行表单校验使用原表单首先，你可能原来有这样一个表单Remember meSubmit使用 React Hook Form使用 React Hook Form 的useForm ...继续阅读 (14)

在线演示 立刻下载 Vristo – Multipurpose Tailwind CSS Admin Template Vristo – Multipurpose Tailwi...阅读更多 ...继续阅读 (7)

本文对应的react版本是18.2.0下面的dom结构react内部是如何遍历的const App = () => { return (+1); }; const A = (props) => { useEffect(() => { console.log(props.count); }, [props.count]); return{props.count}; };react内部遍历核心逻辑：在render时调用commitPassiveUnmountOnFiber函数commitPassiveUnmountOnFiber处理不同的WorkTag，并调用recursivelyTraversePassiveUnmountEffectsrecursivelyTraversePassiveUnmountEffects根据当前Fiber的子节点有没有passive effect（useEffect，useLayoutEffect）来决定是否遍历当前Fiber的子节点如果子节点有passive effect，则优先遍历子节点 (深度优先)，直到找到最终的叶子节点，退出当前循环然后进入兄弟节点，开始遍历兄弟节点的子节点具体从哪个兄弟节点开始遍历，react选择的是离退出循环的那个叶子节点的父节点，检查有没有子节点，以此循环遍历直到最后找到所有有passive effe ...继续阅读 (31)

在线演示 立刻下载 MedUX is a powerful all-encompassing Medical Dashboard UI Kit built on pure React. It is p...阅读更多 ...继续阅读 (9)

在线演示 立刻下载 Alexio – Personal Portfolio Template is a highly creative, modern, visually stunning...阅读更多 ...继续阅读 (7)