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

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

useEffect 使用

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

引言

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

360 度、720 度全景

360 全景特点：

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

720° 全景特点

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

高级类型

交叉类型

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

什么是 Serverless

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

微前端框架

目前相对知名的微前端框架有 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

引言

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

一、什么是微前端

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

二、微前端的作用

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

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

本篇记录 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 的时候，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 的运行结果。

高阶组件的定义

高阶组件(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);