大家好，我卡颂。最近Next.js v14发布，发布会的各种梗图刷爆了国外前端社区。Next.js的诸多特性（比如Server Action、App Router），都是在RSC（React Server Component）基础上衍生出的。从名字可以看出，RSC是React的特性。那么，该怎么理解RSC和Next.js的关系呢？欢迎围观朋友圈、加入人类高质量前端交流群，带飞React团队的宿愿对于前端框架的开发范式，有三个重要衡量因素：用户体验维护成本性能但是，通常很难做到三者兼顾（具体原因本文不细究，感兴趣的同学可以看data-fetching-with-react-server-components。简单来说，在前端开发中，IO瓶颈是影响内容渲染速度的重要因素（可以简单理解为，前端需要等待请求返回数据后，再根据数据渲染内容，这期间延迟的时间就是IO瓶颈）。但是，前端框架能够掌控的范围局限在前端，所以无法对IO瓶颈做出极致优化，只能在三个因素中做出取舍（比如考虑用户体验与性能时，代码维护成本就高）。React团队为了同时兼顾三者，需要对服务端拥有更多掌控。这就是RSC诞生的初衷。但是，大部分React的受众只是把React当作前端view库，并不会直接使用RSC相关功能，所以React团队选择和Next.js团队合作，落地RSC。此时我们发现，React有三类受众：普通前端开发 ...继续阅读 (53)

JHipster 是一个开发平台，可以快速生成，开发和部署现代 Web 应用程序+微服务架构。 JHipster 或者称 Java Hipster，是一个应用代码产生器，能够创建 Spring Boot/Spring Cloud + React/VueJs/AngularJS 的应用。使用 JHipster，首先你要配置好 Java 、Git 以及 Maven 或者 Gradle 的环境， … ...继续阅读 (56)

大家好，我卡颂。在 2 年前的React Conf 2021，黄玄第一次介绍了React Forget，这是个可以生成等效于 useMemo、React.memo的编译器（可以简单理解为，有了它，开发者不需要考虑React项目的性能优化了）。由于React独特的架构（全局更新），React 性能优化一直让开发者头疼，这里主要有两个问题：很多开发者不知道如何正确使用性能优化API，甚至有人认为FC（函数组件）中所有函数都应该包裹在useCallback中即使写出性能优秀的项目，随着需求迭代，新增的代码很可能破坏之前的优化效果所以，React Forget的愿景一经宣传，就受到社区极大的关注。从React Conf 2021油管播放量来看，React Forget演讲占了所有 19 个演讲总播放量的 1/4（当然，也可能是因为黄玄长得帅）。现在2年过去了，我们很少听到React Forget的进展，黄玄也离开React 团队了。这让我们不禁要问，React Forget凉了么？本文会聊聊React Forget当前的进展、接下来的发展方向，以及他的工作原理。欢迎围观朋友圈、加入人类高质量前端交流群，带飞React Forget 凉了么？首先要明确的是，React Forget并没有凉，相反，他正在稳定迭代。根据React团队成员Mofei Zhang在React Advanced Lo ...继续阅读 (78)

概述在重庆前端大会上的一个分享，对象为 React/Vue 出来之后的新一代前端开发者，在造轮子时代已经过去、国内前端环境很卷的情况下，前端工程师的成长路径相比之前要难不少，在这些困境下，分享如何以一种新的方式破局，用前端技术去真正解决业务难题，提升产品工程师实力，让自己以最不卷的方式成长起来。观点只代表个人也不一定对，随便看看，PDF 文件以及分享视频在底部。内容更多PDF文件B站视频 ...继续阅读 (51)

