fansueluo


  • 首页

  • 归档

  • 关于

React Hooks深入使用心得

发表于 2021-03-29 | 更新于: 2021-03-29

不要类比 class 组件里的生命周期

useEffect(fn, [])只会执行一次,但是不完全等于componentDidMount生命周期。如果将这两种一一对比,对 Effect 的使用就很难提升了,踩坑之后的领悟。

useEffect 使用

  1. 把不依赖 props 和 state 的函数提到你的组件外面
  2. 把那些仅被 effect 使用的函数放到 effect 里面
  3. 如果这样做了以后,你的 effect 还是需要用到组件内的函数,包括 props 传进来的函数,则使勇敢 useCallback 包一层
    阅读全文 »

tree、编辑器优化记录

发表于 2021-02-28 | 更新于: 2021-03-02

引言

本篇记录最近工作中工程优化的收获,通过优化部门选择器,感觉对树的前中后序遍历理解更深入了;而对编辑器的优化,我发现目前的编辑器像 draftjs、slatejs 等这些比较受欢迎的富文本库对中文的编辑不是那么友好,在解决拼音输入导致页面报错问题的过程中,调试了下 draftjs 0.11.7 的源码,学习了一个新的浏览器 API:MutationObserver,并对 Selection 有了初步的了解

阅读全文 »

Threejs 实现简单的全景图

发表于 2021-01-12 | 更新于: 2021-01-24

360 度、720 度全景

360 全景特点:

1、全:全方位,全面的展示了 360 度球型范围内的所有景致;可在例子中用鼠标左键按住拖动,观看场景的各个方向;
2、景:实景,真实的场景,三维实景大多是在照片基础之上拼合得到的图像,最大限度的保留了场景的真实性;
3、360:360 度环视的效果,虽然照片都是平面的,但是通过软件处理之后得到的 360 度实景,却能给人以三维立体的空间感觉,使观者犹如身在其中。

720° 全景特点

720° 全景则是 720° 的视角,视觉范围超过人眼视觉范围的全景图像,720° 一般我们所说的全景是指横向 360 度及纵向 180 度都可以观看的,能看周围上下全部景象。

阅读全文 »

TypeScript 进阶学习

发表于 2020-12-23 | 更新于: 2020-12-30

高级类型

交叉类型

操作符:&,交叉类型并不是交集,在 Typescript 里其实是并集的意思,即新生成的类型,会拥有所有子类型的特性

联合类型

操作符:|,联合类型必须做类型校验,如string | number,只能访问它们中共有的属性或者方法

keyof T

索引类型查询操作符。 对于任何类型 T, keyof T 的结果为 T 上已知的公共属性名的联合
node

1
2
3
4
5
let person: Person = {
name: 'aaa',
age: 35
};
// let personProps: keyof Person; // 'name' | 'age'

类型约束 extends

1
2
3
4
5
6
type BaseType = string | number | boolean

// 表明参数类型T是在string | number | boolean这几种类型中
function copy<T extends BaseType>(arg: T): T {
return arg
}
阅读全文 »

Serverless + WebSocket 实时消息推送

发表于 2020-11-14 | 更新于: 2020-11-17

无服务器的概述

无服务器(Serverless)不是表示没有服务器,而表示当您在使用 Serverless 时,您无需关心底层资源,也无需登录服务器和优化服务器,只需关注最核心的代码片段,即可跳过复杂的、繁琐的基本工作。核心的代码片段完全由事件或者请求触发,平台根据请求自动平行调整服务资源。Serverless 拥有近乎无限的扩容能力,空闲时,不运行任何资源。代码运行无状态,可以轻易实现快速迭代、极速部署。

什么是 Serverless

Serverless 圈内俗称为“无服务器架构”,Serverless 是一种软件系统架构思想和方法,它的核心思想是用户无须关注支撑应用服务运行的底层主机。所谓“无服务器”,并不是说基于 Serverless 架构的软件应用不需要服务器就可以运行,其指的是用户无须关心软件应用运行涉及的底层服务器的状态、资源(比如 CPU、内存、磁盘及网络)及数量。软件应用正常运行所需要的计算资源由底层的云计算平台动态提供。

阅读全文 »

微前端实践之qiankun框架

发表于 2020-10-13 | 更新于: 2020-10-19

微前端框架

