皮皮网

1.Preact Դ?源码?????
2.详解|天猫搜索前端技术历代记
3.如何看待最近正式发布的 Web 全栈框架 Fresh?
4.Preact（React）核心原理详解
5.畅谈React material-ui的样式方案
6.preact源码解析，从preact中理解react原理

Preact Դ?剖析?????

       在掌握了 React 技能后，我尝试过不少小项目，源码但总感觉这些项目只是剖析自娱自乐，对于找工作并没有太大帮助，源码让我感到有些迷茫。剖析最准dmi指标源码于是源码，我决定尝试做点开源项目，剖析既能锻炼自己写 React 组件的源码能力，又能让自己有所收获。剖析我和女票都很喜欢**，源码因此产生了制作一个播放器的剖析想法。经过一番努力，源码我开发了一个名为“qier-player”的剖析 h5 播放器。

       qier-player 目前已实现在线播放器的源码基本功能，包括暂停、播放、全屏、音量调节、进度条拖拽和倍速等。接下来，我打算添加快捷键和一些性能优化。如果你对播放器有需求，但又不想自己从头开始编写，或者觉得现有的播放器功能不足、不够美观，那么 qier-player 就是你的不二之选。

       以下是这个开源组件的源代码，欢迎 star 和提建议！～

       介绍：qier-player 是一个基于 React 编写的在线视频播放器组件，界面简洁，操作流畅，具有大部分视频播放器的基础功能。支持视频清晰度的切换，提供了原画、4K、2K、P、P、P 的导航源码修改视频源接口。

       演示官网（tip: 演示的视频没有放cdn，下载比较慢，比较卡，需要等它加载完）

       示例快速开始安装使用近期更新记录1.0.4 (--)1.0.3 (--)

       如果你觉得这个项目对你有所帮助，不妨赏个 star，也可以点个 watch。版本迭代会第一时间通知到你 ^-^

详解|天猫搜索前端技术历代记

       天猫搜索前端技术的发展历程，从上古时代的PC搜索，到逐步演进的H5搜索，再到MV*时代的Preact应用，直至引入Weex技术与搭建时代的探索，直至智能时代的展望，每一步都承载着技术的革新与业务的革新。

       PC时代的搜索前端采用KISSY和MUI3作为主要技术方案，适应了3G/2G时代的网络环境和用户习惯。然而，随着智能手机的普及与流量成本的下降，流量需求激增，导致原有的技术方案显得力不从心。因此，H5搜索时代应运而生，采用Zepto和MUI4，引入前端模板，优化模块化方案与页面渲染策略，解决PC搜索时代的问题，同时引入前后端分离的wormhole app，降低模板维护成本。

       进入MV*时代，随着组织架构调整，搜索前端资源投入集中在核心功能与跨平台适应性上，如H5搜索凑单页、领券弹层等。引入Preact和MUI5，优化模块化方案，采用自动化工具转换技术，实现一份源码同时复用在Weex和Web上，提升了开发效率与代码复用性。

       Weex时代，为应对流量场景下的核心ioc源码动态化需求，以及客户端迭代的挑战，引入Native内嵌Weex坑位技术方案，结合模板下发的Oreo平台，采用Prax解决方案，实现在Web和Weex间的技术兼容性与性能优化。

       搭建时代，面对共建与规模化的需求，长颈鹿项目应运而生，通过千叶平台提供模块化搭建能力，为品牌商与行业提供定制化页面，实现模块化、自动化搭建，有效提升运营效率与用户体验。同时，无界模块定投方案解决了多场景间的交叉展示问题，进一步优化了模块化搭建的灵活性与适应性。

       深度搭建时代，引入Rax1.0，针对Web进行优化，模块化划分明确，实现交互、展示与数据模块的分离，以实现更高效、更灵活的页面构建与内容复用。此外，团队正尝试基于机器学习的智能UI生成技术，以期实现UI零成本构建，推动前端技术与业务的深度融合。

       智能时代，展望未来，前端技术将融合更先进的AI与数据驱动策略，实现自动化的界面生成、内容产出与用户行为分析，从而构建更为个性化、智能化的用户体验，推动业务创新与技术迭代。

