自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

xjl271314的博客

React及React Native等相关学习心得

  • 博客(59)
  • 收藏
  • 关注

原创 前端工程师成长路线规划

各位博友们好,目前工作中的一些积累已经同步到本人github上了欢迎各位浏览与Star,目前会持续更新。

2020-03-24 20:11:48 590

原创 使用webpack打包组件和基础库并发布至npm

webpack除了打包应用,也可以用来打包js库和一些自定义组件库。单纯只是打包js库和组件库的话 使用rollup打包也是一个不错的选择。我们来实现一个简单的打包例子,这个例子需要满足以下几点功能:需要支持打包压缩版(x.min.js)和非压缩版本(x.js)。支持 AMD/CJS/ESM 模块引入。支持通过script脚本直接引入链接。// ESMimport * as Tool from 'tools';//cjsconst Tool = require('to

2020-05-19 18:28:28 5056 2

原创 mac下charles配置指南

charles工具使用教程2020.05.12Charles是一款http代理服务器和http监视器,当移动端在无线网连接中按要求设置好代理服务器,使所有对网络的请求都经过Charles客户端来转发时,Charles可以监控这个客户端各个程序所有连接互联网的Http通信。安装Charles客户端打开浏览器访问Charles官网,下载相应系统的Charles安装包,然后一键安装即可。抓包显示Charles提供两种查看抓包信息的页签,一个是Structure,另一个是Sequence。S

2020-05-12 22:04:14 6288

原创 css-grid布局

2.Grid布局知识点回顾gird布局grid-template-columns属性grid-template-rows属性使用百分比属性定义行高和列宽使用repeat函数简化使用auto-fill 关键字自动填充使用fr关键字定义行高和列宽使用minmax函数定义范围使用auto 关键字自适应布局使用grid-gap设置单元格之间的间距使用grid-template...

2020-01-05 16:58:00 242

原创 在mac中安装redis并且配置自启动等

安装安装采用Homebrew进行安装,如果还未安装Homebrew先直接下面的语句/usr/bin/ruby -e “$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)”否则直接执行安装命令brew install redis安装过程中每次会进行Homebrew检测更新,...

2019-11-21 13:20:27 942

原创 MySQL truncate 快速删库跑路操作

为了快速的删除数据库中的数据并且跑路 我们需要输入以下命令select CONCAT('truncate TABLE ',table_schema,'.',TABLE_NAME, ';') from INFORMATION_SCHEMA.TABLES where table_schema in ('daname')上面的命令会返回truncate所有表的语句 ,复制出来后执行 就能够清...

2019-09-17 17:17:03 1034 2

翻译 学习笔记——css世界

流“流”又叫文档流,是css的一种基本定位和布局机制。流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制,如你写的html不用css,默认自上而下(块级元素如div)从左到右(内联元素如span)堆砌的布局方式。块级元素和内联元素块级元素是指单独撑满一行的元素,如div、ul、li、table、p、h1等元素。这些元素的display值...

2019-07-24 21:22:28 406

原创 creat-react-app中的serviceWork.js解读

serviceWorker.js关于service work的知识可以戳这里 [service work 介绍]关于 URL 对象可以参考 URL介绍// 这些代码是用来注册service worker服务的// register() 方法需要手动调用 并不会自动执行// This lets the app load faster on subsequent visits in pro...

2019-07-23 11:36:08 3874

原创 Window常用属性详解

window.devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。window.history只读属性,用来获取History 对象的引用,History 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面)的接口。在hist...

2019-05-30 11:40:41 1591

原创 react-native离线缓存策略

前言为什么要进行离线缓存?对于某些应用来说,特别是视频App,视频的数据是存储在服务器的数据库上的,如果用户每次都去请求服务器,这对服务器的压力比较大,资源浪费也比较严重。而且用户可能希望在没有网络的情况下,也可以观看视频,这时候离线缓存是一个比较好的解决方案。离线缓存方案A :优先从本地获取数据,如果数据过时或者不存在从服务器获取数据,数据返回后同时将数据同步到本地数据库。B:优先...

2019-05-21 09:21:01 2330

原创 webpack4打包配置教程看这篇就够了