目前相对知名的微前端框架有 single-spa,icestark,qiankun。本文主要记录基于 qiankun 跑一个基本的微前端 demo。

qiankun 框架

qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 的核心设计理念:简单、 解耦/技术栈无关。因此给我们广大前端开发者提供了开箱即用对便利。

实现:

构建主应用基座

本次实践以 react 为基座,首先创建一个 react 应用,

1
2
3
npx create-react-app my-app
cd my-app
npm start
阅读全文 »

微前端初探

发表于 2020-09-20 | 更新于: 2020-09-21

引言

当一个项目代码越来越庞大,团队间协作不是那么容易的时候,大家就会希望可以通过分割成多个小项目,降低维护难度,我们期望有一种团队间、不同业务间单独维护的架构;当公司有一个技术栈老旧的项目,功能运行还算稳定,对于这种遗留系统来说,我们不想再花时间优化老旧系统,期望能跟上技术潮流,挑战新技术。我们期望有更好维护性、业务拆分更细粒度、多个技术栈共同嵌入一个应用中的架构模式,于是,微前端理念呼之欲出。

一、什么是微前端

微前端是一种新模式,其中 Web 应用程序 UI(前端)由一些半独立的片段组成,可以由不同的团队使用不同的技术来构建。微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

二、微前端的作用

微前端的作用是为了解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用不可维护的问题。其带来的核心作用有一下几点:

  • 技术栈无关 主框架、子应用可以使用不同的技术栈,子应用具备完全自主权
  • 独立开发、独立部署 子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  • 独立运行时 每个子应用之间状态隔离,运行时状态不共享
    阅读全文 »

webpack3向4升级中具体问题及解决办法

发表于 2020-08-03 | 更新于: 2020-08-24

本篇记录 webpack3 升级到 webpack4 过程中遇到的问题及一些知识记录。

一、问题:

1、TypeError: Cannot read property ‘stylus’ of undefined

解决方法:stylus-loader 3.0.1 => stylus-loader 3.0.2

2、以下这两种错误都是同一个问题

1)Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

2)DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

原因:extract-text-webpack-plugin 当前版本不支持 webpack4

有两种解决方法:
方法一:”extract-text-webpack-plugin”: “3.0.2” => “extract-text-webpack-plugin”: “4.0.0-beta.0”
方法二:extract-text-webpack-plugin 插件换成 mini-css-extract-plugin

阅读全文 »

webpack深入学习

发表于 2020-07-16 | 更新于: 2020-07-21

几个概念

我在学习 webpack 的时候,Chunk 的理解感觉比较困难,对概念的深刻理解是更好的理解 webpack 运行的基石。

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。webpack 只能处理 javascript,所以我们需要对一些非 js 文件处理成 webpack 能够处理的模块,比如 sass、图像等文件
  • Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

webpack 运行流程

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

  1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
  2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
  3. 确定入口:根据配置中的 entry 找出所有的入口文件;
  4. 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
  5. 完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
  6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
  7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
  8. 在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
阅读全文 »

关于React高阶组件

发表于 2020-06-27 | 更新于: 2020-06-29

高阶组件的定义

高阶组件(Higher-Order Component)是一个函数,以下简称 HOC,接受一个组件,返回一个新组件。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 不应该修改传入组件,而应该使用组合的方式,通过将组件包装在容器组件中实现功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from "react";

export default function higherOrderComponent(WrappedComponent) {
return class HOCComponent extends React.Component {
componentDidUpdate(prevProps) {
console.log("Current props: ", this.props);
console.log("Previous props: ", prevProps);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}

高阶组件不是只能接收一个参数,它也可以接收多个参数。项目中通常使用的 React Redux 的 connect 函数,它的 HOC 签名是这样的:
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

这样的用法实现方式大概类似以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react'

function HOCFunction = (param) => (WrappedComponent) => {
return class HOCComponent extends Component {
componentWillMount() {
console.log('通用逻辑', param)
}

render() {
return <WrappedComponent data={this.state.data} {...this.props} />
}
}
}

class MyComponent1 extends Component {
render() {
return <div>{this.props.data}</div>
}

//省略其他逻辑...
}

const resultComponent = HOCFunction('param1 test')(MyComponent1);
阅读全文 »
123
fangsueluo

fangsueluo

记录我的前端学习足迹,享受编码带来到乐趣与成绩感。

27 日志
GitHub
© 2021 fangsueluo