想象一下，你正在开发一个Web应用程序，它具有三个主要组件：React前端、Python API和PostgreSQL数据库。如果你想进行这个项目，你必须安装Node.jsPython和PostgreSQL。如何确保您与团队中的其他开发人员拥有相同的版本？如何确保您的CI/CD系统使用的是相同的版本？如何确保生产环境中的版本一致？如何确保您的应用程序所需的Python（或Node.js或PostgreSQL）版本不受您机器上已有内容的影响？如何管理潜在的依赖冲突？这时，容器技术应运而生！ ...继续阅读 (54)

在使用应用程序时，对象、页面、模态框和其他组件的流畅移动可以提升我们的用户体验，并鼓励用户回归。没有人愿意使用出现故障且无法正常移动的应用程序。对于前端开发人员来说，创建动画和对象过渡可能是一种负担，因为我们通常希望专注于为我们的应用编写代码，而不是去计算在哪里放置一个对象，或者当用户在我们的应用上触发一个事件时，应该将该对象移动到哪里。与UI设计师合作也可能是一项挑战，尤其是当期望不一致时——例如，当设计师期望看到他们的复杂动画被原样重现。找到一个好的工具和包来解决这个问题也不那么容易——但这正是为什么react-native-reanimated包被构建的原因。react-native-reanimatednpm包让我们能够轻松创建简单和复杂的，但流畅和互动的动画。一开始使用可能并不直观，但是随着我们在这篇文章中练习示例，我们应该能够理解如何使用这个包。在我们继续之前，我假设你已经对React Native及其工作原理有所了解。此外，React Native Reanimated v3只支持React Native v0.64或更高版本，因此请确保你更新或下载最新版本的React Native来配合这个教程。探索 React Native Reanimated v2如果你曾经使用过React Native Reanimated v1，请记住v2引入了一些新的概念和重大变化。现在 ...继续阅读 (106)

前几篇文章，我们尝试把互联网中的一些模型、方法论运用到我们的生活中。这篇文章，我们用React框架来尝试一下自我的情绪管理。说起React框架，我们知道它是一种由Facebook开发和维护的开源JavaScript库，主要用于构建用户界面，特别是单页应用程序（SPA）。React框架围绕组件化，即把用户界面拆分为可复用的独立组件，每个组件负责管理自身的状态和属性，以此来提高代码的可维护性和可复用性。React框架的核心思想是基于“观察，思考，行动”的循环。下面我们来仔细了解下这个循环在React中的具体应用：观察（Observation）：React是通过虚拟DOM来观察应用状态的变化的，虚拟DOM是一个内存中的表示，它代表了真实DOM的状态。React通过比较虚拟DOM的前后状态，就可以快速识别应用状态的变化。思考（Thinking）：一旦React观察到状态变化，它会进行思考，即重新渲染需要更新的部分。React使用一种称为“声明式”的编程模型，开发者只需要声明UI应该是什么样子的，而不需要手动操作DOM。React会根据状态变化自动更新UI，使得开发者可以更专注于UI的声明而不是状态变化时的DOM操作。行动（Action）：当React决定了哪些部分需要更新时，它会采取行动，即更新虚拟DOM并将变化应用到真实DOM中。React使用一种称为“协调器（Reconciliatio ...继续阅读 (37)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/data-management-approach-for-zustand-and-react-query ...继续阅读 (44)

