zl_Alien的博客

一 前言今天我们来一起探讨一下React事件原理，这篇文章，我尽量用通俗简洁的方式，把React事件系统讲的明明白白。我们讲的react版本是16.13.1 , v17之后react对于事件系统会有相关的改版，文章后半部分会提及。老规矩，在正式讲解react之前，我们先想想这几个问题(如果我是面试官，你会怎么回答?)：1 我们写的事件是绑定在dom上么，如果不是绑定在哪里？2 为什么我们的事件不能绑定给组件？3 为什么我们的事件手动绑定this(不是箭头函数的情况)4 为什么不能用 retu

很多同学用react开发的时候，真正用到的React的api少之又少，基本停留在Component,React.memo等层面,实际react源码中，暴露出来的方法并不少，只是我们平时很少用。但是React暴露出这么多api并非没有用，想要玩转react,就要明白这些API究竟是干什么的，应用场景是什么，今天就让我们从react 到 react-dom,一次性把react生产环境的暴露api复习个遍(涵盖90%+)。我们把react,API，分为组件类，工具类，hooks，再加上 react-dom ，

一 前言React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。高阶作用用于强化组件，复用逻辑，提升渲染性能等作用。高阶组件也并不是很难理解，其实接触过后还是蛮简单的，接下来我将按照，高阶组件理解？，高阶组件具体怎么使用？应用场景， 高阶组件实践(源码级别) 为突破口，带大家详细了解一下高阶组件。本文篇幅比较长，建议收藏观看我们带着问题去开始今天的讨论：1 什么是高阶组件，它解决了什

一 前言说到源码，大家脑海里可能浮现出四个字 我太难了????????????。读源码貌似和我们遥不可及，因为在日常工作中，我们基本掌握在熟练的程度上，就能够满足工作需求，即便是想看源码，也会被源码复杂的逻辑拒之门外,成为了我们心中挥之不去的阴影。那么我们真的有必要阅读源码吗？ 我以一个过来人的角度看，答案是肯定的，阅读源码不只是停留在源码层面，它还会带来一些附加的价值 。笔者读过很多源码，比如 主流前端框架 vue2.0,vue3.0,react，node框架 express , koa，和它们衍生生

前言使用过redux的同学都知道,redux作为react公共状态管理工具，配合react-redux可以很好的管理数据,派发更新，更新视图渲染的作用，那么对于 react-redux 是如何做到根据 state 的改变，而更新组件，促使视图渲染的呢，让我们一起来探讨一下，react-redux 源码的奥妙所在。在正式分析之前我们不妨来想几个问题:1 为什么要在 root 根组件上使用 react-redux 的 Provider 组件包裹？2 react-redux 是怎么和 redux 契合，做

一 前言笔者最近一直在开发京东app嵌入的h5项目和微信小程序商城项目，在此期间遇到很多坑。这篇文章主要是针对 h5| Hybrid | 微信小程序 三个方向来讲述我遇到的坑，以及详细讲解我是如何解决问题的。一直以来，移动端适配就是一个令人头疼的问题。如果想要吃透移动端，还需要不少的实践经验，有的时候在pc端调试没有问题，但是在m端就会出现问题。以下这16个问题是我在实际工作中遇到的，亲自奉上给大家。希望大家收藏一波，以备不时之需。喜欢笔者的可以「点赞 + 收藏 」 一波，持续更新前端硬核文章。M端

笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波 。公众号：前端Sharing 陆续更新前端文章。本文篇幅较长，将从编译阶段 ->路由阶段 ->渲染阶段 ->细节优化 ->状态管理 ->海量数据源，长列表渲染方向分别加以探讨。一 不能输在起跑线上，优化babel配置,w

前言相信实际项目中用过vue的同学，一定对vue中父子组件之间的通信并不陌生，vue中采用良好的数据通讯方式，避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式，优缺点，及其实际工作中的应用场景首先我们带着这些问题去思考1 vue中到底有多少种父子组件通信方式？2 vue中那种父子组件最佳通信方式是什么？3 vue中每个通信方式应用场景是什么？一 prop1 基本用法prop通信方式大家最常见的，也是最常用的父子组件通信类型，我们可以直接在标签里面给子组件绑定属性和方