如何看待最近正式发布的 Web 全栈框架 Fresh?

       Fresh 是由 Deno 作者推出的一款 Web 全栈框架，最近正式发布了 1.0 版本并支持了生产环境。它在 Github 上热度较高，lisp插件源码适合深入研究。以下从框架定位、上手体验、优劣势评估和源码实现四个方面介绍 Fresh 框架。

       Fresh 定位为 Web 全栈框架，与 Next.js 和 Remix 相似，具有 Deno 的优势，内置测试工具和支持 ponents 的语法，当然还是有区别的 —— styled-components 用的是 es6 tagged template literals 而 material-ui styled API 返回函数的参数是css对象。使用 Higher-order component API 接收一个 css 对象返回一个高阶组件函数。material-ui 的 Higher-order component API 不仅能用于函数组件也能用于类组件，但在 Hook 大行其道后这个 API 慢慢退出舞台了。接下来都只使用 makeStyles API 做后面的代码示范。

       material-ui 上述的API 在底层都会生成一些“随机的html class 名称” 以及 相应的 css 规则。以 上面的 makeStyles demo 为例，会生成以下 css 规则插入到 html head。自定义样式按钮 对应的 html 片段如下。小结：上述这三种形式的API都能定制化组件的样式。查看源码就能发现其实 styled 和 withStyles 底层都调用了makeStyles API。

       在底层原理是动态生成 css 规则插入到 html 中。这三个API的使用方法中，最关键的都是两部分：查看 css 对象的构成和使用。接下来将细聊 css 对象的构成和使用。嵌套选择器：上面的代码可以得到以下效果。实际生成的 css 规则如下。

       根据传入值动态调整：上述的 css 对象并不一定是单纯的简单对象。可以将函数传递给makeStyles (“插值”)，这样一来根据组件的属性可以变换生成的样式的值。 此函数可以运用于样式规则的级别，也可以放在 CSS 属性级别。例1和例2展示了如何根据组件属性动态调整样式。

       覆盖样式 —— classes 属性：接下来换个角度，假如你使用 material-ui 样式方案创作了一些组件（提供了默认的样式）并作为公用组件分享给其他模块使用，如何让调用端可自定义这些组件的样式呢？上面提到的根据传入值动态调整 是一种解决方案，但很明显这是一种只允许微调的方案；而且这个方案的实现通常比较繁琐。假如以下是我们设计的一个组件代码。那么我在 Parent 中如何自定义这个 Nested 组件的 span 样式呢？我们可以利用classes属性 覆盖样式。上面的代码中，我们往 useStyles 这个hook中传入 props 作为参数 （其实是go pool源码为了将 classes 传进去）。而在 Parent 的代码中，我们给 Nested 传入 classes 属性（这个命名是个规范，必须遵守）。最终的效果生成的 html 中 span 的 class 值是 ‘makeStyles-label-2 my-label’ —— 注意 my-label 的顺序在后面，因此它的样式会覆盖前面 makeStyles-label-2 的样式。

       总结：你所在前端项目使用的样式方案还是 LESS, SASS 甚至是 css 吗？material-ui 样式解决方案是不是对你有所冲击或者启示呢？欢迎留言评论。如果觉得文章质量不错，请积极地点赞、喜欢、收藏三连！p.s. material-ui 样式方案中还有其他内容，如主题、JSS 插件等，个人感觉难度比较小，文档也易懂，（或者过于生僻，很少使用），本文就不做介绍了，如果有读者强烈要求写某个部分，我再继续补充。

