蒲公英 · JELLY技术周刊 Vol.18 关于 React 那些设计

蒲公英 · JELLY技术周刊 Vol.18
自 2011 年,Facebook 第一次在 News Feed 上采用了 React 框架,十年来 React 生态中很多好用的功能和工具在诸多设计思想和哲学的引导下被开发完成,印象最深的的设计是哪些?Fiber、Hooks 还是 Suspense?或者是一些 React 生态中的工具,比如 React Europe 2020 上刚刚分享的 Recoil?从 Class 走向 Function,Algebraic Effects 又有多少了解呢?
登高远眺
天高地迥,觉宇宙之无穷
基础技术
深色模式适配指南
自从 iOS13 自带支持深色模式(dark mode)以来,就一直为大家所关注,仿佛支持深色模式已经成为现代移动应用和网站的一个潮流,这不得不证明 iOS 的影响力之强大。本文就 Web、APP、Flutter 如何来实现深色模式适配,进行了深入地剖析。其中 Web 适配最终采用的是 CSS 变量+降级的方案,而 iOS、Android 原生以及 Flutter 都有各自系统提供的 API 能够比较容易地实现深色模式适配。
前端框架
超简单 Algebraic Effects 入门 -- React Team 出品
React team 的 Sebastian(曾提出 Hooks 与 Suspense 等特性) 常常谈到 React 的某些特性其实是以 Algebraic Effects 作为心智模型,这让他的同事 Dan (Redux 作者)非常好奇。一番探索之后 Dan 发现这个从函数式编程领域而来的概念并没有一些学术论文上写的那么复杂,因此透过本文向不了解 Algebraic Effects 的开发者进行科普,并讲述了它与一些 React 特性之间的抽象联系。
Recoil - 面向 React 设计的状态管理库
在 5 月的 React Europe 2020 上,Dave McCabe 为我们分享了 FaceBook 推出的状态管理工具 Recoil。在状态管理工具琳琅满目的今日,为什么 React 官方要躬身入局?Recoil 的诞生是为了解决什么问题?Recoil 又是如何兼容 React 最新的特性呢?详情请看视频回顾。
深入解析 React Fiber 架构及源码
在React框架中,总是有一个用于保持状态的内部实例树(internal instances)(组件,DOM节点等),与之相对的是跟具体平台有关的public instance,也被称为Host instance 。从React 16开始,React推出了该内部实例树的新实现以及负责操作树的算法,被称为Fiber,它能够将任务分片,划分优先级,同时能够实现类似于操作系统中对线程的抢占式调度,功能非常强大。有兴趣的小伙伴可以通过这篇文章进行深入的了解~
设计哲学
除了 Todo App 之外,我们如何才能获得实践技术的新点子?
学习新技术的时候,你会拿什么项目来练手呢?大部分人都会选择写一个 Todo App(提醒事项程序) 吧。作为过来人,GaneshMani 认为,Todo App、聊天室等简单的小项目固然可以让初学者熟悉语言、框架的运作,但对于职业生涯,甚至是激烈的面试竞争来说,都是远远不够的。如何想到一个更合适、更有实践意义的项目?这篇文章手把手进行了教学。
工具推介
Postwoman - 一个开源、免费、快速、漂亮的女邮差?
Postman(邮差)你肯定听说过,那 Postwoman(女邮差) 呢?不满足于 Postman 的收费,又受不了 cURL 等工具的繁琐用法,Liyas Thomas 决定用 node + Vue 自己造一个轮子,这便是 Postwoman 的由来。Postwoman 是一款开源的请求构造器,支持调试 Restful 接口,WebSocket、GraphQL 等也不在话下,用法与 Postman 没有太大区别,最重要的是免费,永久的免费。
沧海拾遗
沧海拾遗,积跬步以至千里
使用 react-docgen 自动生成组件文档
写文档是不可能的,但是开发却也离不开文档,那么一个自动化文档就是必不可少的!如果你也用 React 完成开发工作,相信 react-docgen 会给日常的开发工作带来极大的便利,统一文档格式,节省时间做更多有意义的事情~~
手写 webpack 打包一个 react 单页面应用
打包是前端工程化中不变的问题,如何高效高质量的完成它,在开发和发布过程中,都可以节省很多成本。但是你真的了解打包的原理么?这次我们就从一个简单的 react 单页面应用着手,来详细讲讲 webpack 到底干了啥。
「蒲公英」期刊,每周更新,我们专注于挖掘「基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能、设计哲学、前端框架」等多个大方向的业界热点,并加以专业的解读;不仅如此,我们还会推介精选凹凸技术文章,向大家呈现团队内的研究技术方向。
抬头仰望,蒲公英的种子会生根发芽,如夏花绚烂;格物致知,我们登高远眺、沧海拾遗,以求积硅步而至千里。
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