前言：相信不少同学在实际工作中做项目的时候会遇到点击形成二维码，跳转新的页面展示二维码的项目需求。解决问题的思路实际又很多种，今天笔者介绍一个简单实现的思路，供大家参考，实际实现这个小功能其实是特别简单的。demo效果思考如何让实现如何实现这个需求呢首先我们需要生成二维码，而且要打开一个新的页面展示，那么我们需要img标签来展示图片的载体，那么生成图片src必不可少的。无论我们的项目是spa，还是多页面应用，我们这里都要用base64储存图片的信息。所以需要把生成的二维码转化成base64。接.

前言自从react16.8，react-hooks诞生以来，在工作中一直使用hooks，一年多的时间里，接触的react项目，渐渐使用function无状态组件代替了classs声明的有状态组件，期间也总结了一些心得。尤其对于近期三个月的项目里，一点点用自定义hooks来处理公司项目中重复逻辑，总体感觉还不错。今天给大家讲讲我在工作中对react-hooks心得，和一些自定义hooks的设计思想，把在工作中的经验分享给大家。自定义hooks设计又回到那个问题？什么是hooks。react-hooks

7.8 月份面试题新鲜出炉啦，里面有很多大厂面试题原题，大家喜欢的可以给笔者点个赞，花费了很长时间整理，这些面试题更适合为中级前端进阶高级前端的小伙伴查缺补漏，和为打算金九银十换工作的同学们保驾护航。陆续还有相关文章分享连载，喜欢的可以关注一下笔者和笔者的公众号：前端Sharing废话不说，面试题奉上html篇问题一:Meta标签常用属性值的写法和作用答：meta 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜

当我们不用cli，而是自己搭建项目架子的时候，会用到webpack构建我们的项目，在用webpack构建项目的时候，过长的打包编译时间和庞大冗余的代码会让我们感到头疼。所以优化webpack性能成为了不可或缺的一部分。下面我们一起来探讨webpack性能优化细节。影响webpack性能的因素如果我们在构建项目中使用了大量的loader和第三方库，会使我们构建项目的时间过长，打包之后的代码体积过大。于是乎，就遇到了webpack 的优化瓶颈,总结webpack影响性能主要是两个方面：1 webpack.

webview H5 兼容性汇总(持续更新中)1 IOS问题：position:fixed固定定位抖动问题问题背景：在业务场景中,在ios终端环境下运行H5页面，需要用到fixed定位，并且fixed定位需要上下移动（y轴移动）网上解决方案：① 给顶级元素设置heightL100% ( 并没有奏效 ) 。② 增加transform: translate(0) 属性 （ 并没有奏效 ）③ 改变布局由fixed 定位,改成absolute定位，滚动条基于自身。（ 能够从根本上解决偶尔跳屏的问题，但

Provider做了什么，发布订阅模式实现？使用过react的同学都知道,redux作为react公共状态管理容器，配合react-redux可以很好的派发更新，更新视图渲染的作用，那么对于react-redux是如何做到根据state的改变，而更新组件，促使视图渲染的呢，让我们一起来探讨一下，react-redux源码的奥妙所在。在正式分析之前我们不妨来想几个问题，1 为什么要在root跟组件上使用react-redux的provider组件包裹2 redux是使用store.subscribe(

h5,小程序飞入购物车(抛物线绘制运动轨迹点)前言：最近有朋友在做小程序的过程中，遇到开发过飞入购物车效果的功能的需求。针对这个情况一些网上的demo，多少会有一些不符合情景的问题（bug）存在，针对这一情况小编决定帮朋友写一个方案来帮助解决问题。思考如果实现 ？ 超级简单的！无论是小程序还是h5飞入购物车无非就是平抛 ，或者是上抛两种情况，对于这两种情况，初中就开始学习抛物线理论知识是完全可以搞定的，高中一年级物理学的自由落体运动，平抛运动就是抛物线理论的具体实现。构建虚拟直角坐标系，抛物线

react-hooks使用1. 什么是react-hooks?** react-hooks是react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。笔者认为，react-hooks思想和初衷，也是把组件，颗粒化，单元化，形成独立的渲染环境，减少渲染次数，优化性能。useCallback✅useC...

socket和公共状态管理连接方案（vuex,redux和小程序）websocket与公共管理逻辑图websocket与vue及vuex案例subscribe订阅器emit触发器heart心跳机制小程序的socket连接 ，我们都知道在vue和react这种单页面组件化项目中，建立socket连接会遇到，重复连接，切换组件连接中断等问题，而且如果想要在任何页面接受到来自socket传递的信息，所...