preact源码解析，从preact中理解react原理

       基于preact.3.4版本进行分析，完整注释请参阅链接。阅读源码建议采用跳跃式阅读，遇到难以理解的部分先跳过，待熟悉整体架构后再深入阅读。如果觉得有价值，不妨为项目点个star。

       一直对研究react源码抱有兴趣，但每次都半途而废，主要原因是react项目体积庞大，代码颗粒化且执行流程复杂，需要投入大量精力。因此，转向研究preact，一个号称浓缩版react，体积仅有3KB。市面上已有对preact源码的解析，但大多存在版本过旧和分析重点不突出的问题，如为什么存在_nextDom？value为何不在diffProps中处理？这些都是解析代码中的关键点和收益点。

       一. 文件结构

       二. 渲染原理

       简单demo展示如何将App组件渲染至真实DOM中。

       vnode表示节点描述对象。在打包阶段，babel的transform-react-jsx插件会将jsx语法编译为JS语法，即转换为React.createElement(type, props, children)形式。preact中需配置此插件，使React.createElement对应为h函数，编译后的jsx语法如下：h(App,null)。

       执行render函数后，先调用h函数，然后通过createVNode返回虚拟节点。最终，h(App,null)的执行结果为{ type:App,props:null,key:null,ref:null}，该虚拟节点将被用于渲染真实DOM。

       首次渲染时，旧虚拟节点基本为空。diff函数比较虚拟节点与真实DOM，创建挂载完成，执行commitRoot函数，该函数执行组件的did生命周期和setState回调。

       2. diff

       diff过程包含diff、diffElementNodes、diffChildren、diffProps四个函数。diff主要处理函数型虚拟节点，非函数型节点调用diffElementNodes处理。判断虚拟节点是否存在_component属性，若无则实例化，执行组件生命周期，调用render方法，保存子节点至_children属性，进而调用diffChildren。

       diffElementNodes处理HTML型虚拟节点，创建真实DOM节点，查找复用，若无则创建文本或元素节点。diffProps处理节点属性，如样式、事件监听等。diffChildren比较子节点并添加至当前DOM节点。

       分析diff执行流程，render函数后调用diff比较虚拟节点，执行App组件生命周期和render方法，保存返回的虚拟节点至_children属性，调用diffChildren比较子节点。整体虚拟节点树如下：

       diffChildren遍历子节点，查找DOM节点，比较虚拟节点，返回真实DOM，追加至parentDOM或子节点后。

       三. 组件

       1. component

       Component构造函数设置状态、强制渲染、定义render函数和enqueueRender函数。

       强制渲染通过设置_force标记，加入渲染队列并执行。_force为真时，diff渲染不会触发某些生命周期。

       render函数默认为Fragment组件，返回子节点。

       enqueueRender将待渲染组件加入队列，延迟执行process函数。process排序组件，渲染最外层组件，调用renderComponent渲染，更新DOM后执行所有组件的did生命周期和setState回调。

       2. context

       使用案例展示跨组件传递数据。createContext创建context，包含Provider和Consumer组件。Provider组件跨组件传递数据，Consumer组件接收数据。

       源码简单，createContext后返回context对象，包含Consumer与Provider组件。Consumer组件设置contextType属性，渲染时执行子节点，等同于类组件。

       Provider组件创建函数，渲染到Provider组件时调用getChildContext获取ctx对象，diff时传递至子孙节点组件。组件设置contextType，通过sub函数订阅Provider组件值更新，值更新时渲染订阅组件。

       四. 解惑疑点

       理解代码意图。支持Promise时，使用Promise处理，否则使用setTimeout。了解Promise.prototype.then.bind(Promise.resolve())最终执行的Promise.resolve().then。

       虚拟节点用Fragment包装的原因是，避免直接调用diffElementNodes，以确保子节点正确关联至父节点DOM。

       hydrate与render的区别在于，hydrate仅处理事件，不处理其他props，适用于服务器端渲染的HTML，客户端渲染使用hydrate提高首次渲染速度。

       props中value与checked单独处理，diffProps不处理，处理在diffChildren中，找到原因。

       在props中设置value为空的原因是，遵循W3C规定，不设置value时，文本内容作为value。为避免MVVM问题，需在子节点渲染后设置value为空，再处理元素value。

       组件异常处理机制中，_processingException和_pendingError变量用于标记组件异常处理状态，确保不会重复跳过异常组件。

       diffProps中事件处理机制，为避免重复添加事件监听器，只在事件函数变化时修改dom._listeners，触发事件时仅执行保存的监听函数，移除监听在onChange设置为空时执行。

       理解_nextDom的使用，确保子节点与父节点关联，避免在函数型节点渲染时进行不必要的关联操作。

计算机开发|Github上8个很棒的React项目

       来自公众号：前端充电宝

       今天分享 Github 上 8 个很棒的 React 项目，旨在通过学习这些项目的源码，帮助大家更好地理解 React，并编写出更优雅的 React 代码！

       概览：

       1. React Tetris

       React Tetris 是一个使用 React、Redux、Immutable 制作的俄罗斯方块游戏。它是一个适用于 React 学习者的练习项目，通过优化和打磨细节，可以提升开发者对 React 的掌握。项目介绍中包含作者的开发想法，提供中文资源，非常值得借鉴。

       Github：github.com/chvin/react...

       2. Kutt.it

       Kutt 是一个现代的 URL 缩短器，支持自定义域名。它集成 Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等技术，提供功能丰富的 URL 缩短服务。

       Github：github.com/thedevs-netw...

       3. Win in React

       通过这个项目，开发者使用 React、CSS (SCSS) 和 JS 等标准 Web 技术在浏览器中复制 Windows 桌面体验。该项目展示了在 Web 上重现操作系统的可能性。

       Github：github.com/blueedgetech...

       4. JoL-player

       JoL-player 是一个功能强大的 React 播放器，通过高质量的 React 组件、TypeScript 开发和完整的类型定义文件，提供国际化语言、强大的 API 和功能。支持 React +版本。

       Github：github.com/lgf/JoL-p...

       5. Take Note

       TakeNote 是一个 Web 笔记应用，提供搜索、多光标编辑、链接笔记、语法高亮、键盘快捷键等功能。它基于 TypeScript、React、Redux、Node、Express 等技术创建，支持本地存储和 zip 格式的下载。

       Github：github.com/taniarascia...

       6. Fiora

       Fiora 是一个基于 Node.js、React 和 socket.io 的聊天应用程序，支持添加好友、群聊、设置主题、消息提醒等，适用于 Windows / Linux / macOS 系统。

       Github：github.com/yinxin/fi...

       7. Todoist clone

       Todoist clone 是一个使用 create-react-app 构建的 Todoist 的简化版，包含 React（自定义 Hooks、context）、Firebase 和 React 测试库。项目使用 SCSS (CSS) 和 BEM 命名方法，旨在帮助开发者更好地理解 React。

       Github：github.com/karlhadwen/t...

       8. Jira Clone

       Jira Clone 是一个使用 React 开发的简化版 Jira 工具，提供交互式用户界面。它使用 React 以及 webpack、Node.js、ESLint、styled-components 和 cypress 构建，支持最新的 React 特性。

       Github：github.com/oldboyxx/jir...