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

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

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

首发于公众号前端混合开发，欢迎关注。作为一个跨平台移动应用开发框架，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 ...继续阅读 (69)

在使用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 ...继续阅读 (66)

在数字化办公日益普及的今天，线上白板应用层出不穷。但你是否厌倦了那些千篇一律、冰冷的电子界面？想不想体验一把亲切、自由的手绘风格？今天，我们就来探讨一款引领潮流的开源项目——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 ...继续阅读 (67)

前言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实例体验进入实例深度体验后记本实例仅供参考，不定期重置数据。体验更多开源实例 ...继续阅读 (50)

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

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

字体是优秀用户体验的基石。使用定制字体可以为你的应用程序提供独特的身份，帮助你的项目在竞争激烈的市场中脱颖而出。在这篇指南中，我们将探索使用 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字体上找到 ...继续阅读 (68)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | 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 实现 风格 ...继续阅读 (46)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | 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 实现 风格 ...继续阅读 (51)

在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');静态导入是同步的，意味着它们会阻塞主线程，直到模块完全加载。这种行为可能导致应用程序启动时间变慢，特别是在较大的应用程序中。然而，当一个库或模块在代码库的多个时间或多个地方需要时，静态导入就会显得非常有用。相比之下，动态导入赋予开发者在需要时即时导入模块的能力，引领了一个异步范式。这意味 ...继续阅读 (68)

大家好，我卡颂。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团队转变策略，将迭代重心从赋能开发者转变为赋能开源库。那么，什么样的库受众最多呢？显然是框架 ...继续阅读 (52)

该渲染由 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 ...继续阅读 (70)

该渲染由 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 ...继续阅读 (64)

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

该渲染由 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 ...继续阅读 (113)

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

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

过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属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 ...继续阅读 (91)

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

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 ...继续阅读 (65)

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

1，说说react里面bind函数与箭头函数bind 由于在类中，采用的是严格模式，所以事件回调的时候会丢失this指向，指向的undefined，需要使用bind来给函数绑定上当前实例的this指向。箭头函数的this指向上下文，所以永久能拿到当前组件实例的。this指向我们可以完美的使用箭头函数来替代传统事件处理函数的回调。2，说出几点React中的性能优化使用shouldComponentUpdate来对state和props进行对比，如果两次的结果一样，那么就return false；使用纯函数组件pureComponent；3，简单解释下高阶组件和高阶函数高阶函数，指的是函数接收一个函数作为参数，或者将函数作为返回值的函数就是高阶函数 。高阶组价，接受一个组件，并返回一个新组建的组件就是高阶组件，本质上和高阶函数的意思一样的，高阶组件是用来复用react代码的一种方式。4，setState和repalceState有什么区别setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态。replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了。5，Redux中核心组件有哪些，reducer的作用Redux由Action、Reduc ...继续阅读 (85)

如果React 17是React的一个过渡版本，React 18则是React里程碑性质的版本，React 18 引入了并发功能，从根本上改变了 React 应用程序的渲染方式。我们将探讨这些最新功能如何影响和提高您的应用程序的性能。本篇文章将让我们学习到Transitions、Suspense 和 React Server Components 等并发功能如何提高应用程序性能。此篇为翻译后的文章More… ...继续阅读 (67)

如果React 17是React的一个过渡版本，React 18则是React里程碑性质的版本，React 18 引入了并发功能，从根本上改变了 React 应用程序的渲染方式。我们将探讨这些最新功能如何影响和提高您的应用程序的性能。本篇文章将让我们学习到Transitions、Suspense 和 React Server Components 等并发功能如何提高应用程序性能。此篇为英文原文More… ...继续阅读 (76)

在React中，组件之间的通信是一个非常重要的话题。当我们构建复杂的应用程序时，经常需要不同的组件之间共享数据或者进行相互协作。React提供了几种方式来实现跨组件通信，下面我将详细其中几种通信方式，并提供实际的代码示例。使用 React Context基于 React Context 实现跨组件通信的一个常见用例是创建一个能够在不同组件间共享和触发行为的上下文。以下是一个简化的例子，展示了如何在 app.tsx 中触发其他组件（例如，一个弹窗组件）中的方法。1. 创建一个 Context首先，我们创建一个新的 Context。这个 Context 将包含我们想要在应用中共享的方法。import React, { createContext, useContext } from 'react'; // 创建 Context const MyContext = createContext({ togglePopup: () => {}, // 这是一个示例方法 });2. 创建一个 Context Provider接下来，创建一个提供者组件，它将使得在应用的不同部分都能够访问到 Context 中的值。export const MyProvider = ({ children }) => { const togglePopup = () => { // 这里实现弹窗 ...继续阅读 (94)

packtpub.com 是一家电子书网站，目前在上面它们每天都会赠送一本电子书，今天送的是这本 Mastering React Native。注册账户后就可以免费获取了，没有付费订阅的用户只能在线阅读，同时也提供了书中的源码。获取地址：https://www.packtpub.com/free-learning截止时间：2023 年 11 月 25 日 8 时 来自反斗限免 ...继续阅读 (35)

大家好，我卡颂。长期使用React的同学应该知道，React中存在两种组件：Class Component，类组件Function Component，函数组件既然提到类和函数，那么很自然的，我们会进一步思考：类组件和OOP（面向对象编程）有关系么？函数组件和FP（函数式编程）有关系么？毕竟，如果类组件和OOP有关，那么OOP中的思想（继承、封装、多态...）也能指导类组件的业务开发（函数组件与FP的关系同理）。换言之，我们可以直接用这些编程范式的最佳实践指导React项目开发。那么，函数组件和函数式编程究竟是什么关系呢？本文会围绕这个话题展开讲解。函数组件 和 函数式编程 有关系么？欢迎围观朋友圈、加入人类高质量前端交流群，带飞编程范式与DSL首先，我们应该明确，框架语法本质是一种DSL（领域相关语言），他是为了某个特定领域的开发量身定制的。比如，React作为一款针对view开发的DSL，虽然不同的view使用的框架不同，比如：对于web，框架为ReactDOM对于小程序，框架为Taro对于原生开发，字节内部有个叫React Lynx的框架但这些框架都大体遵循同一套DSL（React语法），这套DSL并不属于某一种编程范式，而应该被视为不同编程范式中，更符合view开发的语言特性的集合。所以，作为React DSL的一部分，函数组件可以体现OOP的思想，类组件也能体现FP的思想 ...继续阅读 (69)