WEB 十月 07, 2021

JavaScript-hash与history

文章字数 29k 阅读约需 26 mins.

目前单页应用(SPA)越来越成为前端主流,单页应用一大特点就是使用前端路由,由前端来直接控制路由跳转逻辑,而不再由后端人员控制,这给了前端更多的自由。

目前前端路由主要有两种实现方式:hash模式和history...

查看全文

WEB 十月 07, 2021

JavaScript-hash与history

文章字数 29k 阅读约需 26 mins.

目前单页应用(SPA)越来越成为前端主流,单页应用一大特点就是使用前端路由,由前端来直接控制路由跳转逻辑,而不再由后端人员控制,这给了前端更多的自由。

目前前端路由主要有两种实现方式:hash模式和history模式,下面分别详细说明。

hash模式

这个我们应该不陌生,比如在用超链接制作锚点跳转的时候,就会发现,url后面跟了”#id”,hash值就是url中从”#”号开始到结束的部分

1
2
3
4
//纷享销客系统采取的就是hash模式`
https://www.fxiaoke.com/XV/Home...
查看全文

WEB 十月 06, 2021

React-note

文章字数 62k 阅读约需 57 mins.

React Config

react开发常用配置

npm run eject

creat-react-app 脚手架中 eject的作用和意义

1:react-scripts 是 create-react-app 的一个核心包,一些脚本和工具的默认配置都集成在里面,而 yarn eject 命令执行后会将封装在 create-react-app 中的配置全部反编译到当前项目,这样用户就能完全取得 webpack 文件的控制权。所以,eject 命令存在的意义就是更改 webpack 配置

2:npm...

查看全文

WEB 九月 06, 2021

React-组件分类

文章字数 25k 阅读约需 22 mins.

创建方式

React 组件的通过创建方式的不同,可分为以下两种类型的组件:

  • 类组件
  • 函数式组件

类组件(class)

在React中类组件通过关键字class 来声明并通过extend React.Component来实现一个类式组件,其实在JavaScript中类与函数其实没有明显的界限,你可以理解class其实本质也是函数,只不过类的这种书写形式,让我们的代码更具有可读性。

创建方式

1
2
3
4
5
6
class App extend React.Component{
````逻辑代码...
查看全文

WEB 八月 14, 2021

前端常见优化场景

文章字数 16k 阅读约需 15 mins.

长列表

简介

众所周知,浏览器在渲染dom节点的时候,节点越复杂数量越多那么所消耗的时间就会越长。当业务需求为一次性要渲染大量的数据时,数据量过大且一次性全部渲染出来的时候会使浏览器卡顿或者卡死。一般情况下,列表形式的数据展示形式是最常见的,大部分情况下,常见的方式时普通分页加载和无限滚动加载,普通分页加载在这里就不说了大部分后台管理都采用这个方式,无限滚动则是根据鼠标滚动触底时加载下一页数据,实现的思路大致是监听父元素的 scroll 事件(一般是 window),通过父元素的 scrollTop...

查看全文

WEB 八月 14, 2021

前端性能优化

文章字数 100k 阅读约需 1:31

简介

性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是能提升网站性能,坏的一面就是配置麻烦,或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景,需要谨慎使用,请读者带着批判性的眼光来阅读本文。

本文相关的优化建议的引用资料出处均会在建议后面给出,或者放在文末(有些参考资料可能要梯子才能观看)

性能优化24条建议

减少 HTTP 请求

一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过...

查看全文

WEB 八月 13, 2021

React-Native封装原生组件

文章字数 26k 阅读约需 24 mins.

简介

参考文档官方版:Native UI Components

中文版:原生UI组件

上面的文档介绍了facebook 开发小组,如何封装原生组件ImageView给js调用,但是没有具体的实例。本文以封装原生TextView为例,一步一步的实现一个简单示例。

步骤

提供原生视图很简单:

1.创建一个ViewManager的子类(或者更常见的,SimpleViewManage的派生类)。
2.实现createViewInstance方法。
3.导出视图的属性设置器:使用@ReactProp(或@ReactPropGrou...

查看全文

WEB 八月 06, 2021

React-Native-apk打包

文章字数 8.9k 阅读约需 8 mins.

简介

本文主要针对React-Native在安卓平台的打包

修改打包应用名称

修改打包后的应用名称,同时,ic_launcher.png为应用图标

生成秘钥

Java开发环境自带了秘钥生成工具。可以在命令行窗口执行以下命令生成一个发布秘钥:

1
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

其中,my-release-...

查看全文

WEB 八月 03, 2021

React-Native动画

文章字数 33k 阅读约需 30 mins.

前言

对于一个移动应用APP,其中的动画交互能够给用户带来很好的体验,所以动画在移动应用开发过程中是非常重要的;

React Native中实现动画的方式

  • 不断修改state
  • Animated API

首先如果不使用任何动画API,那想到的实现动画效果的方式,应该就是通过不断修改state中的组件相关的属性值来实现动画效果,但是这个就是不断的重新渲染整个页面,所以可能会非常影响性能;
React Native中提供了Animated API来实现动画,Animated API可以简洁的实现各种动...

查看全文

WEB 七月 28, 2021

React-Native踩坑日记

文章字数 188k 阅读约需 2:51

简介

本文主要针对,react-native日常开发中所遇到小坑、大坑、天坑,通过此文你可以避免走弯路(至少少走我走过的弯路),提高你的开发效率,本着分享开源的原则,给广大刚入门react-native的小白同志们送温暖。主要内容如下:

  • Common components(常用第三方组件集成)
  • Common plug (常用插件集成)
  • Common Issues(常见开发问题)

Common components

react-native-vector-icons(图标组件)

简介:

react...

查看全文

WEB 七月 27, 2021

React-navgation

文章字数 66k 阅读约需 1:01

简介

React Navigation是React Native是目前最主流的屏幕页面切换的导航方案。React Navigation 5.x版本是目前最新的稳定版本,相对于老版本的配置方式更接近React Router,更好理解。
reactNative0.60.0以上的版本会省去很多配置,建议使用0.6以上版本
npx react-native init demo --version 0.60.0 //版本号自行定义

依赖安装

1
2
3
4
// 安装react-navigation
yarn add...
查看全文
加载更多
0%