xinyue_htx-CSDN博客

原创关于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 3978

原创微信小程序在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 3434 1

原创关于taro在微信小程序下函数组件多次执行问题

今天和大家聊一聊taro在微信小程序下函数组件多次执行问题关于taro和小程序首先taro是一个针对多端小程序的编译框架。对于微信小程序来说，taro的源码最终会编译成微信小程序可执行的代码。因此对于使用taro进行开发来说，既会受到小程序的约束，又能利用小程序的优势小程序初始数据对于小程序来说，可以通过data进行数据绑定，为页面模板提供初始数据。这种方式能够更有效的提升初始渲染的效率。但是对于react来说，组件的初始状态来自于组件的构造函数中的初始state或者函数组件的usest

2020-07-14 11:37:06 1510

原创从0开始实现redux中间件机制

今天和大家聊一聊redux的中间件原理。注：本文内容大部分参考redux的官网文档Middleware - Redux。如果英文好的同学可以直接阅读官网文档，写的非常好。关于redux-middlewareredux中间件提供了一个切面的关注点。我们可以很方便的利用中间件进行AOP编程，比如日志功能，埋点上报等。这里主要是利用装饰器模式，在实际任务执行之前，动态添加before和after的逻辑。这样就能形成一个洋葱模型接下来我们就看下如何手动开写一个日志中间件手动处理日志首先我们手动

2020-06-17 18:52:29 238

原创如何设计一个远程桌面程序

今天和大家聊一聊如何实现一个远程桌面程序。关于远程桌面对于远程桌面程序，相信大家一定有所了解。常见的产品有TeamViewer，向日葵，微软远程桌面，QQ远程桌面等等。远程桌面能够在定位用户问题，协助操作，远程办公上有非常便捷作用。这里我们就来自己实现一个远程桌面程序。需求分析对于一个远程桌面程序，我们要解决的问题主要有三点：获取桌面流——没有桌面流，怎么做远程桌面传输数据——包括桌面流以及键盘鼠标等信息传输控制信息——建立连接，断开连接等这里需要注意的点是第二点传输数据。远

2020-06-16 14:30:09 3875

原创如何在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 7007 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 1119

原创理解NAT穿越

