随笔分类 - js
about js
摘要：首先写 2 个组件,打印一下他们的属性: const TextFunc = (props) => { console.log('render TextFunc',props) return <div>function</div> } class TextComponent extends React
阅读全文
摘要：mapStateToProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上。 （1）这个函数的第一个参数就是 Redux 的 store，我们从中摘取了 count 属性。你不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要
阅读全文
摘要：【学海拾贝】是一个标签,用来记录我工作中碰到过的问题,在空闲时探索它的原因及原理 由来 2 年前我做 h5 项目的时候,遇到了上传图片的功能实现,于是就用了 `` 这个标签来实现图片的上传 当我点击标签,选择拍照的时候,发现出现的图片和拍照出来是不一样的,它的方向发生了旋转,这样就和拍照的样子不一样
阅读全文
摘要：最近意外发现了这个框架,从这框架的说明和我的实践来看,确实是以后 PC 端的主流框架, 大家都知道 electron 的唯二缺点: 1. 性能较差 2.包的尺寸太大.下面给出使用 tauri 的理由 tauri 介绍 以下介绍来自官方说明: 为什么使用 tauri 原始Tauri应用程序的打包大小小
阅读全文
摘要：最近找了一些文档的生成工具,结果发现了这个 可以通过注释,自动生成对应的文档,对于 react 库来说十分方便 安装 typescript 支持 配置 这次的例子是使用 cra 来创建的项目,还有其他项目也是支持的 "点击参考" 在根文件夹下创建 文件 可以使用如下的配置 更加具体的配置项可以 "点
阅读全文
摘要：关于 mobX 在 react 16.8.0 以上的用法 以下例子均取自官网文档 一般用法: import { observer, useLocalStore } from 'mobx-react'; const Hooks = observer(() => { const todo = useLo
阅读全文
摘要：说实话,作为前端来说,单元测试,并不是一种必须的技能,但是确实一种可以让你加法的技能 之前我一个库添加了单元测试,加完之后感悟颇深,所以写下这篇文章来记录 环境搭建 一般来说,普通的库,如果没有添加 babel 的话,在 test 里面,也是不能使用 es6 的语法的 总结来说 test 文件的兼容
阅读全文
摘要：useCallback,useMemo 因为这两个 api 的作用是一样的,所以我放在一起讲; 语法: 区别在于第一个参数,还有参数的传递,另外 useCallback 中 DependencyList 是一个必须值 这两个 api 的作用基本就是缓存数据/方法 使用过 react 的人都知道,在组
阅读全文
摘要：useState 经典案例: 此例子中, 是最新的 hooks api; 语法: 其中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值 useState initialState 该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了 (
阅读全文
摘要：首先假设 基础的环境是有 creat react app 所创建的 即所有基础的loader,插件的 cache 都已经缓存了 在这种情况下想加速,真是很难 不过,有一个插件是可以观察 各个模块所花的时间的: ,他给了我们一个观察点 有很多文章都会说 happypack 有能加速的效果 但是经过我的
阅读全文
摘要：react 中状态的六个存储位置 1. state 我想大家都知道这个地方,而且在使用 setState 时会触发组件的更新 2. class prop 将值存在 class 的对象中,如: 这个 class 中的 count 便是这种存储方式; 优点: 改变值时不会触发组件的更新,当组件销毁后,再
阅读全文
摘要：之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下 之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看 现在讲讲一个页面的首屏加载速度该如何提升 提前说明 需要 webpack bundle analyzer 插件来进行 build 文件的分析 异步文件和必须文件
阅读全文
摘要：几个月前看到了这篇文章 https://philipwalton.com/articles/deploying es2015 code in production today/,给了我很大的启发,本来是想使用 vue 来当实验对象的,但是在 vue cli3 的测试版中就有了这个内容,所以这次使用
阅读全文
摘要：使用 pug 的原因: 使得 HTML 写起了来更加清晰和快捷 用法: Vue 的用法没有变化: 要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析 vue cli 2+ 配置: 下载包: 在build/webpack.base.conf.js 的
阅读全文
摘要：时至今日(2018 7 11),vue cli 任然未稳定支持至webpack4,所以我自己也来创建一个 vue 初始化模板 不过大致的原因我也能猜到,因为很多插件仍然是一个不稳定的点,比如我在创建中也遇到了,至今未有解决的方案 webpack 4 优点: 总结来说就是 加快了 dev 模式下的编译
阅读全文
摘要：想必很多人都经历过做完一个项目后,再打包发现某些文件非常大,导致页面加载时很慢,这就很影响用户体验了,所以在我经历了一些打包后,讲讲如何有效地缩小包体积,加快页面的首屏渲染 动态 polyfill 相信很多项目都会用到polyfill 那么一整个polyfill 会占据很多的空间,这个时候需要使用动
阅读全文
摘要：记录 vue 项目打包的一些事情 首先声明项目都是由 vue cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 1. 首先是大家最需要注意的 ajax 切换环节 以前一开始用 Vue 的时候我是在 build 之后,手动修改 ajax 的请求前缀 比如现在我使用的 a
阅读全文
摘要：1. js 数字操作: 1.1 取整: 取整有很多方法如: 前面2种是经常用到的,后面3种算是比较偏的,因为其有不足之处,比如将下面代码放到 console 里测试: 你会发现问题; 输出的是: 其原因就在于js数字存储的方式,js的数值存储可以说是32位~~64位是透明的~~的,他的前31位是用来
阅读全文
摘要：之前项目中用来判断是否登录我写了多种方案,但是最终只有一个方案是比较好的,这篇博客就是分享该方案; 先说基本要求: 项目中的登录状态是依据服务器里的状态来作为判断依据; 每一个需要登录后才能操作的接口,如果未登录都会返回未登录的错误; 项目中使用 vuex,axios,router; 判断登录方案需
阅读全文
摘要：前言 Android webView 兼容体验真的差到了极点!! 前一阵子,老板要将 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包, 原理是很简单的,就是打开 APP 的时候用 webView 加载网站的网址,这样服务器一次更新,就能更新微信版,
阅读全文