随着互联网普及和发展，Web 应用程序的数量越来越多，各种网络问题也是层出不穷，因而监测这些 Web 应用程序的性能和可用性变得非常重要。今天的文章和大家分享一款十分好用的的网站分析项目！项目简介Web-Check 是一款开源网站分析工具，能帮助我们快速的扫描网站，检测网站或主机的信息，发现网页性能和兼容性问题，包括 IP/SSL/DNS/Cookies 等信息。比如，可帮助检测网页的语法错误、标签关闭、属性错误等等，确保网页的正确性；分析网页性能，提供优化建议，提升加载的速度和用户体验。安装部署1dockerrun -p3000:3000lissy93/web-check注意：项目支持非常多的部署方式，包括 Netlify/Vercel 的一键部署，Docker 部署和本地源码部署。这里仅以 Docker 部署的方式为例，使用上面的命令部署后，可通过 `IP:3000 访问。配置设置API 密钥和凭据：变量说明GOOGLE_CLOUD_API_KEYGoogle API 的密钥，这可用于返回网站质量指标。REACT_APP_SHODAN_API_KEYShodan API 的密钥，这将显示给定域关联主机名。REACT_APP_WHO_API_KEYWhoAPI 的密钥，这将显示比默认作业更全面的 WhoIs 记录。配置设置：变量说明PORT运行 server.js 时提供 API ...继续阅读 (129)

...继续阅读 (58)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-2 ...继续阅读 (48)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-1 ...继续阅读 (45)

tocReact“动态”表单设计（一）动态表单是什么要解决的问题基础知识概要模块设计UI renderState managementAction Design使用DSL描述表单tocstopReact “动态”表单设计（一）#在本节中，我会介绍动态表单的定义，实现一个这样的表单会遇到的问题，和给出它的基础数据结构和生成函数。在下一节中，我会更详细的介绍，这个表单中字段的值的存储方式。和如何实现这些功能和组件动态表单是什么#在常见B/S架构的项目下，我们有的时候会遇到，需要根据不同用户的权限和需求，为他们提供包含不同字段的表单。例如，一个工单系统，我们假设有三个角色。可以接受工单的人(A和B)，审核工单进度的人(C)。对于A，他可能需要填写工单处理的开始和结束时间，确认什么时候可以处理工单。如果A接受了工单，但发现在约定时间无法处理完成，他可以将该工单分享给B。那么B看到的工单内容，应该是不可以编辑，并且可以选择接受或不接受。当AB完成了这个工单后，C应该收到工单完成审核。C可以看到工单的所有信息，并且选择是否关闭这个工单。对于上述业务逻辑，我们可以看到一个表单的大部分内容被复用了3次（工单号，处理人等字段），而对于A，B，C他们又有一些特别的字段和操作，并且他们这些区别的可以见性控制完全来自于Server端下发的数据。那么对于这种场景我们是否可以使用被复用的字段和每个人的特殊操作 ...继续阅读 (30)

首发于公众号前端混合开发，欢迎关注。作为一个跨平台移动应用开发框架，React Native 需要与平台特定的编程语言（如 Android 的 Java 和 iOS 的 Objective-C）进行通信。这可以通过两种方式之一实现，这取决于你用于构建混合移动应用的架构。在 React Native 的原始或传统架构中，这种通信过程是通过所谓的桥接来实现的。与此同时，较新的、更具实验性的架构使用 JavaScript 接口（JSI）来直接调用在 Java 或 Objective-C 中实现的方法。让我们从高层次来看看每个选项是如何工作的，然后探索使用React Native JSI来提高我们应用的速度和性能。你可以在这个GitHub仓库中查看本文中使用的代码演示。需要注意的是，这是一个相对高级的话题，因此需要一些 React Native 编程经验才能跟上。此外，至少对 Java 和 Objective-C 基础有一定的了解将帮助你从本教程中获得最大收益。React Native的原始架构是如何工作的？在 React Native 的传统架构中，一个应用被划分为三个不同的部分或线程：JavaScript线程：我们在这里编写JavaScript代码和业务逻辑，以及创建节点阴影树：React Native 使用Yoga 框架进行布局计算的地方。平台 UI（Java 或 Objective ...继续阅读 (73)

在使用React Native工作时，你很可能已经使用了AsyncStorage作为存储解决方案。例如，你可以使用AsyncStorage来存储键值对，比如你的应用程序的当前主题，甚至为了各种原因存储状态和令牌。除了AsyncStorage，我们还可以使用一些第三方存储解决方案。在这篇文章中，我们将研究react-native-mmkv库，并探讨为什么你可能想要用它替代AsyncStorage，以及如何在我们的应用程序中使用它。为什么使用 react-native-mmkv ？由微信开发的 react-native-mmkv 库允许我们高效地从 MMKV 存储框架存储和读取键值对。它的名字是 React Nativememory-map key-value存储的简称。类似于 AsyncStorage ，react-native-mmkv也具有跨平台兼容性，意味着它适用于 iOS 和 Android 平台。让我们来看看你可能会考虑使用 MMKV 而不是AsyncStorage的一些原因。加密AsyncStorage是一个未加密的存储系统。不建议使用像AsyncStorage这样的存储解决方案来存储密码、令牌和其他私人信息。MMKV比AsyncStorage更安全，提供数据加密和其他更高级的安全特性。如果你想存储需要高级别安全保护的敏感数据，MMKV是更好的选择。完全同步存储Async ...继续阅读 (71)

在数字化办公日益普及的今天，线上白板应用层出不穷。但你是否厌倦了那些千篇一律、冰冷的电子界面？想不想体验一把亲切、自由的手绘风格？今天，我们就来探讨一款引领潮流的开源项目——Excalidraw，它以独特的手绘风格，试图颠覆你对传统白板的认知！🌃 Excalidraw的魅力无限画布：Excalidraw提供了无边界的创作空间，让你的想法可以自由飞翔。手绘效果：模拟手绘线条，为你的作品增添一丝自然与个性。深色模式：贴心的深色界面，减轻眼睛疲劳，夜间创作更舒适。定制化：可以根据个人喜好调整设置，打造专属的创作环境。图像支持：轻松导入图片，与手绘元素完美融合。多语言：支持多种语言，跨越语言障碍，全球用户共享。导出多样：PNG、SVG或JSON格式，满足不同用途的需求。🌐 协作与安全PWA支持：离线也能使用，随时随地捕捉灵感。实时协作：多人同时编辑，团队合作无间。加密保护：数据安全，加密传输，确保隐私无忧。本地存储：自动保存到浏览器，不怕丢失工作进度。分享链接：生成只读链接，轻松分享你的作品。🛠️ 开发者友好npm包安装：通过npm或yarn，轻松集成到你的应用中。npm install react react-dom @excalidraw/excalidraw 或者 yarn add react react-dom @excalidraw/excalidrawAPI与插件：提供AP ...继续阅读 (73)

前言EverShop is a GraphQL Based and React ecommerce platform with essential commerce features. Built with React, modular and fully customizable.本实例是基于EverShop部署的商城系统，支持桌面端和移动端自适应。实例地址https://evershop.dujun.eu.org实例配置配置描述系统Debian服务端Node.js 20数据库PostgreSQL 13程序EverShop实例部署权限要求具有系统读写权限已安装 Node.js已安装 PostgreSQL安装程序官网地址：https://evershop.io仓库地址：https://github.com/evershopcommerce/evershopnpx create-evershop-app my-app cd my-app npm run build npm run start实例体验进入实例深度体验后记本实例仅供参考，不定期重置数据。体验更多开源实例 ...继续阅读 (52)

当应用的状态发生变化时，React会创建一个新的虚拟DOM树，并与之前的虚拟DOM树进行比较，找出发生变化的部分，然后只更新这些部分的真实DOM，从而避免了不必要的DOM操作，提高了性能。多页应用（Multi-page applications）：React 也可以用于构建多页应用，其中每个页面都有自己的 React 组件，通过组件的嵌套和交互来构建复杂的页面。除了核心的React库，还有一些用于与React集成的附加库，例如React Router用于处理应用的路由，Redux用于管理应用的状态等。 ...继续阅读 (79)

前端真的很好学，一个新的框架，最长、最长花一周时间就能学会，还是说得像 React 或 Vue 这种颠覆性的框架的，其他的看看文档，少的 5 分钟就回了，长的 1 天，真的没啥难的。 ...继续阅读 (43)

字体是优秀用户体验的基石。使用定制字体可以为你的应用程序提供独特的身份，帮助你的项目在竞争激烈的市场中脱颖而出。在这篇指南中，我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法。要跟上进度，你应该熟悉 React Native 或 Expo SDK 的基础知识，包括 JSX、组件（类和函数式）和样式。向 React Native CLI 项目添加自定义字体对于我们的项目，我们将研究如何通过构建使用Google字体的基础应用程序，将自定义字体添加到React Native CLI项目中。Google字体是一个免费的开源字体库，可在设计网页和移动应用程序时使用。要启动React Native CLI项目，请在终端中运行以下命令：npx react-native@latest init CustomFontCLICustomFontCLI 是我们的项目文件夹的名称。一旦项目成功安装，你将会看到下面的图片：在你喜欢的IDE中打开你的项目以开始。在这个教程中，我们将使用VS Code。一旦项目已经启动，我们将继续获取我们想要使用的字体。我们将讨论如何导入它们并在我们的项目中使用它们。下载并将Google字体集成到我们的项目中在这个项目中，我们将使用两种字体：QuickSand和Raleway，演示自定义字体的集成，你可以在Google字体上找到 ...继续阅读 (71)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1. OpenAi 推出 Ai 视频模型 Sora https://openai.com/sora Sora 是一个人工智能模型，可以根据文本指令创建逼真而富有想象力的场景。其主要目标是教会 AI 理解并模拟现实世界的运动，进而帮助人们解决需要真实世界互动的问题。Sora 可以根据用户的提示，生成长达一分钟的视频，同时保持视觉质量和对用户提示的遵守。 2. 图解 react 源码 https://github.com/7kms/react-illustration-series react 源码，基于 react@17.0.2 (尽可能跟随 react 版本的升级，持续更新). 用大量配图的方式，致力于将 react 原理表述清楚。 3. 使用 cloudflare 免费服务，搭建临时邮箱 Github 源码：https://github.com/dreamhunter2333/cloudflare_temp_email 在线演示：https://temp-email.dreamhunter2333.xyz/ 4. 一个基于 Cloudflare 的临时邮箱工具 (未开源) https://email-once.com/ 基于 Cloudflare worker/pages/D1/R2 实现 风格 ...继续阅读 (48)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1. OpenAi 推出 Ai 视频模型 Sora https://openai.com/sora Sora 是一个人工智能模型，可以根据文本指令创建逼真而富有想象力的场景。其主要目标是教会 AI 理解并模拟现实世界的运动，进而帮助人们解决需要真实世界互动的问题。Sora 可以根据用户的提示，生成长达一分钟的视频，同时保持视觉质量和对用户提示的遵守。 2. 图解 react 源码 https://github.com/7kms/react-illustration-series react 源码，基于 react@17.0.2 (尽可能跟随 react 版本的升级，持续更新). 用大量配图的方式，致力于将 react 原理表述清楚。 3. 使用 cloudflare 免费服务，搭建临时邮箱 Github 源码：https://github.com/dreamhunter2333/cloudflare_temp_email 在线演示：https://temp-email.dreamhunter2333.xyz/ 4. 一个基于 Cloudflare 的临时邮箱工具 (未开源) https://email-once.com/ 基于 Cloudflare worker/pages/D1/R2 实现 风格 ...继续阅读 (52)

在React Native社区中，原生动态导入一直是期待已久的功能。在React Native 0.72 版本发布之前，只能通过第三方库和其他变通方法实现动态导入，例如使用React.lazy()和Suspense函数。现在，动态导入已经成为React Native框架的原生部分。在这篇文章中，我们将比较静态和动态导入，学习如何原生地处理动态导入，以及有效实施的最佳实践。静态导入 vs. 动态导入在深入研究实现细节之前，理解什么是动态导入以及它们与静态导入有何不同是至关重要的，静态导入是在JavaScript中包含模块的更常见方式。静态导入是你在文件顶部使用import或require语法声明的导入。这是因为在应用程序启动时，它们可能需要在你的整个应用程序中可用。这是一个例子：import React from 'react'; import {View, Text} from 'react-native'; const MyComponent = require('./MyComponent');静态导入是同步的，意味着它们会阻塞主线程，直到模块完全加载。这种行为可能导致应用程序启动时间变慢，特别是在较大的应用程序中。然而，当一个库或模块在代码库的多个时间或多个地方需要时，静态导入就会显得非常有用。相比之下，动态导入赋予开发者在需要时即时导入模块的能力，引领了一个异步范式。这意味 ...继续阅读 (71)

大家好，我卡颂。React当前的稳定版本是18.2，发布时间是22年6月，在此之后就没有新的稳定版本发布。直到今年2月15日，官方博客才透露下一个稳定版本的计划。没错，他就是React19。为什么时隔1年多才公布下个稳定版本的计划？为什么下个版本直接跳到了19？18我都还没升呢，19就来了，是不是要学很多东西？这篇文章会为你详细解答这些疑问。免费领取卡颂原创React教程（原价359）、加入人类高质量前端群从React16聊起近年来React最为人津津乐道的版本应该是16.8，这个版本引入了Hooks，为React（乃至整个前端框架领域）注入了新的活力。再之后的v17没有新特性引入。既然没有新特性引入，为什么要发布一个大版本（从16到17）呢？这是因为从同步更新升级到并发更新的React，中间存在breaking change。这么大体量的框架，在升级时需要保证过程尽可能平顺。这除了是一种专业、负责的体现，更重要的，版本割裂会造成大量用户损失（参考当年ng1升级到anuglar2时）。当升级到18后，React团队发现 —— 真正升级到18，并大量使用并发特性（比如useTransition）的开发者并不多。更常见的场景是 —— 知名开源库集成并发特性，开发者再直接用这些库。所以，React团队转变策略，将迭代重心从赋能开发者转变为赋能开源库。那么，什么样的库受众最多呢？显然是框架 ...继续阅读 (55)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/dev-story/nextjs-react-load-and-render-remote-component前言写过文档的大佬们都知道MDX这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markdown 只能展示内容，而使用了组件就可以把死的文字变活。MDX 的原理是在项目构建时，解析 Markdown 抽象语法树，把引入的组件进行了编译，然后嵌入到了文章内部。而使用 MDX，就必须要引入编译时。而对于 CMS 类型的博客网站，因为内容都是动态生成的，就无法使用 MDX。那么有没有办法去想一个歪路子去实现呢。构想有了初步的想法之后，我们的需求就很明确了。需要在普通的 Markdown 中渲染远程组件。这里我们都以 React 为例，项目框架为 NextJS。首先我们构想一个 RemoteComponentRender，需要的逻辑如下。这个内容只能在原文中查看哦首先要加载远程组件，然后提取其中的组件扔到 React 里面去渲染。然后为了更简单的实现一个 Markdown ...继续阅读 (73)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/nextjs-react-load-and-render-remote-component前言写过文档的大佬们都知道MDX这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markdown 只能展示内容，而使用了组件就可以把死的文字变活。MDX 的原理是在项目构建时，解析 Markdown 抽象语法树，把引入的组件进行了编译，然后嵌入到了文章内部。而使用 MDX，就必须要引入编译时。而对于 CMS 类型的博客网站，因为内容都是动态生成的，就无法使用 MDX。那么有没有办法去想一个歪路子去实现呢。构想有了初步的想法之后，我们的需求就很明确了。需要在普通的 Markdown 中渲染远程组件。这里我们都以 React 为例，项目框架为 NextJS。首先我们构想一个 RemoteComponentRender，需要的逻辑如下。这个内容只能在原文中查看哦首先要加载远程组件，然后提取其中的组件扔到 React 里面去渲染。然后为了更简单的实现一个 Markdow ...继续阅读 (66)

> 原文传送门 Types of automated testing 在各种代码库中，对不同类型的测试进行命名通常遵循一定的共性，尽管这些命名并没有严格的定义标准。本课程尝试对每种测试类型给出了一些建议和解释，但你可能在其他地方看到有所不同的定义。 之前的内容中提到了单元测试和组件测试（以我们讨论的 React 组件为例）。这两种测试类型在我们的测试金字塔（或其他形状的模型）中处于较低位置，... ...继续阅读 (85)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/react-native-webView-editor-issue本篇文章主要解决两个问题：WebView 编辑器 Toolbar 的吸附键盘WebView 编辑器焦点元素被虚拟键盘遮挡这个内容只能在原文中查看哦背景最近在写 React Native，需要实现一个文本编辑器。而现在成熟的文本编辑器都是 Web 的，在原生或者是 React Native 这类跨端的框架成熟的富文本编辑器都是比较少见的。所以我们使用 Web + React Native WebView 去实现这个组件。在需求中，我们主要实现这样的布局。上面是整个编辑器，底下是 AccessoryView + Keyboard。思考过程AccessoryViewAccessoryView 在 React Native 提供了相应的组件。组件叫InputAccessoryView但是有个局限是这个组件只适用于 React Native 的 TextInput。在 WebView 中无法使用。使用 Web 实现在 Web 中，可以使用VisualViewport去监听虚拟键盘是否被唤出，并且获取到虚拟键盘的宽高。然后去定位工具栏的位置。弊端：不是实时的状态。无法立即获取到键盘的高度。u ...继续阅读 (117)

大家好，我卡颂。最近尤大的一个推文引起了不小热议，大概经过是：有人在推上夸React文档写的好，把可能的坑点都列出来尤看到后批评道：框架应该自己处理这些坑点，而不是把他们暴露给用户尤大在推上的发言一直比较耿直，这次又涉及到React这个老对手，关注度自然不低。再加上国内前端自媒体的一波引导发酵，比如知乎下这个话题相关的问题中的措辞是怒喷，懂得都懂。在这样氛围与二手信源的影响下，会给人一种大佬都亲手下场撕了的感觉，自然会引来React、Vue各自拥趸的一番激烈讨论。年年都是一样的套路，毫无新意......免费领取卡颂原创React教程（原价359）、加入人类高质量前端群面对这样的争吵，我们应该做什么呢？首先，回到源头本身，尤大diss的有道理么？有。React的心智负担重么？确实重。比如useEffec这个API，你能想象文档中一个章节居然有6篇文章是教你如何正确使用useEffec的么？造成这一现象的原因有很多，比如：Hooks的实现原理使得必须显式声明依赖显式声明依赖无法覆盖useEffect所有场景，为此专门提出一个叫Effect Event的概念，以及一个对应的新hook——useEffectEventuseEffect承载了太多功能，比如未来Offscreen的显隐回调（类似Vue中的Keep-Alive）也是通过useEffect实现当我们继续往前回溯，Hooks必须显式 ...继续阅读 (64)

无意中看到尤雨溪说React挖坑不填坑，只靠文档来让用户来避开这些坑，其中言辞不乏用了夸张的手法来特意强调了这些坑的严重性。甚至用了 PUA 这样的词来刻意强调自己的观点。本来无意去写文章来说什么，但是接到了一些外国友人的消息后，进一步看了尤雨溪的后续X(前twitter)上的消息后，还是写了这篇文章说说自己的看法More… ...继续阅读 (60)

过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬，是给那些默默在键盘上敲打出生命旋律的你我他的情书。让我们从头再来一次，感受Vue.js与React.js在这十年间给我们带来的温暖、挑战和成就。2016一段人人都应该知道的从 Vue 到 React 的过渡史卖萌出家的算法妹纸嘉宝Appian:以前写 Vue 写惯了，心血来潮，写起了 React。并根据 Vue 官网文档的语法顺序，写了对应的 React 的语法，并附一个教程 demo 。React 还是 Vue：你该如何选择？社区深耕前端的开发者大猛：React 和 Vue 的适用范围无疑是很相似的：同样是基于组件的轻量级框架，同样专注于用户界面的视图层。同样可以用在简单的项目中，也同样可以使用全家桶扩展为复杂的应用程序。2017React or Vue: Which Javascript UI Library Should You Be Using?专注前端 JavaScript 技术的sunny：很多 web ...继续阅读 (93)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/160这一年这一年从疫情彻底放开政策开始，气温的降低让病毒传播的更快，这个开年，很多打工人都感染新冠而在家远程办公，当然也包括我。开年的不顺，让我觉得今年也不会好了，在经历去年太多的不顺和没有止境的加班之后，不知道生活还会不会有什么盼头，不断的想要去改变这个现状，却又不知道也不敢去做。这一年从无知和焦虑中开始了。二月的时候，我入坑了软路由。第一次接触了 OpenWrt，那段时间每天下班回家就开始折腾网络，也熬了好几个夜，本就下班之后没几个小时的生活，也被网络这件事难住了，很新奇，痛并快乐着。接触了 PVE 爱快，也折腾黑群晖，开始搞各种 All in One。那是唯一的乐趣了，每天的工作很枯燥，随着组内业务更替，压力却很大，日复一日，看不到尽头。LD 被上头逼的，看起来每天也过得不自在，而正是这种层层加压，在最底层的我们过得是真的痛苦。也是那段时间上头的 OKR 也是越来越离谱，我们作为业务部门，因为业务的减少，就需要有技术产出，这没问题。但问题是，一些不可能完成的任务，或许是真的太抬举我们了。我还记得那个 OKR 是双月内优化内部一个 React 状态管理始得，js framework benchmark中 React 跑分低于 1.6 好像是要达到 1.4 的水平 ...继续阅读 (146)

Cover Image Credit:https://unsplash.com/photos/uCPHkM2bnaIhttps://trekhleb.dev/blog/2021/gyro-web/In Javascript you may access your device orientation data by listening to the deviceorientation event. It is as easy as the following:12345678window.addEventListener("deviceorientation", handleOrientation);functionhandleOrientation(event) {constalpha = event.alpha;constbeta = event.beta;constgamma = event.gamma;// Do stuff...}This Demo Can Be Visited In HereThe demo video was compressed byhttps://clideo.com/from 4.3MB to 93KB, that’s impressive.To achieve the effect above, we need to dis ...继续阅读 (71)

## Mixin 在 ES6 之前, React 使用 React.createClass 创建组件: ```jsx const Article = React.createClass({ getInitialState: function () { return { c... ...继续阅读 (40)