mmzzll2019-CSDN博客

原创前端实现一个异步的promise

面试经常被问道怎么实现Promise，下面我们来实现一个Promise。我在网上搜索了一堆实现方案，总感觉有些不符合我的期望，下面是我的一些参考的实现方案：1. https://www.jianshu.com/p/43de678e918a2. https://segmentfault.com/a/1190000016550260MDN上的Promise文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Globa

2021-06-06 00:21:52 259 1

原创计算两个字符串的最长相同子串

两个字符串，怎么求出它们的最长相同子串呢？最简单的方法是取较短的字符串，由长到短地枚举所有可能的子串，用这些子串去匹配较长的字符串，若是匹配成功，则说明这就是它们的最长相同子串。下面是我的实现，具体案例点击这里const computeMaxStr = (str1, str2) => { const s1 = str1 || ""; const s2 = str2 || ""; let max = s1; let min = s2; if (s2.length > s1.

2021-05-18 11:26:10 1008

原创制作react组件的package

我们平常的项目都是常规的开发流程，打包后直接放到服务器运行。如何才能像我们安装react一样，直接从npm平台下载呢？下面我来说下我的实现方案：1. 本地打包方式1.1 创建项目# 利用create-react-app插件创建react项目npx create-react-app my-package# 安装其他依赖npm i -D @babel/cli rimraf若还需要其他依赖，请自行安装。1.2 修改package配置我这里比较暴力，把所有的依赖都改成了devDependence

2021-05-10 02:43:47 451

原创监听react-router路由的变化

我们有时候会遇到这种业务场景：进入某个页面时，我们需要验证用户是否已经登陆，是否拥有足够权限？我们可以通过监听路由的变化来实现。但是在react下，怎么实现呢？下面讨论实现过程：手动实现react-router-watcher实现手动实现使用Hook方式实现：import { useEffect, useState, useRef, useCallback, useMemo } from 'react'import { useLocation, useHistory, useRouteM

2021-05-10 02:06:06 8906

原创 js从0开始实现大整数加法

如果两个整数太大，超过了 2^52 - 1 的时候，做加法时，会出现精度损失的现象，这时候可以直接利用js提供bigInt类型来做加法，这里就不再赘述了。我这里是用字符串来输出做加法的结果，通过拆分数字来实现无精度损失的加法运算。具体实现如下：function sum(a, b, step = 9){ const ar1 = splitNumber(a, step) const ar2 = splitNumber(b, step) if (ar1[0] !== ar2[

2021-05-07 16:44:44 181

原创在虚拟机下运行HBuilder连接安卓真机调试

在虚拟机下运行HBuilder连接安卓真机调试安卓真机连接运行后，点击控制台右边的调试按钮，发现怎么都连接不上。后来在交流群中讨论，有人说是由于手机和虚拟机的ip地址所在的ip段不一样导致的，检查了下确实如此。于是将vmware虚拟机的网络连接方式由NAT模式改为Bradged模式，调试器连接成功！...

2021-04-23 23:09:58 438

原创 uni-app 云打包apk生成证书文件

uni-app 云打包apk生成证书文件1.安装jdk或者jre2.配置好jdk/jre环境变量3.打开命令行运行如下命令：keytool -genkey -alias my_3d_characters -keyalg RSA -sigalg SHA256withRSA -keysize 2048 -validity 3650 -keystore my_3d_characters.keystore -storetype jks...

2021-04-23 22:56:32 625

原创递归优化

先来看下斐波那契数列的递推公式： f[0]=1, f[1]=1, f[n]=f[n-1] + f[n-2]（n>=2且n是整数）。很容易写出下列代码： const fabo = (n) => { if (n === 0 || n === 1) return 1; return fabo(n-2) + fabo(n-1); }稍微分析一下，就可以知道，这段代码存在大量的...

2019-05-09 19:04:53 414

原创自定义事件

查阅文档https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent发现可以使用CustomEvent自定义事件。下面基于react-hook实现一个自定义事件example。export const CustomEventHookTest = () => { const evt = useMemo(() => { ...

2019-05-07 23:16:56 110

原创 React 之reconciliation--diff算法

参考文档https://reactjs.org/docs/reconciliation.html传统的diff算法https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf。为了用最少的操作，把一颗树结构转化成另外一颗树结构，使用了非常复杂的算法，复杂度达到了O(n^3),其中n为树的节点数。与传统的diff算法...

2019-04-22 23:51:40 259

原创 js浅拷贝和深拷贝的方法和坑

在c语言中有指针这个概念，浅拷贝的概念有点类似于引用指针。对于普通的Boolean、String和Number不是通过new关键字产生的来说，深拷贝和浅拷贝没有区别。const shallowCopyStrNumBool = (origin) => { return origin;}const deepCopyStrNumBool = (origin) => { if (...

2019-04-22 18:37:35 186

原创 React的Portals的用法

在线演示https://myp00yr1xx.codesandbox.io/react-portal在线代码https://codesandbox.io/embed/myp00yr1xx?fontsize=14不知道大家想过这样一个问题没有，我们创建了一个子组件后，要把它放到指定的dom元素下面，该怎么办？ReactDom提供了这样一个api// child可以是ReactElement,...

2019-04-17 03:35:32 750

原创 React.createContex的用法

在线代码https://codesandbox.io/embed/myp00yr1xx?fontsize=14在线演示https://myp00yr1xx.codesandbox.io/react-context当某个属性需要传递很多层组件才到目标位置时，我们可以使用React.createContext。我们先来看看使用props层层传递的方式，a,b的传入路径a -》A-》B1-》C1...

2019-04-17 01:33:26 1364

原创基于react的tree组件的简单实现

在线示例https://codesandbox.io/embed/myp00yr1xx?fontsize=14/react-tree2实现的效果点击分支节点时，展开其子节点点击任意节点都能十分容易的确定对应的节点数据能接受形如下列数组格式的原始节点数据： [ { id: 5, name: "节点0-3-5", p...

2019-04-15 18:51:28 4109

原创 React.memo的用法

在使用function 作为statless组件的时候，我们通常是这样的：const Foo = (props) => { console.info(props.name); return <div>props.name={props.name}</div>}export default class Bar extends React.PureComp...

2019-04-15 02:07:23 5060

原创 React动态加载组件

查阅react的官网文档，发现两种方式： [[React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)和 [loadable-components](https://github.com/smooth-code/loadable-components)...

2019-04-14 23:08:24 14606

mmzzll2019的博客