前端
xinyue_htx
自建博客https://xinyuehtx.github.io/
展开
-
关于taro2.x版本useEffect中改变observable对象导致的Effect执行2次问题
今天和大家聊一聊taro2.x版本useEffect中改变observable对象导致的Effect执行2次问题问题现象话不多说,先看代码。代码很简单,Taro+mobx在函数组件内使用,并且在useEffect中更新test的状态。注意此时useEffect传入了空数组import Taro, { useEffect } from '@tarojs/taro';import { View } from '@tarojs/components';import { observer } from原创 2020-07-15 16:27:43 · 4028 阅读 · 0 评论 -
微信小程序在ios中下拉出现“橡皮筋”效果
今天和大家聊一聊微信小程序在ios中下拉出现“橡皮筋”效果问题现象话不多说,先看代码(使用taro编写)。代码很简单,一个flex的容器+一个允许进行下拉刷新的ScrollView,就组成了一个最简democonst TicketRecordsPage = () => { const revenueData = new Array(10).fill(0).map((_, i) => i) return ( <View className={styles['root原创 2020-07-14 17:47:26 · 3527 阅读 · 1 评论 -
关于taro在微信小程序下函数组件多次执行问题
今天和大家聊一聊taro在微信小程序下函数组件多次执行问题关于taro和小程序首先taro是一个针对多端小程序的编译框架。对于微信小程序来说,taro的源码最终会编译成微信小程序可执行的代码。因此对于使用taro进行开发来说,既会受到小程序的约束,又能利用小程序的优势小程序初始数据对于小程序来说,可以通过data进行数据绑定,为页面模板提供初始数据。这种方式能够更有效的提升初始渲染的效率。但是对于react来说,组件的初始状态来自于组件的构造函数中的初始state或者函数组件的usest原创 2020-07-14 11:37:06 · 1555 阅读 · 0 评论 -
从0开始实现redux中间件机制
今天和大家聊一聊redux的中间件原理。注:本文内容大部分参考redux的官网文档Middleware - Redux。如果英文好的同学可以直接阅读官网文档,写的非常好。关于redux-middlewareredux中间件提供了一个切面的关注点。我们可以很方便的利用中间件进行AOP编程,比如日志功能,埋点上报等。这里主要是利用装饰器模式,在实际任务执行之前,动态添加before和after的逻辑。这样就能形成一个洋葱模型接下来我们就看下如何手动开写一个日志中间件手动处理日志首先我们手动原创 2020-06-17 18:52:29 · 255 阅读 · 0 评论 -
如何设计一个远程桌面程序
今天和大家聊一聊如何实现一个远程桌面程序。关于远程桌面对于远程桌面程序,相信大家一定有所了解。常见的产品有TeamViewer,向日葵,微软远程桌面,QQ远程桌面等等。远程桌面能够在定位用户问题,协助操作,远程办公上有非常便捷作用。这里我们就来自己实现一个远程桌面程序。需求分析对于一个远程桌面程序,我们要解决的问题主要有三点:获取桌面流——没有桌面流,怎么做远程桌面传输数据——包括桌面流以及键盘鼠标等信息传输控制信息——建立连接,断开连接等这里需要注意的点是第二点传输数据。远原创 2020-06-16 14:30:09 · 4060 阅读 · 0 评论 -
如何在JavaScript中调用C++动态链接库
今天和大家聊一聊如何在JavaScript中调用C++动态链接库什么是ffiffi 是Foreign Function Interface的简称,是一款nodejs的addon。可以让大家在nodejs中调用c风格的c++动态链接库ffi调用起来非常简单,可以看下官网的这个例子var ffi = require('ffi-napi');var libm = ffi.Library('libm', { 'ceil': [ 'double', [ 'double' ] ]});libm.原创 2020-06-14 11:14:08 · 7308 阅读 · 1 评论 -
关于taro使用React.Fragment语法的问题
今天和大家聊一聊taro使用React.Fragment出现的问题。什么是React.Fragment在react组件中,只能返回单一的元素,不能返回一个元素列表。//报错render() { return ( <ChildA /> <ChildB /> <ChildC /> );}//正常render() { return ( <div> <ChildA />原创 2020-06-11 18:12:19 · 1166 阅读 · 0 评论 -
理解NAT穿越
今天和大家聊一聊NAT穿越什么是NATNAT(Network Address Translation),即网络地址转换,是一种ip数据包的重写技术。为什么要要有NAT呢?这是因为现实中公网的ip地址过少,很多单位,学校都不能满足每个主机分配一个公网地址。因此会通过NAT技术将内网的主机地址映射为同一个公网地址的不同端口,进行外网访问。NAT的缺点NAT解决了内网环境下多主机上网的问题,但是也造成了难以从外网访问内网主机的问题。尤其是在一些p2p应用的场景下(比如现在越来越火的webrtc原创 2020-06-11 17:22:20 · 2607 阅读 · 2 评论 -
理解node中的stream的背压机制
今天和大家聊一聊node中的stream的背压机制。为什么要有流在编写服务时,经常会需要涉及到文件或者数据压缩的问题。使用合适的压缩算法能够有效减少请求文件的大小,从而减少网络中的数据传输量,提升响应速度。假设我们采用最普通的方式处理一个文件的获取,压缩,发送这个过程,就会是如下所示的图形表示:我们看到整个执行流程是串行的,所有耗时都会累加,导致整个过程耗时很长。流的出现就是为了解决这个串行处理的问题。如下图所示,我们将整个文件分成一个个小块,利用生产者消费者模式,上一个阶段的操作有一小部原创 2020-06-08 19:45:46 · 370 阅读 · 0 评论 -
如何编译electron依赖的c++模块
今天在写electron的项目时,需要使用到robotjs。而robotjs是c++编写的库,所以需要在不同的平台进行重新编译。期间遇到了许多问题,mark一下。问题来源所有代码最终是要转换为操作系统相关代码,才能在指定的OS上运行。像java,python这类代码是需要对应平台的vm环境,转成平台相关代码才能够执行。而c++并没有这样的vm环境,因此对于node的c++模块,需要先编译成平台相关的代码,才能执行。方案这里我采用的方式是node-gyp进行编译整体方案如下所示,利用nod原创 2020-06-06 01:07:21 · 2457 阅读 · 0 评论 -
如何指定create-react-app默认启动的浏览器
今天和大家聊一聊create-react-app设置默认启动浏览器的方式。问题来源对于create-react-app默认会在npm start执行之后在默认浏览器打开页面。但是,有的时候,我们期望能够设置特定的浏览器启动。或者是在开发诸如electron之类的应用时,不期望启动浏览器。解决方案在npm脚本中,我们可以使用create-react-app提供的配置参数BROWSER指定启动的浏览器。比如如果你期望指定浏览器为chrome,就可以写"start": "BROWSER=chro原创 2020-06-05 16:05:03 · 4412 阅读 · 4 评论 -
理解webpack的hash,contenthash,chunkhash
今天和大家聊一聊webpack中不同hash值的作用。问题来源对于浏览器来说,一方面期望每次请求页面资源时,获得的都是最新的资源;一方面期望在资源没有发生变化时,能够复用缓存对象。这个时候,使用文件名+文件哈希值的方式,就可以实现只要通过文件名,就可以区分资源是否有更新。而webpack就内置了hash计算方法,对生成文件的可以在输出文件中添加hash字段。区分hash,contenthash,chunkhashwebpack内置的hash有三种:hash:每次构建会生成一个hash。和整原创 2020-06-01 19:06:20 · 644 阅读 · 0 评论 -
理解React如何实现批量状态更新
今天和大家聊一聊React如何实现批量状态更新。引子我们知道React的setState方法并不是同步执行的。在React的生命周期中发生的多次setState的变更会进行合并,最终减少推送给浏览器的DOM变更次数,从而提升前端性能。那么这部分到底是怎么实现的呢?我们来看下Transaction在React执行点击事件或者生命周期函数时,会使用一个Transaction对象将整个执行过程包裹成一个事务。Transaction对象结构如下图所示<pre> *原创 2020-05-31 16:13:54 · 1781 阅读 · 0 评论 -
Nodejs源码阅读——事件循环
最近看到Nodejs的事件循环,发现网上的一些文档和描述都不够清晰。所以今天来和大家一起从源码出发了解下Nodejs的事件循环机制。官网描述我们先看下nodejs的官网对事件循环的描述。 ┌───────────────────────────┐┌─>│ timers ││ └─────────────┬─────────────┘│ ┌─────────────┴─────────────┐│ │ pending callba原创 2020-05-27 17:18:07 · 283 阅读 · 0 评论 -
理解React的渲染更新
今天来和大家聊React的渲染更新过程。React是JavaScript代码在聊渲染更新之前,我们不能忽视的一个概念是——React是JavaScript代码。我们都知道React传给浏览器的并不是一个HTML代码,而是一段js脚本。而在浏览器接收到js脚本之后,再执行并生成对应的html元素,插入到DOM中。这种做法提供了前端组件化的能力,能够让前端的同学不再“面向UI”进行操作。例如上面的例子,我们把一段原生的HTML元素封装成了一个Component组件。组件成了一个独立的模型概念,原创 2020-05-21 17:08:11 · 467 阅读 · 0 评论 -
如何处理flex布局的最后一行元素宽度问题
今天来和大家聊一个有意思的flex布局问题。注:源码可以参考我在codepen做的demoflex问题来源问题是这样的,我有一个list,期望做成一个flex的wrap布局。每个item项有一个最小宽度,随着窗口的拉伸,item宽度会增加,并且占满容器空间。当窗口宽度增加到一定程度,会触发wrap的布局,每一行会多排列一个item。代码如下<div class="app-list"> <div class="app-block"></div>原创 2020-05-18 19:53:23 · 3016 阅读 · 0 评论 -
React-Router源码简析
今天来和大家解析下React-Router的源码。React-Router是React生态中最重要的组件之一。他提供了动态的前端路由功能,能让我们在前端应用实现,高效的SPA应用。那么这个东西是怎么实现的呢?我们来一起看下它的源码Router.jsconstructor(props) { super(props); this.state = { location: props.history.location }; // This is a bi原创 2020-05-16 19:30:29 · 431 阅读 · 0 评论