Tech 导读 “埋点”（数据采集）是数据分析的重要手段；对于前端埋点来说最复杂的是各种事件的监听，本文以曝光埋点为例，介绍几种滑动列表曝光事件监听方案及在原生、Taro框架下的最佳实践，希望对前端同学有所帮助。
离职原因看我这篇文章吧：离开蘑菇街后，我最近的一些想法，然后不得不去找工作恰饭呀。
在平时开发的时候我们总会遇到长列表，因为本身web在长列表的性能并不是特别好；加之web本身受到网络波动影响特别大，在首屏同时加载过多的内容会导致卡顿不流畅响应速度慢等问题。对此我们常用懒加载机制来进行优化。
在这篇文章中我们将谈谈 React Query 这个状态管理工具提供的一个令人惊叹的功能，即无限滚动（Infinite Scroll）。
埋点上报是将应用层事件上传至上层平台的过程。比方说，在某购物网站上，用户点击了「收藏」按钮，此时，一个点击事件就生成了，这一事件会被上报至一个数据分析平台。这样，相关的数据分析师、产品经理、运营等同学便可以在数据分析平台，通过这些上报的事件数据分析，得出应用中可以优化的方方面面。由此可见，埋点上报是每个产品走向卓越的重要一环。
无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。
Mobx 采用了一种'观察者模式'—— Observer，整个设计架构都是围绕 Observer 展开：
今天，我们来谈谈，浏览器的「关键渲染路径」。针对浏览器的一些其他文章，我们前面有介绍。分别从浏览器架构和最新的渲染引擎介绍了关于页面渲染的相关概念。对应连接如下。
所谓数据埋点就是应用在规定流程中 对特定行为或事件进行数据采集 。使用采集的数据做用户分析和页面分析，可以获得应用的总体使用情况，为后续优化产品和运营提供数据支撑。常见数据埋点内容包括：访问量、停留时长、曝光量、点击量、跳出率等等。
在电商运营的工作中，运营人员需要关心很多数字，除了简单的PV和UV外，还有商品曝光量、商品浏览量、加入购物车、支付量，基于这些数字可以构建漏斗模型，帮助优化各个环节的转化，如下图。
Fiber 架构是React16中引入的新概念，目的就是解决大型 React 应用卡顿，React在遍历更新每一个节点的时候都不是用的真实DOM，都是采用虚拟DOM，所以可以理解成fiber就是React的虚拟DOM，更新Fiber的过程叫做调和，每一个fiber都可以作为一个执行单元来处理，所以每一个 fiber 可以根据自身的过期时间expirationTime，来判断是否还有空间时间执行更新，如果没有时间更新，就要把主动权交给浏览器去渲染，做一些动画，重排（ reflow ），重绘 repaints 之类的事情，这样就能给用户感觉不是很卡。
在一切开始之前，我们首先要回答一个问题：为什么我们需要redux，redux为我们解决了什么问题？只有回答了这个问题，我们才能把握redux的设计思路。
但是，如果仅仅想要在被观察的变量有变化的时候触发，而不是立即执行autorun，那么我们可以用到reaction了；
SVGEdit 一款非常老牌的 SVG 图形编辑器，用于编辑处理 SVG，star 数目前是 5.8k。
在《React Hooks 学习笔记 | State Hook（一）》和 《React Hooks 学习笔记 | useEffect Hook（二）》这两篇文章里我们分别学习了 State Hook 和 useEffect Hook，从本篇文章起，我们将讨论下如何应用 Hook 其他的函数提升组件的性能。
在上一部分内容中，我们了解到，对可观察的数据做出反应的时候，需要我们手动修改可观察数据的值。这种修改是通过直接向变量赋值来实现的，虽然简单易懂，但是这样会带来一个较为严重的副作用，就是每次的修改都会触发 autorun 或者 reaction 运行一次。多数情况下，这种高频的触发是完全没有必要的。
这几天打算学习并实践ReactNative，学习记录中有不对的地方请大家指出来，互相交流。(-_-) 关于学习ReactNative需要准备的基础知识，①熟悉JavaScript，最新的ES6语法
最近被react的性能问题折腾惨了，在实际项目开发中，组件的深度可能很深很深，而react的更新机制本质上还是一种全量的脏检查，也就是从当前组件开始，把它作为根节点的整棵树都检查一遍，并且在这过程中做diff，中间涉及一些算法，这些算法说来说去还是因为它存在性能问题，需要靠复杂的算法来迎合react这种脏检查带来的坏处。那么，有没有一种办法，可以避免这种脏检查，也就是在整棵树中，我只需要更新其中一个节点即可。Mobx提供了一种创新的方法，就是对组件所需要的数据进行收集，只有当这个数据发生变化的时候，这个组件才需要重新渲染。这里面还涉及到整个项目中所有组件本身的设计问题。本文尝试基于mobx的这种思路，提出一种基于依赖收集的最小化更新组件技术。
背景 申请季开始进入尾声... 前段时间有幸和「哈陆 Halu」一位去年刚入学加拿大滑铁卢大学的 dalao 通过交换友情链接认识了，他的博客链接是 → https://halu.lu ，保存在「伙伴」栏目名为「無位小站」。借着讨论 Nuxt.js 的机会和他聊了一聊，了解了一些他参加的 Co-op 项目和滑大数学系的情况... 他在博文中有提到他收到的另一所学校录取——华盛顿大学(也是 UW 🙂 ) 其世界综合排名会考前很多 (在 2020 US News 世界大学排名中最靠前，第 10 名，实属 da
意味着以后可以通过 vue， Dom 编程的方式来进行 webgl 编程 。感兴趣可以看这里：Getting started vugel
概述 MobX 是一个简单、可扩展的状态管理工具。相比 redux，mobx可以使用更自由，更少的代码来管理状态。 核心概念 MobX 主要包括了四个核心概念：可观察的状态、根据状态得到的计算值、基于状态变化发生的反应，触发状态变化的动作。 下面我们以股票为例，简单说明下这四个核心概念。 假设你有1000股腾讯的股票，现在的价格为400元每股。 股价是随时可变的，而数量你也可以买进卖出来改变，所以这两个数据是可变的，也即是可观察的状态； 总价值 = 股数 * 每股的价值。那么即是根据状态得到的计算值； 每次
Mobx 是一个简单、可扩展的状态管理工具。相比 redux，mobx可以使用更自由，更少的代码来管理状态。
颜陈宇，携程玩乐高级前端开发工程师，前端架构组成员，目前主要负责玩乐国际化项目的App、H5以及Online三端技术架构。热衷于react技术栈，喜欢阅读和分享。
1.1 Vue概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。
props适用于父子组件的通信，props以单向数据流的形式可以很好的完成父子组件的通信，所谓单向数据流，就是数据只能通过props由父组件流向子组件，而子组件并不能通过修改props传过来的数据修改父组件的相应状态，所有的props都使得其父子props之间形成了一个单向下行绑定，父级props的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外改变父级组件的状态，导致难以理解数据的流向而提高了项目维护难度。实际上如果传入一个基本数据类型给子组件，在子组件中修改这个值的话React中会抛出异常，如果对于子组件传入一个引用类型的对象的话，在子组件中修改是不会出现任何提示的，但这两种情况都属于改变了父子组件的单向数据流，是不符合可维护的设计方式的。 我们通常会有需要更改父组件值的需求，对此我们可以在父组件自定义一个处理接受变化状态的逻辑，然后在子组件中如若相关的状态改变时，就触发父组件的逻辑处理事件，在React中props是能够接受任意的入参，此时我们通过props传递一个函数在子组件触发并且传递值到父组件的实例去修改父组件的state。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFbntbYc-1597115377927)(README_files/1.png)]
弱侵入性一个比较显著的体现就是，当你觉得你不喜欢 React 自带的 useState、useEffect 时，你可以轻松植入你自己的开发思维。把他调整成为你喜爱的形状。
摘要：从angular的诞生独步天下，到现在三大框架平分天下，基本形势已经趋于稳定。每一个框架从诞生到受欢迎，都有其特定的原因和背景。不同的开发者选择时，也是依据于其特定情景下的原因和背景。 一、为什么前端会被vue,angular,react瓜分？ 不知道大家有没有发现，这三个框架除了都是前端框架之外，还大有搞基的成分存在。注意他们三个的名字，分别以v，a，r 开头，我这么一说，你是不是忽然间就想到了什么。哈哈，正是如此，将他们组合起来不就是javascript中无处不在的鬼东西么？var
这是前端面试中必然会问到的问题 前端开发多年来一直在不断改进。从简单的静态页面到现在复杂的单页面应用程序，我们的工具变得越来越强大。现在，三大前端框架统治着前端开发，那么你知道这三个框架的区别吗？为什么一直保持着三足鼎立的局面，而不是某种框架来统一其他人？让我们在本文中讨论这些问题。 前端开发的演变 PHP && JSP 早些年，网页的动态内容是在服务器端渲染的，主要使用PHP、JSP等技术。 此时，服务器通过模板引擎填充数据，然后生成HTML，并将HTML返回给浏览器进行渲染。 <!DOCTYPE
效果图 Todo.gif Typescript 在TS下开发首先要做好相应的环境配置,一些需要进行设置的编译选项 # tsconfig.json { "compilerOptions":{
状态是表示组件当前状况的 JS 对象。在 React 中，可以使用 useState 或者 this.state 维护组件内部状态，通过 props 传递给子组件使用。
如今，Angular和React这两个JavaScript框架可谓红的发紫，同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题，本文或许无法告诉你哪个框架更优秀，但尽量从更多的角度去比较两者，尽可能的为你在选择时提供更多的参考意见。 选择的方法 在选择之前，我们尝试带着一些问题去审视你将要选择的框架（或者是任何工具），尝试用这些问题的答案来帮助我们更加了解框架，也更加让选择变得更容易 框架本身的问题： 是否成熟？谁在背后支持呢？ 具备的功能？ 采用什么架构和模式？ 生态系统是否丰富
最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践和规范整理了一些文档, 将部分章节分享了出来. 由于经验有限, 文章可能会有某些错误, 希望大家指出, 互相交流.
一晃就到2020年了，时间过得真的是飞快，伴随着q群一些热心小伙伴的反馈和我个人实际的业务落地场景，Concent已进入一个非常稳定的运行阶段了，在此开年之际，新开一个杂谈系列，会不定期更新，用于做一些总结或者回顾，内容比较随心，想到哪里写到哪里，不会抬拘于风格和形式，重在探讨和温故知新，并激发灵感，本期杂谈的主题是精确更新，文章将综合对比现有业界的各种方案，来看看Concent如何另辟蹊径，给React加上精确更新这门不可或缺的重型武器吧。
同样的思路下面还有另一种实现方式，是用 offsetTop、scrollTop、innerHeight做的，这个很常见，我们就不说了。
《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块： Highlights 优秀的工具、库 好的教程、深度解读已有技术的文章 业界最新的技术、热点文章 业界对（新）技术的深度地、优秀地实践 Tutorial Tools And Codes 《前端技术观察》的目的是让大家： 更及时的了解到业界最新的技术 受益于高质量的教程、文章 了解业界更优秀的代码、工具 更多地、氛围更浓厚地讨论、研究、落地技术 highlights TypeScript 4.2 发布（
首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。
课件获取：关注公众号 **“数栈研习社”，后台私信 “Taier”** 获得直播课件
在React 16.x 新增了一个名为“Protals”的特性，直接按照字面意思翻译实在不靠谱。在描述这个特性时，我们还是用官方的英文单词来指定它。Portals的作用简单的说就是为了便于开发“弹窗”、“对话框”、“浮动卡片”、“提示窗”等脱离标准文档流的组件而设定的，用于替换之前的unstable_renderSubtreeIntoContainer。
联合类型在 TypeScript 中相当流行，你可能已经用过很多次了。交叉类型稍微不那么常见。它们似乎引起更多的困惑。
上两期，我们为大家分享了Taier入门及控制台的介绍，本期我们为大家分享Taier的Web前端架构介绍。本次分享我们将从Taier的前端技术栈选型，到技术实现以及未来规划为大家讲解。
本系列前几篇文章演示了不用react和es6/babel等如何方便的修改传统的es5代码，但MobX也为react提供了方便的包装方法，本篇还是引入一些jsx语法等，展示利用mobx-react包改善React组件管理状态的流程
MobX 是一款精准的状态管理工具库，如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux，那毫不犹豫地说，MobX 的简单性将成为你状态管
lottie 是 Aribnb 开源一个主要面向 Web、iOS、Android、React Native、Windows 的动画库，可以实时渲染After Effects动画，并以Bodymovin作为json导出，允许应用程序像使用静态图像一样轻松使用动画，一款协同合作的高效软件。
在 2 年前的React Conf 2021[1]，黄玄第一次介绍了React Forget，这是个「可以生成等效于 useMemo、React.memo」的编译器（可以简单理解为，有了它，开发者不需要考虑React项目的性能优化了）。
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
领取专属 10元无门槛券
手把手带您无忧上云
