vibing

## 默认渲染行为 React 的渲染主要分两种：首次渲染和重渲染。 首次渲染就是第一次渲染，这是无法避免的就不讨论了，重复渲染是指由于状态改变或 props 改变等原因造成的渲染。 **React 默认的渲染特性：当父组件渲染时，会递归渲染下面所有的子组件**（让人诟病的特性） 如下： ```js const App = () => { const [count, setCount] = React.useState(0); const [name, setName] = React.useState('Tom'); React.useEffect(() => {...

## React Hooks `react hooks` 的使用需要在 `function component` 组件中，本文讲述在使用 react hooks 中你需要注意的一些事情 ### 状态每次改变，整个 function 都会重新执行 可能导致：函数的每次执行，其内部定义的变量和方法都会重新创建，也就是说会从新给它们分配内存，这会导致性能受到影响 看下面这个例子： ```js import React, { useState, ReactElement } from 'react' import { Button...

## Object.definedProperty 在 vue2.x 版本中使用 Object.definedProperty 来劫持数据，实现数据双向绑定。我们来实现一个简单的数据劫持： ```js function observer(obj) { if (typeof obj === 'object') { for (const key in obj) { if (obj.hasOwnProperty(key)) { listener(obj, key); } }...

忽略 docker 安装 ## 以 nginx 为例： 从 docker hub 仓库拉取最新的 nginx 镜像：`docker pull nginx:latest` 下载完成后通过 `docker images`查看本地镜像：  ### 启动该镜像  `docker run -d -p 8080:80 --name mynginx nginx`...

## 带有进度条的文件上传 ### 前言 文件上传如果加上进度条会有更好的用户体验（尤其是中大型文件），本文使用`Nodejs`配合前端完成这个功能。 前端我们使用 `FormData` 来作为载体发送数据。 ### 效果  ## 前端部分 ### HTML 部分 和 Js 部分 ```html ``` ```js // 获取 input file 的 dom 对象 const...

## 时间分片 W3C性能工作组规定：将执行时间超过50ms任务定义为长任务（Long Task）。 长任务由于长时间阻塞主线程，会让用户感觉到卡顿。 而解决长任务的方式大致有两种： - 使用Web Worker，将长任务放在 Worker 线程中执行，缺点是无法访问 window 对象和 操作 DOM - 时间切片（Time Slicing） ## 什么是时间分片 时间分片并不是某个 api，而是一种技术方案，它可以把长任务分割成若干个小任务执行，并在执行小任务的间隔中把主线程的控制权让出来，这样就不会导致UI卡顿。 React 的 Fiber 技术核心思想也是时间分片，Vue 2.x 也用了时间分片，只不过是以组件为单位来实施分片操作，由于收益不高 Vue 3...

## 前言 我们团队正在做一个XX系统，技术栈是`React`，目前该系统日渐庞大，开发及维护成本加大，且每次必须把整个项目一起打包，费时费力。经考虑后决定将其拆分成多个项目，由它们组合成一个完整系统，微前端架构是非常好的选择。 微前端差不多有以下几个好处： 1. 单项目维护：比如将`商品模块`单拉出来形成一个项目，它可以由一个小组单独维护，实现良好解耦 2. 复杂度降低：不需要在整个集成式的庞大系统内开发，避免巨大的代码量，开发时编译速度快，提高开发效率 3. 容错性：单独项目发生错误不会影响整个系统 4. 技术栈灵活：vue、react、angular 等包括其他前端技术栈都可以使用，会 vue 的不需要再学 react 对我们来说最大的好处是`单项目维护`。 ## 展示 #### UI示例图  我们将整个微前端分为两个部分： 1. 主项目(Main)：红色框部分，作为整个项目的父级，负责展示菜单模块、头部模块 2. 子项目(Sub-apps)：蓝色框部分，子项目的作用是具体的业务展示 #### 动图展示 ...

原在我的 [Github](https://github.com/Vibing/blog) 上，欢迎订阅。 其他文章： - [Mysql入门第一课《建表、改表、删表》](https://github.com/Vibing/blog/issues/14) - [Mysql入门第二课《数据类型》](https://github.com/Vibing/blog/issues/15) - [Mysql入门第三课《数据的增删改》](https://github.com/Vibing/blog/issues/16) - [Mysql入门第四课《查询数据》](https://github.com/Vibing/blog/issues/17) - [Mysql入门第五课《外键约束》](https://github.com/Vibing/blog/issues/18) ## 前言 数据源于生活，数据之间的关系也是从生活里映射过来的。 比如：一个老师可以教很多学生，一个学校有很多老师，一个人只能有一个身份证等等。 总结下来，所有的数据之间有三种关系： - 一对一 - 一对多 - 多对多 ## 一对一 一对一就是，我只有你，你只有我。 比如： -...

原文在我的[Github](https://github.com/Vibing/blog#Mysql)里，欢迎订阅。 之前已经学习了[Mysql入门第一课《建表、改表、删表》](https://github.com/Vibing/blog/issues/14) 和 [Mysql入门第二课《数据类型》](https://github.com/Vibing/blog/issues/15)，今天继续学习 如果对表数据进行增加、修改和删除的操作。 依然以 `student` 表为例。 执行以下 sql 新建一个空的 `student`表： ```sql CREATE TABLE student( id INT UNSIGNED PRIMARY KEY auto_increment, name VARCHAR(10), age TINYINT(3) ) ENGINE=INNODB DEFAULT CHARSET=utf8;...

## 前言 本文接着上篇 [Mysql入门第一课《建表、改表、删表》](https://github.com/Vibing/blog/issues/14) 继续学习。 要建一个优秀的表，选择合适的数据类型非常重要，如果数据类型选择不当，不仅开发起来给自己找麻烦，而且还会造成数据库性能低下。 比如给`student`(学生表)添加`age`字段，选择`TINYINT`类型就够了，它的范围是 `0-255`(无符号) 比较适合，如果使用 `INT` 也可以满足条件，但`INT`占 4 个字节，而`TINYINT`只占 1 个字节，相比较当然`TINYINT`性能更好。 刚才提到了`UNSIGNED`(无符号)，我会在下文说明。 ## 数据类型 `Mysql`支持多种类型，大致分为三类：数值、字符串、日期/时间类型。 我们各个击破 ### 数值类型 类型 | 大小 | 范围(有符号) | 范围(无符号) |...