每周分享本周我看到的,听到的,有趣的,有意思的,有用的信息给大家,如果你感兴趣,欢迎订阅RSS.科技新禁令对华禁售 4090路透社报道，美国拜登政府周二表示，计划停止向中国出口 Nvidia(辉达/英伟达) NVDA.O 设计的更先进的人工智能(AI)芯片，这是旨在进一步限制北京获取尖端技术加强其军事力量的一系列措施的一部分。为绕过美国政府的出口限制，Nvidia 针对中国市场推出 A800 和 H800 等芯片。同样受到规定影响的 AMD(超威/超微)AMD.O 也表示，计划采取类似的策略。Nvidia 的 A800 和 H800 芯片将受到新规定的影响，因为芯片参数发生了变化旨在涵盖更广泛的芯片。英伟达在提交的文件中表示，其为中国市场创造的两款经过修改的先进 AI 芯片 - A800 和 H800 - 都是为遵守以前的出口规则而制造的，将根据新规则被禁止销售。该公司表示，该公司的顶级游戏芯片之一将受到限制，该公司在八月份宣布的 L40S 芯片也将受到限制。原文在这里.未来更多的都是这种科技战,希望国内的企业能发力在芯片行业,芯片行业才是尖端科技,别盯着团购,直播,短视频带货,快递之类的了.这些行业已经饱和了,是时候搞搞高端科技了.工信部：无线局域网设备核准开展 IPv6 能力测试，12 月起施行《通知》要求，生产或者进口在我国境内销售、使用的 IPv6 无线局域网设备，须按照有 ...继续阅读 (28)

大家好，我卡颂。你是否好奇 ——codesandbox是如何在线运行代码的？要回答这个问题，我们先看看前端项目是如何在本地跑起来的。简单来说分为3步：执行npm install安装依赖使用打包工具（比如webpack）打包、编译代码（如果使用Vite会省去打包的步骤，但会执行预构建）将步骤2的产物通过script标签注入页面codesandbox能在线运行代码，显然他也实现了上述步骤，具体来说，codesandbox内置了2个在线服务：npm解析服务 —— 用于实现上述步骤1在线打包服务 —— 用于实现上述步骤2、3本文我们来聊聊如何实现并部署自己的npm解析服务。欢迎围观朋友圈、加入人类高质量前端交流群，带飞codesandbox简要工作原理下面是一个常见的codesandbox界面，包含两部分：左边的文件系统、代码编辑器右边的效果预览区域其中效果预览区域是一个iframe，对于上图中的例子，iframe的地址是https://pjdp86.csb.app/。如果你打开这个地址，会发现他就是代码的预览效果：但这并不意味着codesandbox帮我们部署了项目。实际上，这个地址中前端代码是在页面打开后再编译、打包的。打开codesandbox项目时经常看到的下述界面，就是前端编译代码的画面：具体来说，当我们打开一个codesandbox项目，iframe对应地址初始化时，会执行如下 ...继续阅读 (58)

以下是一个简单的 React 组件示例，它实现了一个打字机效果，可以传入文本和时间参数来控制文本的显示速度：import React, { useState, useEffect } from 'react'; function Typewriter({ text, typingSpeed }) { const [displayText, setDisplayText] = useState(''); const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { if (currentIndex < text.length) { setDisplayText((prevText) => prevText + text[currentIndex]); setCurrentIndex((prevIndex) => prevIndex + 1); } else { clearInterval(interval); } }, typingSpeed); return () = ...继续阅读 (50)