前言本文将从0开始配置一个webpack打包一个项目的完整流程。准备工作打开终端 新建一个文件夹 用于管理项目mkdir webpack4-demo创建项目在项目内部打开集成终端npm init 生成 一个package.json{ "name": "webpack4-demo", "version": "1.0.0", &amp

2019-03-08 17:35:37 4407 1

原创 Koa2中间件实现的原理剖析

储备知识node.js v7.6.0开始完全支持async/await,koa2 node环境需要7.6.0以上前言实际工作中,我们并没有那么多的时间去理解每个框架本身后面的知识,大多时候都是直接去官方,看着文档直接撸。写了koa项目也一段时间了 ,阅读了一些其他作者的笔记,来总结一下自己对koa2中间件的实现理解。koa2中间件的使用和运行机制,可以去百度一下一大堆,简单来说就是一个洋葱...

2019-03-07 16:43:10 1665

原创 nginx转发时request header里面的wx_token 不见了

场景上线一个小程序,自己在小程序端定义wx_token,在本地测试通过,同样的代码在线上发现死活获取不到token一脸懵逼,最后思考代码一模一样,线上只是多了nginx转发请求,是不是转发的时候没有带上这个token,最后找到了问题所在。解决查看了这个笔者的文档最终解决了该问题,在此在这里做一个记录。nginx转发时默认会忽视请求头中_的部分,需要避免使用A_B字段 或者开启识别。...

2019-01-23 20:38:18 2642

原创 js实现提交评论等行为是过滤敏感词汇DFA算法

前言近期在写一些评论功能的时候想到了为了防止某些用户恶意评论以及政治敏感,涉及法律等问题,需要对用户提交的评论进行过滤操作,查询了一些资料,在此记录下自己的解决方案。阐述DFA是一种计算模型(Deterministic Finite Automaton)也就是确定有穷自动机,它是是通过event和当前的state得到下一个state,即event+state=nextstate。由此逐步构建...

2019-01-09 14:30:39 2504 2

原创 一个关于计算分批进货按照先进先出规则的商品成本统计算法(js版本)

场景:比如说一个商家售卖A,B两款产品,A产品售价50元/件,B产品售价100元/件。商家第一批入库A产品10件,进货成本为20元/件,B产品20件,进货成本为50元/件。商家第二批入库A产品20件,进货成本为30元/件,B产品30件,进货成本为60元/件。现在有位顾客买了5件A产品,5件B产品,经查验都是属于第一批进货,所以订单的成本很容易计算 $20x5+$50x5 = $350元...

2018-12-21 13:36:08 1624

原创 React16.3后的生命周期理解

可以直接拷贝这段代码,然后执行打开控制台查看生命周期的流程。//ComponentLifeCycleimport React, { Component } from 'react';export default class ComponentLifeCycle extends Component { constructor(props) { super(prop...

2018-09-06 17:53:54 869

原创 React-Navigation学习笔记

如何跳转到一个新的页面?this.props.navigation.push(routerName)如何返回之前的页面?this.props.navigation.goBack()如何在页面之间传递参数?this.props.navigation.push('Discovery',{ id:1111, name:'哈哈哈'})如何在新页面...

2018-08-28 14:58:33 419

原创 Ant-Pro默认的代理上传文件失败

场景在使用Ant-Pro的时候,配置了反向端口代理但是上传文件的时候,后台解析文件数据失败,研究了几天后终于发现了解决方案。前端Request Header上传格式已经为form-data上传体格式正确,但是后台接收不到文件信息。研究后才发现,默认的 mock里面配置代理的方式是不能反向代理 文件请求的。解决方案在.webpackrc.js 里面配置proxy的...

2018-07-12 14:43:01 1162 2

转载 HTTP Request Header 请求头理解

Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编码集 Accept-Charset: iso-8859-5 Ac...

2018-07-11 09:42:59 27600 1

原创 Ant适用的省市区联动数据

这是一份格式化后适合Ant直接适用的省市区源数据:module.exports = [{"id":1,"value":"340000","label":"安徽","parent":"0","children":[{&am

2018-06-29 15:13:05 1152 2

原创 js自定义实现图片上传

/*** 自定义图片上传方法 upload* 采用js原生图片上传 formData* 采用axios进行提交* @params* object:{* picUri:result.imagePathArr[0].url,* picName:'user-logo'* }*/export function uploadImage(config) {...

2018-06-28 14:20:36 905

原创 javascript项目开发中的常用公共方法

本篇文章纯属干货,包含了笔者在实际项目开发中经常用到的一些公共通用方法,希望可以帮助大家。

2018-06-13 17:28:19 953

原创 机器学习实战(一)——十大经典算法之K-近邻算法

最近在学习一些python的技术知识和机器学习的相关知识,本章是十大算法的起始篇,K-近邻算法,让我们一起走进机器学习的世界把。前言笔者本身是计算机相关专业,机器学习算法在数据挖掘的学习过程中已经接触过了,但是之前的学习是理论知识方面的学习,说实在之前学习也不知道学了有什么用处。等到现在用到了才发现之前也没有好好认真的学习,现在就从头学习把。引言先用书本上的栗子来引出为什么...

2018-06-11 18:14:36 423

原创 React-Native官方组件的效果探究以及一些优秀的组件推荐

本篇文章主要是对官方组件的一些效果的探讨,旨在深入理解官方组件的一些表现形式和使用方法以及在不同平台下的适配问题方便以后的工作中来选取合适的组件或者类库来完成UI视图的搭建。本篇文章使用的React-Native版本是0.55.3,文档版本是0.51。本篇文章只会罗列一些常用的组件,并不会全篇覆盖,关于详细的用法还请阅读官方文档英文文档中文文档暂时只上IOS端的表...

2018-06-07 17:43:25 1106

原创 ejs服务端渲染从入门到放弃

作为一个合格的前端,服务端渲染的问题,我们肯定也需要掌握。next.js教程地址

2018-06-05 10:23:35 4799 1

原创 RESTful API学习笔记

现在的后端接口都是restful API模式较多,经常性的接触到这个词汇,今天就来仔细研究下它到底是什么意思把。1.字面含义阐述:REST:Representational State Transfer,翻译是”表述性资源状态转化”。 2.理解RESTful要理解RESTful架构,就要去理解Representational State Transfer这个词组的含义。下面...

2018-06-04 18:26:43 774

原创 Authentication plugin 'caching_sha2_password' cannot be loaded: dlopen(/usr/local/mysql/lib/plugi...

mac下MySql启动连接报错:Authentication plugin ‘caching_sha2_password’ cannot be loaded: dlopen(/usr/local/mysql/lib/plugin/caching_sha2_password.so, 2): image not found。问题:在连接数据库时不能加载‘caching_sha2_password’...

2018-06-02 20:02:37 22894 15

原创 Python Numpy库教程

本章节主要介绍的是python的一个常用库numpy,通过本章教程希望能够掌握numpy库一些常用的方法。简介NumPy 是一个 Python 的第三方库,代表 “Numeric Python”,主要用于数学/科学计算。 它是一个由多维数组对象和用于处理数组的例程集合组成的库。使用 Numpy 我们可以轻松进行如下等计算:数组的算数和逻辑运算。傅立叶变换和用于图形操作的例程...

2018-06-02 15:10:47 36227 3

原创 python Matplotlib 系列教程(九)——如何绘制动态图(类似实时股票图=走势图)

本章我们讨论的是如何绘制实时图表,用到的知识是Matplotlib的动画功能。# -*- coding: utf-8 -*-import matplotlib.pyplot as pltimport matplotlib.animation as animationfrom matplotlib import stylefrom matplotlib.font_manager im...

2018-05-21 18:46:34 12828

原创 python Matplotlib 系列教程(八)——从网络加载数据并绘制

上一篇我们从本地csv等文件加载数据,这章我们将学习从网络加载数据,这里涉及到了一点爬虫的知识。下面的代码是一个早期的例子,我运行发现,这个网址已经打不开了,整体的逻辑是这样子的,我会在其他时间去找一个新的网址,然后把新的例子,更新到这边=篇文章的底部:# -*- coding: utf-8 -*-import matplotlib.pyplot as pltimport nump...

2018-05-21 18:11:04 1032 1

原创 React-Native中一些常见的问题

Android Studio编译错误transformClassesWithJarMergingForDebug原因:缓存或者内部原因。解决方法:清空缓存或者参考:[(https://github.com/HujiangTechnology/gradle_plugin_android_aspectjx/issues/2)列表内容...

2018-05-21 14:16:44 2707 3

原创 python Matplotlib 系列教程(七)——从文件加载数据并绘制

本章节我们将要学习如何读取一个文件的内容,并根据文件的内容进行绘制。比如从csv文件读取数据,从txt文件读取数据等。# -*- coding: utf-8 -*-import matplotlib.pyplot as pltimport csvfrom matplotlib.font_manager import FontPropertiesfont = FontProperti...

2018-05-16 21:02:56 11408

翻译 Koa框架基础快速入门

前言Koa是一种简单好用的Web服务端框架,十分的优雅,简洁,表达力强,自由度高,源码仅1000多行,学习起来非常的迅速。本教程旨在介绍Koa框架的相关基础知识,能够帮助你快速的上手。环境Koa基于node.js,想要使用Koa的话,需要先行下载node.js并且版本需要大于7.6,如果还未下载node.js,直接点击这里下载对应的版本。node下载地址 开始下载完成...

2018-05-16 20:06:24 1647

原创 python Matplotlib 系列教程(六)——绘制饼图

本章节讨论的是,饼图的绘制饼图,常用来显示各个部分在整体里面所占有的比例。我们选用这张图片的数据:# -*- coding: utf-8 -*-import matplotlib.pyplot as pltfrom matplotlib.font_manager import FontPropertiesfont = FontProperties(fname=r"C:\Win...

2018-05-14 20:38:30 12072

原创 python Matplotlib 系列教程(五)——绘制叠堆图

这一张介绍的是叠堆图,叠堆图:主要用于显示【部分对整体】随时间的变化关系,叠堆图和饼图很相似但是,叠堆图反应是数据随着时间的变化。

2018-05-14 19:37:12 9178

原创 python Matplotlib 系列教程(四)——散点图

这一章节,我们将介绍散点图的绘制:散点图经常用来显示分布或者比较几个变量的相关性或者分组。要绘制单个点我们需要使用scatter()函数,先看一个最简单的示例:# -*- coding: utf-8 -*-import matplotlib.pyplot as pltfrom matplotlib.font_manager import FontPropertiesfont ...

2018-05-13 13:07:22 81606

原创 python Matplotlib 系列教程(三)——绘制直方图和条形图

在本章节我们将学习如何绘制条形图和直方图条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的; 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的频数或频率,宽度则表示各组的组距,因此其高度与宽度均有意义。 其次,由于分组数据具有连续性,直方图的各矩形通常是连续排列,而条形图则是分开排列。 最后,条形图主要用于展示分类...

2018-05-13 01:02:47 137166 2

原创 python Matplotlib 系列教程(二)—— 图例,标题和标签的使用

在上次一个简单的例子后,我们介绍一下如何使用图例,标题和标签。数据是一个图表所要展示的东西,而图例,标题和标签则更加的帮助我们理解这个图表所包含的意义,是想要传递给我们什么信息。import matplotlib.pyplot as pltx1 = [1, 2, 3]y1 = [1, 4, 9]x2 = [1, 2, 3]y2 = [5, 6, 7]plt.plot(x...

2018-05-12 14:38:35 79580 4

原创 python Matplotlib 系列教程(一)

Matplotlib数据可视化模块能够创建多数据类型的图表,如条形图,散点图,饼图,跌堆图,3D图和地图图表首先为了使用Matplotlib,我们需要安装它:以windows为例:win+R打开cmd调试控制台,默认你已经安装python3.x版本。如果为安装,请移步:https://www.python.org/进行下载。下载完成后 输入 python命令安装...

2018-05-12 14:06:01 1785

原创 React-Native如何在App内打开外链页面

前言:在很多应用场景,比如说分享到微信好友,打开应用下载(更新)地址等,需要从App内部跳转到外部的链接。方案一:React-Native官方提供了一个**Linking**方法,用于和外部App链接进行交互。 static openURL(url: string) 尝试使用设备上已经安装的应用打开指定的url。 你还可以使用其他类型的URL,比如一个地理位...

2018-05-11 19:43:17 14882 7

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除