蒲公英 · JELLY技术周刊 Vol.18 关于 React 那些设计的更多相关文章
- 蒲公英 · JELLY技术周刊 Vol.21 -- 技术周刊 · React Hooks vs Vue 3 + Composition API
蒲公英 · JELLY技术周刊 Vol.21 选 React 还是 Vue,每个人心中都会有自己的答案,有很多理由去 pick 心水的框架,但是当我们扪心自问,我们真的可以公正的来评价这两者之间的差异 ...
- 蒲公英 · JELLY技术周刊 Vol.26: 请问您这个月要来点肝么?
蒲公英 · JELLY技术周刊 Vol.26 今年的十月,不知道大家在 TODO List 上新增了多少条目准备尝鲜,你可能已经准备了 Vue3.Webpack5 以及 React v17.0 RC, ...
- 蒲公英 · JELLY技术周刊 Vol.29: 前端智能化在阿里的那些事
蒲公英 · JELLY技术周刊 Vol.29 前端智能化是指借助于 AI 和机器学习的能力拓展前端,使其拥有一些超出现阶段前端能力的特性,这将是未来前端方向中一场重要的变革.目前各家互联网厂商都有自己 ...
- 蒲公英 · JELLY技术周刊 Vol.34: 芜湖~ Flutter
蒲公英 · JELLY技术周刊 Vol.34 提及跨端,你能想到那些技术?PWA.小程序.Ionic.React Native.Weex--当然也少不了 Flutter,历时 3 年,Flutter ...
- 蒲公英 · JELLY技术周刊 Vol.22: npm i react-router@6.0.0-beta.0
蒲公英 · JELLY技术周刊 Vol.22 近期 React Router 已经释出了 6.x 的 beta 版本,正式版本已经不远了,作为 React 生态中的重要组成部分,React Route ...
- JELLY技术周刊 Vol.24 -- 技术周刊 · 实现 Recoil 只需百行代码?
蒲公英 · JELLY技术周刊 Vol.24 理解一个轮子最好的方法就是仿造一个轮子,很多框架都因此应运而生,比如面向 JS 开发者的 AI 工具 Danfo.js:参考 qiankun 的微前端框架 ...
- 蒲公英 · JELLY技术周刊 Vol.25 · Webpack 5 正式发布,你学废了么
蒲公英 · JELLY技术周刊 Vol.25 阔别两年,Webpack 5 正式发布了,不仅清理掉很多冗余的功能,同样也为我们带来了很多新鲜的能力,不论是默认开启的持久缓存,还是反病毒保护,亦或者被其 ...
- 蒲公英 · JELLY技术周刊 Vol.03
蒲公英 · JELLY技术周刊 Vol.03 「蒲公英」期刊全新升级--JELLY技术周刊!深度挖掘业界热点动态,来自团队大咖的专业点评,带你深入了解团队研究的技术方向. 登高远眺 天高地迥,觉宇宙之 ...
- 蒲公英 · JELLY技术周刊 Vol.16 谷歌首个线上 Web 开发者大会
蒲公英 · JELLY技术周刊 Vol.16 近期,谷歌有史以来的第一次线上谷歌 Web 开发者大会,Web Vitals.PWA.DevTools 和 Lighthouse 6.0 等一系列特性或产 ...
随机推荐
- vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点
需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...
- MySQL组复制MGR(一)-- 技术概述
(一)复制技术的发展 MySQL的复制技术主要经历了异步主从复制,半同步复制,组复制(Group Replication)3个阶段. (1)传统的异步主从复制 传统的MySQL提供了一种简单的主从复制 ...
- 痞子衡嵌入式:16MB以上NOR Flash使用不当可能会造成软复位后i.MXRT无法正常启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT上使用16MB以上NOR Flash软复位无法正常启动问题的分析解决经验. 痞子衡这几天在支持一个i.MXRT1050客户项 ...
- Ansible基础
Ansible基于Python paramiko 开发,分布式,无需客户端,轻量级,配置语法使用YMAL 及Jinja2模板语言. 组件: 核心:ansible 核心模块(Core Modules): ...
- Druid 连接池
记录Druid 连接池简单用法 package Utils; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sq ...
- python学习笔记1 -- 面向对象编程类和实例
由于之前有一定基础,所以python中的类的概接受的比较快,与其他语言一样, python也是通过类来进行事务的抽象,一切皆对象,要不然怎么说程序员不缺对象呢. 言归正传,python中类的声明是cl ...
- Kaggle 入门题-泰坦尼克号灾难存活预测
这个题目的背景概况来讲就是基于泰坦尼克号这个事件,然后大量的人员不幸淹没在这个海难中,也有少部分人员在这次事件之中存活,然后这个问题提供了一些人员的信息如姓名.年龄.性别.票价,所在客舱等等一些信息, ...
- 时间序列ARIMA模型
时间序列ARIMA模型 1.数据的平稳性与差分法 让均值和方差不发生明显的变化(让数据变平稳),用差分法 2.ARIMA模型-----差分自回归平均移动模型 求解回归的经典算法:最大似然估计.最小二乘 ...
- 11-21 logging 模块
默认情况下Python的logging模块将日志打印到了标准输出中,且只显示了大于等于WARNING级别的日志, 这说明默认的日志级别设置为WARNING(日志级别等级CRITICAL > ER ...
- windows:shellcode 远程线程hook/注入(四)
https://www.cnblogs.com/theseventhson/p/13236421.html 这里介绍了利用回调函数执行shellcode的基本原理:这里介绍另外一种利用回调执行she ...