Signals 在目前前端框架的选型中遥遥领先！国庆节前最后一周在 Code Review 新同学的 React 代码，发现他想通过 memo 和 useCallback 只渲染被修改的子组件部分。事实上该功能在 React 中是难以做到的。因为 React 状态变化后，会重新执行 render 函数。也就是在组件中调用 setState 之后，整个函数将会重新执行一次。React 本身做不到。但是基于 Signals 的框架却不会这样，它通过自动状态绑定和依赖跟踪使得当前状态变化后仅仅只会重新执行用到该状态代码块。个人当时没有过多的解释这个问题，只是匆匆解释了一下 React 的渲染机制。在这里做一个 Signals 的梳理。优势对比 React，基于 Signals 的框架状态响应粒度非常细。这里以 Solid 为例：import { createSignal, onCleanup } from "solid-js"; const CountingComponent = () => { // 创建一个 signal const [count, setCount] = createSignal(0); // 创建一个 signal const [count2] = createSignal(666); // 每一秒递增 1 const interva ...继续阅读 (62)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/156将近一个月没有更新生活相关相关的文章了。主要是最近也没有什么新鲜事，分享欲也不是很大。一次 City Walk 和过夜体验9 月的时候，又去了一次上海，和朋友在上海进行了一次 city walk，晚上和几位大佬在电竞酒店过了一夜。上图是傍晚时分，在南码头渡口附近。电竞酒店忘了拍照留念，上下铺的感觉仿佛回到了大学时期。Shenqingchuan2beelin精力好足，战到深夜两三点。第二天，一起去吃了个午饭之后，开始往西走。下午，和zhangmo8面基，然后在一家咖啡馆，一起探讨 NeoVim 相关话题。zhangmo8国庆假期要结婚了，给我们送了喜糖。不知道我何时才能有甜甜的爱情呢。兴趣养成 - 🎹也许是从进入云村开始，接触到了各种的纯音乐。从高中被人安利网易云，便进入到了钢琴曲的时间，从刚开始的日本 DJ 的 luv letter 和 flower dance，到韩国的 July 的 my soul 等等，到后来国人作曲家邱有句。我很非常喜欢这些钢琴曲，也是这样结下了缘吧。可我没有一点基础。也许，现在有时间去弥补一些曾经的遗憾，没有接触过乐器。入手了贝琪的电钢，购买了 Simply piano 一年订阅，每天没事的时候学一学，目前也没有报班，后续再看吧。设备换 ...继续阅读 (82)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/nestjs-with-trpc-and-dependency-injection最近在重写一个 NestJS 的项目，想着这么集成下 tRPC 供管理面板前端使用。原本在管理面板都是裸写的 API 接口，也没有任何响应类型。如果使用 tRPC 的话，不仅不用手写 API 还能做到 End-to-End Type-safe.tRPC 是什么RPC 是指远程过程调用 (Remote procedure call)，tRPC 的t强调了 TypeScript 的实现，利用了 TypeScript 的类型系统实现了在客户端与服务端之间的通信过程并提供高效的类型安全。tRPC 一般在全栈框架中用的比较多，比如 Next.js。况且在 Next.js 推广 App Router 之后，类似 RPC 的方式也会变得比较流行，可以省去很多麻烦。NestJS 接入 tRPCNestJS 接入 tRPC 的方式非常简单。和普通服务端接入类似。下面都以fastify作为 NestJS 应用的适配器实现。NestJS 本身是一个抽象层，我们可以获取到源服务器的实例，这里是fastify。按照 tRPC 的文档，我们对fastify实例注入插件的形式来完成 tRPC ...继续阅读 (77)

在 React 中，您可以使用多种方法来初始化一个应用程序。以下是几种常见的方法： 使用 Create React App（CRA）。Create React App 是一个官方提供的脚手架工具，用于快速创建 React 应用程序的基本结构和配置。 使用 Vite。Vite 是一个快速、简单且现代化的前端构建工具。 create-react-app create-react-app 是一个用于快速 … ...继续阅读 (49)

前言在B/S架构中，服务端导出是一种高效的方式。它将导出的逻辑放在服务端，前端仅需发起请求即可。通过在服务端完成导出后，前端再下载文件完成整个导出过程。服务端导出具有许多优点，如数据安全、适用于大规模数据场景以及不受前端性能影响等。本文将使用前端框架React和服务端框架Spring Boot搭建一个演示的Demo，展示如何在服务端导出Excel和PDF文件。当然，对于前端框架，如Vue、Angular等也可以采用类似的原理来实现相同的功能。在服务端导出过程中，需要依赖额外的组件来处理Excel和PDF文件。对于Excel相关操作，可以选择POI库，而对于PDF文件，可以选择IText库。为了方便起见，本方案选择了GcExcel，它原生支持Excel、PDF、HTML和图片等多种格式的导出功能。这样一来，在实现导出功能的同时，也提供了更多的灵活性和互操作性。实践本文将演示如何创建一个简单的表单，其中包括姓名和电子邮箱字段，这些字段将作为导出数据。同时，前端将提供一个下拉选择器和一个导出按钮，通过下拉选择器选择导出的格式，然后点击导出按钮发送请求。等待服务端处理完成后，前端将下载导出的文件。在服务端，我们需要实现相应的API来处理提交数据的请求和导出请求。我们可以定义一个对象，在内存中保存提交的数据。然后利用GcExcel库构建Excel对象，并将数据导出为不同的格式。前端 Reac ...继续阅读 (62)

这两天，尤大在他的微博表示，他打算开启国内开源捐赠计划，截止本文发帖为止，已经有 6k / 月的固定充电了。这个数额目前还是比较小的，企业级别的 sponsor 应该还没有出现，光靠个人捐赠的话这点钱真的完全不够团队开销的。正巧我看到了 Ink 作者的一篇文章，讲述他在开源软件如何稳定搞钱这方面的思考，觉得他的很多观点非常犀利，值得各位前端开发者同学一起学习，毕竟大家未来可能有搞开源的一天。 接下来是他的这篇Generating income from open source的内容：最近，Ink的知名度越来越高，并且已经被一些知名公司使用了一段时间。然而，与大多数其他开源项目一样，Ink没有任何收入。我开始研究各种选项，以改变这种情况，并以某种方式开始收费，这样它就可以支持我以及 Ink 和相关项目（如Ink UI和Pastel） 的进一步开发。本文是我在这个主题上所学到的内容的简要版本。不起作用的方法以下是我认为维护者无法从他们的项目中获得收入的原因。依靠个人捐赠能够有人愿意支持你是很好的，但是每月 5 美元的捐赠无法维持生活。这是社区对你工作的感激的一种方式，但不应被视为稳定的收入来源。除非你是社区中极少数非常受欢迎的开发者之一，否则接受事实，不会有足够多的人订阅每月捐赠。尽管如此，我认为个人捐赠并不是答案。期望公司捐赠你构建了很火的项目，并在生产环境中稳定运行，他们从中获益良 ...继续阅读 (84)

[<前情提要>](http://blog.krimeshu.com/2021/01/17/some-thinking-about-react-hooks-1/)<前情提要/>回顾之前我们学习了useState和useEffect两个基础 React Hook。通过它们，可以实现以前的类组件的大部分功能：属性值传入、自身状态维持、状态更新触发、生命周期回调。并且让你可以：在业务中常见的简单场景下，使用更简单的代码实现组件；通过副作用聚合同一数据在不同生命周期的操作，便于不同组件、项目之间复用。二、不良实践：副作用无限触发一切看起来都很美好，虽然我们基本还不知道这两个 Hook 内部是怎么样神奇的实现了维持状态和生命周期回调，但通过简单的项目 Demo 就能看到它们确实按照我们预期的效果跑起来了。去深挖黑盒的内部构造也是很有意思的，不过现在还为时尚早。为什么？不只是因为还有其它 Hook 没有讲到，而且现有的两个 Hook 我们也没有彻底理解。只需要对之前的 Demo 稍微做一点小修改，出乎你预料的麻烦事就要发生了……1. 无限触发的计数器我们将之前useState的例子做个小改动，将点击计数count改为渲染次数计数renderCount。然后设置一个副作用，不传入依赖数组，使之在每次渲染完成后都执行，执行时将renderCount加一来实现计数功能：12345678910 ...继续阅读 (32)

Vue 3 推出 Composition API 的时候，看到一些表示这和 React Hooks 很像的评论。正好最近有个项目改用了 React 的，于是趁机体验了一下 React Hooks，看看是否真是如此。简介说来惭愧，上次使用 React，还是几年前想在 React 项目里想要实现组件样式作用域，对比和选择css-modules和styled-components方案来着，最终实现体验还是不怎么样，后来大部分项目都是小程序、Vue 和node.js印象就还停留在那个年代。那什么是React Hook呢？官方的介绍如下：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。（来源链接：https://zh-hans.reactjs.org/docs/hooks-custom.html）其中的class指的应该是ES Class也就是类语法，而state应该就是指平时通过setState更新状态来触发重渲染的组件state属性了。并且官方保证它没有破坏性改动：React Hook 是：完全可选的，可以轻松引入。如果你不喜欢，也可以不去学习和使用。100% 向后兼容，React Hook 不会包含任何破坏性改动。现在可用，Hook 已发布于 v16.8.0。第一条说明官方并不强制要求使用 Reac ...继续阅读 (23)

大家好，我卡颂。要说React有什么其他框架没有的、独一无二的特性，那一定是并发更新。围绕并发更新，存在两个很有意思的现象：很多开发者听说过他很少开发者直接使用过他这两个现象看似矛盾，其实很好解释 ——React18之后的新特性，主要是面向上层框架的（主要是Next.js）。换句话说，这些新特性（比如并发更新）主要是供框架集成，而不是开发者直接使用。比如，并发更新的两个核心API——useTransition和useDeferredValue，都是针对视图切换的场景。而在前端交互中，最主要的视图切换场景就是路由切换，所以包含路由功能的前端框架就会集成这两个API。而现在，一个试验性浏览器API——View Transitions API将原生实现视图切换功能。他到底有什么用？如果其他框架使用它，是不是能获得React同样的并发更新能力？欢迎围观朋友圈、加入人类高质量前端交流群，带飞什么是视图切换？不管是View Transitions API，还是React的useTransition，都是为了提高视图切换场景下的用户体验。什么是视图切换？以view-transitions Demo举例。这是个简单的相册Demo，点击左边图片缩略图，右边会显示大图：整个过程简单来说包括3个步骤：点击缩略图请求大图数据大图请求成功后，显示大图从步骤1到3的过程就是个典型的视图切换。整个过程有很多可以 ...继续阅读 (67)

一、概述目前公司产品有关 react 的工具版本普遍较低，其中react router版本为 3.x(是的，没有看错，3.x 的版本，4年前的版本)。而最新的 react router 已经到了 6.x 版本。为了能够跟上路由的脚步，也为了使用 router 相关的 hooks 函数，一次必不可少的升级由此到来！由于 react-touter 6.x 需要依赖react 和 react-dom ，所以我们的项目需要满足以下条件："peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" }目前，react router最新的版本是6.14.0，所以确定使用 react-router-dom: 6.14.0作为目标升级版本。是的，跳过了v4/v5 版本，直接上 v6 一步到位。二、React Router 升级2.1 组件引用在 v6 版本，react router的包可以分为了 3 个包：react-router : 核心包，只提供核心的路由和 hook 函数，不会直接使用react-router-dom ：供浏览器/Web 应用使用的 API。依赖于 react-router， 同时将 react-router 的 API 重新暴露出来react-router-native ：供 React Nat ...继续阅读 (79)

在使用 React 进行开发过程中，或多或少使用过 Refs 进行 DOM 操作或者访问一些DOM上的API，又或使用 Refs 保存数据。不管怎么说 Refs 总是 React 提供的一大助力，这篇文章主要介绍 Refs 功能和使用场景以及注意事项。希望能增强对 Refs 的理解，掌握好这把利剑。什么是 Refs？Refs 是 React 提供的用来保存 object 引用的一个解决方案，在函数式组件使用 useRef 创建一个 ref 对象，ref 对象存在一个可直接修改的 current 属性，内容都是存在 current 上。Refs 使用场景主要分为两个方向，其一是实现 DOM 访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。如果在组件返回的 jsx dom上绑定了 ref 属性，React 在处理 jsx 时会把该dom节点【原生node节点】的引用存储在 ref.current 上。使用方式分为三步：第一步、使用 useRef 创建 ref 对象（useRef是 FC hooks， class 组件使用React.createRef()创建 ）第二步、赋值&使用【操作dom则绑定为dom的ref属性的值，用于保存值的时候传递内容给 ref.current】,第三步、访问ref内容【进行dom对应的api访问，进行 scr ...继续阅读 (68)

大家好，我卡颂。每个框架由于实现原理的区别，都会有些独特的概念。比如：Vue3由于其响应式的实现原理，衍生出ref、reactive等概念Svelte重度依赖自身的编译器，所以衍生出与编译相关的概念（比如其对label标签的创新性使用）在React中，有一个非常容易被误用的API——useEffect，今天要介绍的Effect Event就属于由useEffect衍生出的概念。欢迎围观朋友圈、加入人类高质量前端交流群，带飞被误用的useEffect本文一共会涉及三个概念：Event（事件）Effect（副作用）Effect Event（副作用事件）首先来聊聊Event与Effect。useEffect容易被误用也是因为这两个概念很容易混淆。Event的概念在下面的代码中，点击div会触发点击事件，onClick是点击回调。其中onClick就属于Event：function App() { const [num , update] = useState(0); function onClick() { update(num + 1); } return ({num}) }Event的特点是：是由某些行为触发，而不是状态变化触发的逻辑。比如，在上述代码中，onClick是由点击事件这一行为触发的逻辑，num状态变化不会触发onClick。Effec ...继续阅读 (57)

大家好，我卡颂。遥想前几年，不管是React还是Vue，都在快速迭代版本，以至于很多同学抱怨学不动了。而现在，React已经一年没更新稳定release了。甚至有人认为，这就是前端已死最直接的证据：那么，React最近一年为什么不发版了呢？是因为前端框架领域已经没有新活儿可整了么？React v19是不是遥遥无期了？欢迎围观朋友圈、加入人类高质量前端交流群，带飞最近一年React活跃吗？不想看长文章的同学，这里一句话总结本文观点：React之所以一年没发版，并不是因为无活可整，而是在完成框架从UI库到元框架的转型首先，我们来看看，最近这一年React的更新活跃度是否降低？从代码push量来看，最近一年甚至比release产出较多的前几年更活跃：既然更活跃，那React这段时间到底在做什么呢？从代码增删行数可以一窥端倪，其中：绿色柱状代表代码增加行数红色柱状代表代码减少行数红色折线代表代码行数总体趋势从代码量变化来看，React历史上大体分为四个时期：13年开源，到17年之前的功能迭代期持续到18年的重构期（重构React Fiber架构）18～22年基于Fiber架构的新功能迭代期22年至今的重构期功能迭代期与重构期的区别在于：前者主要是在稳定的架构上迭代新特性后者一般重构底层架构的同时，重构老特性剧烈的代码量波动通常发生在重构期。比如，在最近的重构期内，PR #25774删除了3 ...继续阅读 (64)

前言导致白屏的原因大概有两种，一为资源的加载，二为 JS 执行出错本文就 JS 中执行的报错，会比较容易造成"白屏"场景，和能解决这些问题的一些方法，作出一个汇总常见的错误SyntaxErrorSyntaxError（语法错误）对象代表尝试解析不符合语法的代码的错误。当 Javascript 引擎解析代码时，遇到了不符合语法规范的标记（token）或标记顺序，则会抛出SyntaxError。这里陈列下SyntaxError的常见错误保留字错误SyntaxError: "x" is a reserved identifier(Firefox)SyntaxError: Unexpected reserved word(Chrome)如在控制台执行下方代码，则会上述错误出现const enum = 1enum在严格模式和非严格模式下都是保留字。而以下标记符只会在严格模式下才作为保留字：implementsinterfaceletpackageprivateprotectedpublicstatic例如:const implements = 1 // ✅ "use strict"; const implements = 1; // caught SyntaxError: Unexpected strict mode reserved word命名错误一个 JavaScript 标识符必 ...继续阅读 (59)

[social4i size="small" align="align-left"][This article was first published onTag: r - Appsilon | Enterprise R Shiny Dashboards, and kindly contributed toR-bloggers]. (You can report issue about the content on this pagehere)Want to share your content on R-bloggers?click hereif you have a blog, orhereif you don't.We are pleased to announce thatRhino 1.4 is now available on CRAN! This update simplifies dependency management in your project, allows you to integrate React seamlessly into your app, and resolves some issues with {box} modules. Read on to learn more!Simplified Dependency ManagementR ...继续阅读 (68)

故事的开始#去年过年的时候，我接到了一个外包，基本上就是爬数据，写后端，写网页。当时我还只会写一点安卓，不会写前端，后端的话也只会写一点 Python 或者 Java。好在时间并不紧张，我照着深入浅出现代 Web 编程边学边写，完成了任务。是的，我一开始用的是 React，用mui作为组件库。开始入门#在去年三月份的时候，我偶然间看到Anthony Fu在 b 站的第一次直播。直播里，我第一次了解到原子化 CSS 以及 Vue 和 Vite 生态中的各种插件。直播后，我沿着他的Vue 起手模板和博客中涉及到的技术去学习前端。也没个特定顺序，就只是学些自己感兴趣的东西。接触开源#到了六月份，我接触到memos这个开源项目，并修复了我处理的第一个 issue。后面我日常修复一些 bug，实现一些小功能。在十月份我联系了作者，Steven人特别好，很欢迎大家去参与开源。他拉我进了组织，从他的代码中我学习到了很多。可惜的是，随着今年兼职和学校方面的事情变多，提交 PR 的次数也越来越少了。找工作#受疫情影响，上半年的时候我一直在家里，就只是不断学习和做一些别的事情。等快到暑假，大概是在家待得太久了，家里人开始催我出去找个工作。最开始的时候是让一个认识的人推荐一个小公司的职位，不过工资太低，去干活啥基本啥都存不下来，而且后来也没招我。去年 7 月 10 号中午，偶然在 V2EX 上看到祥岩发 ...继续阅读 (54)

过好当下就够了。今天我们采访的嘉宾是@zangeci，一个从非科班走上前端之路的自学者。初入行时他利用一切空闲时间学习，成长的速度连同事们都赞叹不已。他喜欢在通勤路上阅读，也喜欢在辞职后去旅行，感受大自然的魅力。他用积极的态度面对生活中的挑战，不断追求进步。本期我们很荣幸地邀请到了他，让我们一起听听他的故事和心得吧。Q：向大家简单的介绍一下自己吧～大家好，我是一只来自闽南的属狗的狮子座程序猿。是个非科班出身的前端er，工作 7 年了。爱好嘛，大概就是动漫（宅男标配）、旅游（世界这么大我想去看看）和摄影（世界这么美我想多拍拍）。Q：你是如何进入编程这个行业的？可以说是机缘巧合。本身我不是科班出身，大学学的是机电类的专业，大四面临即将进入社会工作的时候才思考自己以后想做什么。当时其实还没有想做程序猿的想法，只是知道自己不想进工厂工作。刚好和同学讨论择业，同学说想去培训机构学编程。我们三四个人一拍即合就相约去培训学校咨询相关的事情，毕竟对培训以及这个行业都非常不了解，只是有这么一个想法。去了厦门一家培训机构咨询后，跟家里商量，得知有个舅舅在南京开了家小公司做电商，于是就自学了前端然后顺理成章的去实习了，就这样算是入行了，实习过程中发现自己对编程也很感兴趣，也就留在了这行。Q：目前主要的工作内容是什么？主要使用哪些技术？上个月刚入职新公司，主要做电商零售的。目前的工作内容主要是 PC 端管 ...继续阅读 (40)

大家好，我卡颂。对于长期迭代的React项目，性能是不能忽视的问题。通常我们通过：React-Dev-Tools的Profiler面板一些第三方工具，比如why-did-you-render检测运行时性能瓶颈。实际上，React本身就内置了性能检测组件 ——Profiler，可以很方便的检测React项目的性能。欢迎加入人类高质量前端交流群，带飞使用方式Profiler是个内置组件，用他包裹需要检测性能的组件即可：嵌套使用也是可以的：Profiler会检测被他包裹的组件树的性能，检测结果会作为onRender回调的参数：function onRender( id, phase, actualDuration, baseDuration, startTime, commitTime ) { // ...回调 }那么，这些参数都是什么意思呢？其实我们完全没必要记这些。我们只需要知道，一些典型的性能优化场景该使用哪些参数就行。场景1：组件是不是嵌套更新？对于一般的组件更新，会经历4个步骤：组件触发更新计算更新的影响执行DOM操作视图更新但如果在上一次更新流程的4个步骤还未走完的情况下，又触发新的更新：可以发现，在这种情况下，视图更新的时机远滞后于一般更新流程，这会造成页面交互卡顿。这就是组件嵌套更新，通常我们在useLayoutEffect中触发新的更新会遇到这 ...继续阅读 (51)

大家好，我卡颂。很多项目的源码非常复杂，让人望而却步。但在打退堂鼓前，我们应该思考一个问题：源码为什么复杂？造成源码复杂的原因不外乎有三个：功能本身复杂，造成代码复杂编写者功力不行，写的代码复杂功能本身不复杂，但同一个模块耦合了太多功能，看起来复杂如果是原因3，那实际理解起来其实并不难。我们需要的只是有人能帮我们剔除无关功能的干扰。React Context的实现就是个典型例子，当剔除无关功能的干扰后，他的核心实现，仅需5行代码。本文就让我们看看React Context的核心实现。欢迎围观朋友圈、加入人类高质量前端交流群，带飞简化模型Context的完整工作流程包括3步：定义context赋值context消费context以下面的代码举例：const ctx = createContext(null); function App() { return (); } function Cpn() { const num = useContext(ctx); return{num}; }其中：const ctx = createContext(null)用于定义用于赋值const num = useContext(ctx)用于消费Context数据结构（即createContext方法的返回值）也很简单：function createContext(def ...继续阅读 (47)

之前写了两个demo讲解了如何实现SSR和SSG，今天再写个demo说在ISR如何实现。什么是 ISRISR即Incremental Static Regeneration增量静态再生，是指在SSG的前提下，可以在收到请求时判定页面是否需要刷新，如果需要则重新构建该页面，这样既拥有了静态页面的优势又可以避免页面长时间未更新导致信息过时。且由于在页面维度验证，所以每次可以只构建特定的页面。ISR一般适用于符合SSG场景，但是却对页面的时限性有一定要求时。如何实现简单的ISR实现也很简单，只需要在收到页面请求时按照更新策略判断是否需要需要重新生成页面，如果需要触发页面的构建更新。需要注意一般情况下生成页面不会影响页面的响应，而是后台去做构建。现在就基于之前写的SSG demo，做一下改造让其支持ISR。修改构建脚本由于ISR构建会同时在构建脚本和服务器中触发，所以需要对之前的代码做一些小小的改动。首先抽离出一个通用的构建函数（由于服务器会使用到尽量避免同步代码）：import fs from 'fs/promises'; import { renderToString } from 'react-dom/server'; import React from 'react'; import Post from './ui/Post'; import List from './ui/Lis ...继续阅读 (56)

上次写了一个SSR的DEMO，今天写个小Demo来从头实现一下react的SSG，来理解下SSG是如何实现的。什么是 SSGSSG即Static Site Generation静态站点生成，是指将在构建时就提前生成静态HTML页面，速度很快，一般用于以下场景：SEO（搜索引擎优化）：由于部分搜索引擎对CSR内容支持不佳，所以SSG可以提升网站在搜索引擎结果中的排名。静态站点：比如博客、CMS系统输出站点等，由于内容以静态内容居多，都可以使用SSG。如何实现简单的SSG和SSR实现原理差不多，只是时机不同：SSR渲染HTML的过程在服务端，而SSG则在构建时。渲染同样是通过在Node端导入要渲染的组件，然后调用react-dom/server包中提供的renderToString方法将该组件的渲染内容输出为HTML保存。系统设计下面使用SSG实现一个简单的静态博客系统：每篇博文都使用一个JSON文件来记录其中的信息（为了简化没有使用markdown，可以理解为markdown博文信息已提前转换为JSON文件）构建时会将博文编译为静态HTML文件，并生成一个博文列表的HTML文件通过静态文件服务器启动即可展示博文组件设计可以看出我们只需要两个组件：一个Post组件，用于接收博文信息展示博文一个List组件，用于接受博文列表展示博文清单简单的实现一下：import React from ...继续阅读 (47)

hello，大家好呀，又到每周和大家见面的时间啦。后天就是端午节了，小伙伴们有什么安排和计划呢？好了，一起来看看近期社区发生了哪些事吧～社区周日志6 月 12 日 - 6 月 18 日期间（下文简称本期）问答问答版块专注于提出和解答实际的技术问题，按照规范提问，更容易获得热心程序员们的快速解答哦～一起来看看本期的热门问答有：有哪些前端技术或题材适合做技术分享？js 如何获取嵌套对象的索引值？mysql中，这样查询出来的uuid为什么相同？为什么 pytz 不支持 北京时间（为什么很多东西不支持北京时间）？java的HashMap的get方法线程安全吗？专栏专栏板块鼓励大家将自己学习和探索的结果以文章的形式分享给他人，引导他人去发现、实现更加有趣的事。根据文章点赞收藏数进行综合排序，我们选出社区专栏精选文章 TOP5 ：你惨了，你的 Http Status = 0 了Java 的多线程让 React 拥有更快的虚拟 DOMC语言代码安全审计的实战应用和价值探究静态编译swoole-cli并调用rust的动态链接库公众号本期社区公众号 SegmentFault 思否 精选社区文章是：文章作者React Server Component 从理念到原理卡颂什么？后端要一次性返回我 10 万条数据！且看我这 8 种方案机智应对！水冗水孚什么时候 MySQL 查询会变慢？江南一点雨为啥 CSS ...继续阅读 (53)

在线演示 立刻下载 Nerox – React Next js Agency & Portfolio Template Nerox – Agency & Por...阅读更多 ...继续阅读 (25)