今天和大家聊一聊NAT穿越什么是NATNAT(Network Address Translation)，即网络地址转换，是一种ip数据包的重写技术。为什么要要有NAT呢？这是因为现实中公网的ip地址过少，很多单位，学校都不能满足每个主机分配一个公网地址。因此会通过NAT技术将内网的主机地址映射为同一个公网地址的不同端口，进行外网访问。NAT的缺点NAT解决了内网环境下多主机上网的问题，但是也造成了难以从外网访问内网主机的问题。尤其是在一些p2p应用的场景下(比如现在越来越火的webrtc

2020-06-11 17:22:20 2487 2

原创 node版本管理工具NVM-windows介绍及原理

今天和大家聊一聊node在windows下的版本管理工具NVM-windows为什么需要node版本管理主要原因有两个：开发时保证项目以及依赖库（尤其是原生的addon）API兼容。调试特定node版本下的软件问题。推荐的node版本管理工具如果是在mac/linux下，可以使用nvm-sh/nvm如果是在windows下，可以使用我们今天要讲的coreybutler/nvm-windows使用方法卸载你电脑上的node以及npm在Releases · coreybut

2020-06-10 09:18:42 820

原创关于实时协同编辑的架构思考

今天和大家聊一聊协同编辑的架构设计。什么是协同编辑协同编辑是指多人同时对同一份文档进行编辑。例如我们熟悉的wiki，百度百科，以及办公产品腾讯文档，乃至我们的代码管理工具git，都可以算作是协同编辑产品。实时协同编辑随着大家在家办公，异地办公的情况普及，实时协同编辑工具也变得更加引人注目。实施协同编辑会面临几个问题：实时性——输入的数据可以及时被相关协作者看到一致性——各端看到和编辑的文档需要保持一致容错性——允许存在一定的网络波动，和数据丢失但是这三个问题会形成一个不可能三角即

2020-06-09 19:45:02 1122

原创理解node中的stream的背压机制

今天和大家聊一聊node中的stream的背压机制。为什么要有流在编写服务时，经常会需要涉及到文件或者数据压缩的问题。使用合适的压缩算法能够有效减少请求文件的大小，从而减少网络中的数据传输量，提升响应速度。假设我们采用最普通的方式处理一个文件的获取，压缩，发送这个过程，就会是如下所示的图形表示：我们看到整个执行流程是串行的，所有耗时都会累加，导致整个过程耗时很长。流的出现就是为了解决这个串行处理的问题。如下图所示，我们将整个文件分成一个个小块，利用生产者消费者模式，上一个阶段的操作有一小部

2020-06-08 19:45:46 346

原创如何编译electron依赖的c++模块

今天在写electron的项目时，需要使用到robotjs。而robotjs是c++编写的库，所以需要在不同的平台进行重新编译。期间遇到了许多问题，mark一下。问题来源所有代码最终是要转换为操作系统相关代码，才能在指定的OS上运行。像java，python这类代码是需要对应平台的vm环境，转成平台相关代码才能够执行。而c++并没有这样的vm环境，因此对于node的c++模块，需要先编译成平台相关的代码，才能执行。方案这里我采用的方式是node-gyp进行编译整体方案如下所示，利用nod

2020-06-06 01:07:21 2419

原创如何指定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 4306 4

原创理解webpack的hash，contenthash，chunkhash

今天和大家聊一聊webpack中不同hash值的作用。问题来源对于浏览器来说，一方面期望每次请求页面资源时，获得的都是最新的资源；一方面期望在资源没有发生变化时，能够复用缓存对象。这个时候，使用文件名+文件哈希值的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加hash字段。区分hash，contenthash，chunkhashwebpack内置的hash有三种：hash：每次构建会生成一个hash。和整

2020-06-01 19:06:20 612

原创理解React如何实现批量状态更新

今天和大家聊一聊React如何实现批量状态更新。引子我们知道React的setState方法并不是同步执行的。在React的生命周期中发生的多次setState的变更会进行合并，最终减少推送给浏览器的DOM变更次数，从而提升前端性能。那么这部分到底是怎么实现的呢？我们来看下Transaction在React执行点击事件或者生命周期函数时，会使用一个Transaction对象将整个执行过程包裹成一个事务。Transaction对象结构如下图所示<pre> *

2020-05-31 16:13:54 1744

原创 Nodejs源码阅读——事件循环

最近看到Nodejs的事件循环，发现网上的一些文档和描述都不够清晰。所以今天来和大家一起从源码出发了解下Nodejs的事件循环机制。官网描述我们先看下nodejs的官网对事件循环的描述。 ┌───────────────────────────┐┌─>│ timers ││ └─────────────┬─────────────┘│ ┌─────────────┴─────────────┐│ │ pending callba

2020-05-27 17:18:07 263

原创如何使WPF在窗口外部区域可拖动缩放

今天来和大家聊如何使WPF在窗口外部区域可拖动缩放。问题来源对于WPF窗口来说，默认的可拖动缩放区域较小。在某些应用场景下我们期望能够设置一个较大的可拖动的缩放区域。自定义WindowChrome有同学马上想到了，通过WindowChrome的ResizeBorderThickness属性进行设置比如下面的方式<Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2

2020-05-22 19:44:07 920 3

原创理解React的渲染更新

今天来和大家聊React的渲染更新过程。React是JavaScript代码在聊渲染更新之前，我们不能忽视的一个概念是——React是JavaScript代码。我们都知道React传给浏览器的并不是一个HTML代码，而是一段js脚本。而在浏览器接收到js脚本之后，再执行并生成对应的html元素，插入到DOM中。这种做法提供了前端组件化的能力，能够让前端的同学不再“面向UI”进行操作。例如上面的例子，我们把一段原生的HTML元素封装成了一个Component组件。组件成了一个独立的模型概念，

2020-05-21 17:08:11 441

原创如何处理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 2941

原创 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 410

原创理解GraphQL

之前在restful理解_数据库_黄腾霄的博客-CSDN博客和大家提及了RESTfulAPI的一个弊端，就是接口膨胀。也提到了一个解决方案——GraphQL今天就和大家讲一下什么是GraphQLRESTfulAPI的问题请求爆炸我们先假设有这样一个商城应用，后端对应着用户，订单，物流三个微服务，通过RESTfulAPI暴露服务。在客户端，我们需要完成查询指定用户的所有商品的物流信息。那么我们的请求行为应该是这样的。如上图所示，我们需要先通过用户ID获取从用户服务中获取订单信息，从其中抽取

2020-05-16 17:43:39 253

原创如何在CefShape中禁用右键菜单

今天遇到了一个在cefsharp中禁用浏览器默认右键菜单的需求，mark一下。问题描述当我们使用默认的cefsharp的ChromiumWebBrowser时，会默认添加一个右键菜单项，如下。实际上，我们业务上往往不需要嵌入浏览器中包含这种右键菜单。或者我们期望自己实现业务需求的右键菜单。那应该怎么办呢？解决方法实际上我们ChromiumWebBrowser暴露了一个MenuHadler属性。这个是一个IContextMenuHandler接口对象。我们可以通过自己实现这个接口，进行注

2020-05-15 20:12:16 953

原创不要在Directory删除后立刻调用Directory.Exist

今天遇到一个神奇的Directory问题，和大家介绍下。问题描述简单描述下问题，当你调用System.IO.Directory.Delete删除一个文件夹，然后立即用System.IO.Directory.Exists进行判断会概率性返回true。也就是说System.IO.Directory.Exists在检测一个刚刚被删除的文件夹时可能得到错误结果代码如下using System;using System.IO;namespace ConsoleApp2{ class P

2020-05-15 19:17:50 223

原创 WPF的RadioButton指定groupname在window关闭后无法check

今天遇到一个神奇的WPF的RadioButton的group问题，和大家介绍下。问题描述英文好的同学可以直接看吕毅 - walterlv同学在github提的issue。最小复现demo，见毅仔的仓库我将一组RadioButton关联到了同一个GroupName下，并且绑定了同一个ViewModel。 <Border> <RadioButton GroupName="A" IsChecked="{Binding Bar, Source={x

2020-05-14 17:25:45 544

原创 HATEOAS简介

之前restful理解_数据库_黄腾霄的博客-CSDN博客和大家介绍了对RESTful的理解。今天和大家介绍下RESTful中最重要的一个概念HATEOAS。什么是HATEOASHATEOAS是Hypermedia as the Engine of Application State的缩写。翻译过来就是超媒体即应用状态引擎。那这个是什么样的一个东西呢？我们先来看一个现实中的问题。问题来源我们在项目开发中经常需要涉及同后端对接API。对接的过程一般都是后端的同学给出一个文档，告诉我们有哪些A

2020-05-12 20:29:45 7729

原创 RESTfulAPI中能否使用query string

之前restful理解_数据库_黄腾霄的博客-CSDN博客和大家介绍了对RESTful的理解。然后就有小伙伴问了我灵魂问题，对于RESTfulAPI设计，是不是不能使用query string？关于这个问题，网上观点两派纷争不断，为此我特意去拜读了Roy Thomas Fielding的博士论文，以及结合自己的理解来和大家谈谈RESTfulAPI能否使用query string。问题来源对于RESTfulAPI，大家都有一个基本的认识，网上一切皆资源，用URI来定位唯一的资源。而对于领域模型的实体

2020-05-11 22:00:46 927

空空如也

空空如也