【React主题月】4月完结

大厂技术栈，必学之路，冲冲冲！

# 博客5.0

很多新功能，冲冲冲

# 4.29

# 忽然

忽然就想买个显示器，买个属于自己的书桌，周末好能不躺床上。做起来，不管是玩也好，学习也好。总比躺着好。想到就行动，显示器就买小米34寸的，再搞个书桌。准备起飞🛫。

# react资源问题

网上找了很多react学习资源，大部分都是很老的那种,可以尝试自己搞一个。

# 4.28

# react-router和react-router-dom

react-router: 实现了路由的核心功能, react-router 3.x 版本还包括操作dom的方法,4.x以上就没有了。

react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter 组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。

# 4.27

# qiankun

u1s1，qiankun官网真的是太简陋了

整一整，照着官网demo配置是搞出来了，总结就是主应用配置一下路由，子应用导出一些生命周期，配置一些打包方式，完结散花。。。

但是适配一些项目会有问题，暂时还没找到原因。

# Makefile

开头必须要用 tab 给出空格，空格键留下的空格会报错。不过挺好用的，特别是针对mono仓库的

# react 配置开发环境跨域

# setupProxy

src 下新建 setupProxy.js，安装http-proxy-middleware 如下配置即可

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    createProxyMiddleware("/js", {
      target: "http://127.0.0.1:8887/",
      changeOrigin: true,
    })
  );
  app.use(
    createProxyMiddleware("/fileApi", {
      target: "http://123.57.208.169:8888/",
      changeOrigin: true,
      pathRewrite: {
        "^/fileApi": "",
      },
    })
  );
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# webpack 配置

  devServer: config => {
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    return config;
  },

1
2
3
4
5
6

# QPS

QPS：Queries Per Second 每秒查询率

# RPC

RPC 全称为 Remote Procedure Call 远程过程调用

# DTO

DTO:Data Transfer Object（数据传输对象）

# 4.26

# Faiz

前奏基本看完了，接下来就是一些中间线了。开始了流星塾的故事，号称敏鬼的编剧开始搞事情。故事的感情线有点狗血，先是启太郎爱上网友结花，然后又爱上长田，然后海棠喜欢真理，真理喜欢木场，草加喜欢真理，中间又出来个沙耶对巧有好感，有点乱。

草加这个角色真的是，把生活中某些人为达目标不择手段展示的太过了，可能也是怕有人不明白吧。

巧这种角色，中间又一段墨迹的剧情也很蛋疼。

可能这就是敏鬼吧~~~

大部分假面骑士都有个 bug，这么多怪物，警察去哪里了？

# react 总结

写的差不多了，写的有点烦躁，不知道为什么

# gitee page

想搞个国内的静态站点呢，结果创建到最后是，page 要整改三个月，为啥一开始创建的时候不说呢？

# react vscode 插件

rcc 生成普通组件，tsrcc，ts 版本组件
tsrpcc 基于 PureComponent 的组件
tsrpfc ts 函数组件
tsrsfc ts React.FC

# 4.25

# React 中无状态组件和有状态组件

无状态组件(展示组件)主要用来定义模板，接收来自父组件 props 传递过来的数据，使用{props.xxx}的表达式把 props 塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下：

var Header = (props = <div>{props.xxx}</div>);

有状态组件主要用来定义交互逻辑和业务数据

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Header /> //也可以写成<Header></Header>
    );
  }
}

1
2
3
4
5
6
7
8
9
10

# Faiz

继续刷

# react 总结

继续写写

# 4.24

# Faiz 1-13

B 站看到一些博主的剪辑，勾起来了一些回忆。关于假面骑士 555，最早接触还是初中那会，城里的两个老表来奶奶家玩的时候，经常会带一些碟片给我看。现在想想，物是人非啊，一个老表因病去世，一个老表已结婚生子，很少联系。

但是，回忆嘛，有味道有价值才会勾起自己的回忆。找了很久的资源，很多都是版权问题已经下架。搜索出来的在线观看的那种又是被翻译成国语的，看着没意思。最后还是在 A 站找到了，然后搬起小板凳开始了重温之旅。

一看假面骑士，貌似是给小孩看的，但是这篇假面真不是。

第 8 话：本话最佳 music：[纯音乐]梦之碎片最佳台词：乾巧:我没有梦想,但我可以守护别人的梦想

还有一部个人喜欢的假面，[假面骑士 W]

已回忆 1-13 话（女朋友要买衣服，做指甲，吃麻辣烫）

# 关于周末

刷抖音浪费太长时间
不能在家呆着，躺着躺着时间就没了
得养成早起习惯，学习
和女朋友两个人很容易吃吃喝喝

女朋友不是很喜欢技术，所以我在这里的言论还是比较自由的。她知道我的博客，我倒要看看她什么时候会主动来看看我。

# 独居老人

年前爷爷走了，剩下奶奶一个人，七十多了，奶奶身体还算可以。爷爷走后，妹妹怕奶奶孤单，还在家陪着，顺便考考驾照。

时间慢慢过去，但是老人还算不习惯一个人，毕竟奶奶之前也是很依赖爷爷的。怎么开导老人，成了个难题，老年心理健康挺重要的。

想找点事给奶奶做，网上买点手工产品给奶奶做？买花种子给奶奶种？买宠物？家里三条狗了，有个萨摩耶太能吃，奶奶都不想要了。

# 4.23

# react 总结

下周写完

# react ts 项目别名配置

用了 craco 配置 webpack 别名，不生效。最后一个同事帮我搞了下，发现 ts 也需要配置下 alias，不然就不行。。。

# 4.22

# web api 通信相关

团队技术分享，开头举了个面试题：浏览器多个 tab 打开网易云音乐，一个 tab 下播放，另外一个 tab 要暂停，怎么做？

开始我想的是用下面这两种，但是这样只能离开页面就关闭，没法和另外一个页面共享状态

window.onbeforeunload = function(e) {
  var e = window.event || e;
  e.returnValue = "确定离开当前页面吗？";
};
// 页面的 visibilityState属性可能返回三种状态 prerender，visible 和 hidden
// 监听 visibility change 事件
document.addEventListener("visibilitychange", function() {
  // 页面变为不可见时触发
  if (document.visibilityState == "hidden") {
    document.title = "离开";
  }
  // 页面变为可见时触发
  if (document.visibilityState == "visible") {
    document.title = "回来";
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

还举例了另外一个场景，当前页面有个富文本，正在编辑。另外一个 tab 打开相同的页面，也要编辑，然后引出锁的问题。言外之意就是模拟协同办公那种情况，后续深入了解一下

# 1、storage

window.onstorage = (e) => {
  console.log(e);
};
// 或者这样
window.addEventListener("storage", (e) => console.log(e));

1
2
3
4
5

前提：两个页面必须同源
针对非当前页面 Storages，使用 local 和 session 都可以触发，当前页面修改 Storage 不会触发监听函数，修改的值不变，也不会触发

# 2、webscoket

全双工通信

# 3、webworker

webworker 作为浏览器的一个新特性，可以提供一个额外的线程来执行一些 js 代码，并且不会影响到浏览器用户界面。

# 4、SharedWorker

SharedWorker 可以被多个 window 共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

# 5、BroadcastChannel

每个页面通过创建一个具有相同频道名称的 BroadcastChannel 对象来加入特定频道。然后实现 onmessage 接口来监听消息事件。通过调用 BroadcastChannel 对象上的 postMessage() 方法可以在频道中广播一条消息给所有订阅者。

移动端 safri 不支持 BroadcastChannel

# webpack 热更新

团队技术分享主题，没有 PPT，讲的比较快，不太理解，自己再研究下

webpack-dev-server 建立本地和浏览器的 websocket 链接
本地代码更新，触发 compiler.watch(监听本地文件的变化主要是通过文件的生成时间是否有变化)，compiler 完成会触发 tapable 的钩子, 在钩子里通过 websocket 通知浏览器触发更新，会发两个请求xxx/hash.hot-update.json 和 xxx/hash.hot-update.js js 通过 JSONP 插入到页面中
通过 hotApply 热更新模块替换 webpack 热更新流程图 (opens new window)

# padStart()、padEnd()

A.padStart(length, string) 用 string 从左开始填充 A，直到达到最大 length，padEnd 从右开始

let a = "333";
let b = a.padStart(5, "0");
b; //"00333"

1
2
3

# 大数相加

先处理两个数，让位数相同，后续进位
根据进位情况，%取余，Math.floor 取整数

# 一些误解

受控组件泛指，input，checkbox，textarea 等等，只是 react 修改数据需要用 setState，vue 内部帮忙做掉了。

数据流，vue 和 react 都是单向数据流，都不允许直接修改 props

v-model 语法糖，之前一直以为都是监听的 onChange，vue 官网也写了会根据组件类型进行处理，input 和 change 事件，见下解释

# vue v-model 受控组件

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

# 技术文章的意义

昨天发了个文章，写了一些自己的理解，网友指出了一些错误，这就是意义

有些自以为对的东西，只是自己觉得。别人不说，你就不知道，加入面试暴露了，就有直接挂掉的可能

所以，多写写，不要抄，就把自己的理解写出来。

# 4.21

# 查询 npm 包最新版本

yarn info react

# 升级固定版本，不带 ^

yarn add react@17.0.2

# 4.20

# React + TypeScript 实践

字节文章 React + TypeScript 实践 (opens new window)

# 使用 Type 还是 Interface？

在定义公共 API 时(比如编辑一个库）使用 interface，这样可以方便使用者继承接口
在定义组件属性（Props）和状态（State）时，建议使用 type，因为 type 的约束性更强

type 和 interface 最大的区别是：type 不支持声明合并，而 interface 可以随时扩展

# `useRef<T>`

// 第一种方式的 ref1.current 是只读的（read-only），并且可以传递给内置的 ref 属性，绑定 DOM 元素 ；
const ref1 = React.useRef < HTMLInputElement > null;
// 第二种方式的 ref2.current 是可变的（类似于声明类的成员变量）
const ref2 = (React.useRef < HTMLInputElement) | (null > null);

1
2
3
4

# `useState<T>`

// `val`会推导为boolean类型， toggle接收boolean类型参数
const [val, toggle] = React.useState(false)

type User = {
  name: string
  age: number
}
// 一些状态初始值为空时（null），需要显示地声明类型：
const [user, setUser] = React.useState<User | null>(null)

1
2
3
4
5
6
7
8
9

# 函数组件写法

# 1、React.FC 写法

type AppProps = {
  message: string,
};

const App: React.FC<AppProps> = ({ message, children }) => (
  <div>
    {message}
    {children}
  </div>
);

1
2
3
4
5
6
7
8
9
10

# 2、React.PropsWithChildren

type AppProps = React.PropsWithChildren<{ message: string }>;
const App = ({ message, children }: AppProps) => (
  <div>
    {message}
    {children}
  </div>
);

1
2
3
4
5
6
7

# 3.直接声明

type AppProps = {
  message: string
  children?: React.ReactNode
}

const App = ({ message, children }: AppProps) => (
  <div>
    {message}
    {children}
  </div>
)

1
2
3
4
5
6
7
8
9
10
11

# 4.19

# yarn-lock

升级包版本的时候不要去 package.json 直接改版本号，用命令的形式，yarn add xxx@1.1.1，yarn-lock 会只更新当前安装包的版本

# Object.seal()

Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。

对象原有属性可以修改

const people = {
  age: 18,
};
Object.seal(people);
delete people.age;
people.name = "JJ";
people.age = 29;
console.log(people); // { age: 29 }

1
2
3
4
5
6
7
8

# 装饰器模式

function thinFace() {
  console.log("开启瘦脸");
}
function IncreasingEyes() {
  console.log("增大眼睛");
}

@thinFace
@IncreasingEyes
class Girl {}
// '增大眼睛'
// '开启瘦脸'

1
2
3
4
5
6
7
8
9
10
11
12

编译成 js 代码，在运行时，会直接调用 thinFace 函数。这个装饰器作用在类上，称之为类装饰器

多个装饰器组合在一起，在运行时，要注意，调用顺序是从下至上依次调用，正好和书写的顺序相反。

装饰器这块有点学问，得多研究下

# 4.18

# 新的生活区

换工作以后搬家，随之而来的就是新的生活区，丰潭路这边算是西湖比较老的地方，老小区，老马路，and 老人，可能是对新生活的期望太大，心理预期差太多，导致有些失落。

不过这些都是适应问题，一段时间内总有自己留念的事物，也应该好好珍惜现在的一些，过眼云烟，都是尘埃往事。

# 思考 🤔

和个人性格有关吧，只要有个问题卡在心上，自己就会一直不停的去想，去幻想各种最坏的结果。

然后给自己带来的就是无尽的焦虑。也好也坏，经常白天想的一个 bug，梦里遇到了，然后梦里解决了，醒了有思路了，问题就解决了，这种情况在我这好几次了。。。

# 关于 node

node 和 java 的区别？node 作为 bff 到底好在哪？node 是一门后端语言吗？等等问题，网上找也都说的天花乱坠的，读完也没有 get 到点。需要多写写，写多了就知道了，相信一点，勤能补拙！

# 4.17

# 上午，改 bug

周六上午又来了俩线上 bug，在家慢慢查。u1s1，小程序这东西真的。。。

# react

实战项目视频学习

# 小程序生命周期

1.onLoad:和beforeMounted相似

2.onShow:onLoad 执行的时候 onShow 也会执行。同样，onLoad 会先于onShow执行

3.onReady:和 mounted 相似，三者执行顺序：onLoad onShow onReady

4.onHide:隐藏，例如使用 wx.navigateTo 只是打开新页面并不关闭原页面

5.onUnload:卸载，例如使用 wx.redirectTo,wx.navigateBack 重定向一个页面原页面已经关闭

小程序 tab 切换，只执行一次onLoad，然后页面被缓存，再次进来执行onShow，监听 tab 切换可以用onTabItemTap生命周期

# 4.16

# 取消 merge

执行 git merge 之后，vscode 放弃了本地的一些修改，这个时候 pull 代码就会报错您尚未结束您的合并（存在 MERGE_HEAD）

执行下即可 git merge --abort

# reactis

一款基于模型的测试、仿真和验证工具

# 买房攻略

准备搞起来，七月份社保满两年，开始看房

# 4.15

# StrictMode

StrictMode 目前有助于：

① 识别不安全的生命周期。
② 关于使用过时字符串 ref API 的警告
③ 关于使用废弃的 findDOMNode 方法的警告
④ 检测意外的副作用
⑤ 检测过时的 context API

对于不安全的生命周期，指的是 UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps , UNSAFE_componentWillUpdate,使用这些就会报错

# Profiler

Profiler 这个 api 一般用于开发阶段，性能检测，检测一次 react 组件渲染用时，性能开销。

Profiler 需要两个参数：

第一个参数：是 id，用于表识唯一性的 Profiler。
第二个参数：onRender 回调函数，用于渲染完成，接受渲染参数

# Suspense

Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。

<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

1
2
3

# forwardRef

父组件想获取孙组件，某一个 dom 元素。这种隔代 ref 获取引用，就需要 forwardRef 来助力

# 监控平台

之前就接触过 sentry，用的也很少，刚来就接触了俩监控平台，对于这块知识比较欠缺

只了解一些全局监听错误的方式，vue handlerError，window.onError,promise unxx 好长一串

有个大哥准备搞个开源的监控平台，和他好好学习学习

# 4.14

# 技术新人培训

一天脱产培训，感觉有赞这边还是挺重视技术的

# react 复习

培训讲中间件的时候听不懂，也没电脑手机，就在小本本上写写画画

巩固一下大脑里面的 react 生命周期图，写了两遍还是有一些收货的。就比如 forceUpdate 不会经过 shouldComponentUpdate

# React.memo 和 pureComponent 区别

React.memo 监听的 props 变化

pureComponent 是监听 props 和 state 的变化，会进行浅比较，来判断要不要更新组件

# useEffect 第二个参数

useEffect(() => {
  console.log("effect");
  return () => {
    console.log("returnFunction");
  };
}, []);

1
2
3
4
5
6

空，则每次 componentDidUpdate 时都会先触发 returnFunction（如果存在），再触发 effect
[] 模拟 componentDidMount, returnFunction 模拟 componentWillUnMount
[id] 仅在 id 的值发生变化以后触发, 先触发 returnFunction（如果存在），再触发 effect

所以尽量不要写空的, 注意是先触发 returnFunction 再 effect

# 4.13

# a 标签

anchor a 标签就是这个单词的缩写，对应 HTMLAnchorElement 类型

# postman 拦截浏览器请求

使用插件：Postman Interceptor

postman interceptor 使用介绍 (opens new window)

# 焦虑感

随想

# vue & react 对比

# 4.12

# createRef

React.createRef 主要用在 class 组件中，用于创建 refs
createRef 和 useRef 可以用来保存任何值
ref 中值的改变不会触发组件更新

createRef 和 useRef，在初始化阶段两个是没区别的，但是在更新阶段两者是有区别的。

# useRef

useRef 创建的 ref 仿佛就像在函数外部定义的一个全局变量，不会随着组件的更新而重新创建。但组件销毁，它也会消失，不用手动进行销毁

useRef，主要用在函数组件中
注意：因为函数组件没有实例，如果想用 ref 获取子组件的实例，子组件组要写成类组件
高阶组件上使用 refs 转发，refs 将不会透传下去。这是因为 ref 不是 prop 属性。就像 key 一样
可以理解为和 vue ref 作用相同，都是为了获取指定 dom

import React, { Component, useEffect, useRef } from "react";
function App() {
  const childRef = useRef();
  useEffect(() => {
    console.log("useRef");
    console.log(childRef.current);
    childRef.current.handleLog();
  }, []);
  return (
    <div>
      <h1>Hello World!</h1>
      <Child ref={childRef} count="1" />
    </div>
  );
}
// 因为函数组件没有实例，如果想用ref获取子组件的实例，子组件组要写成类组件
class Child extends Component {
  handleLog = () => {
    console.log("Child Component");
  };
  render() {
    const { count } = this.props;
    return <h2>count: {count}</h2>;
  }
}
export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# input 受控组件

给 input 这种组件默认值，是会直接报错value prop to a form field without an onChange handler,

这和 react 有关，react 中修改值是通过 setState 的，可以用 onChange 来修改，或者直接添加 readOnly 属性

# css module

建立 study.module.css
import style from './study.module.css'
浏览器显示
css-module-study 练习

# react 组件样式覆盖

给父容器一个 className，直接修改就行

如需要声明全局的：

:global(.zent-block-header) {
  margin-bottom: 15px;
}

1
2
3

# 4.11

# react markdown

# zent 组件

基本都写了一遍，熟悉的七七八八了，接下来开始业务组件库的操作了，顺便练习练习 react 和 ts，冲冲冲

# 4.10

# 吵架

累了累了，动不动就吵架。这次的原因：马上我要过生日了，非要让我自己选好生日礼物，然后她给我买。我不选，我觉得这样很没意思，所以开始折磨我，啥也不让我干，就这么不讲理。昨天的周年纪恋日真是浪费，亏我想了那么久。

# ts Utility Type

写了一篇笔记，写了写 demo

相当于是 ts 的一些封装，type 用的很多，得多用用 type.

# 前同事聚会

之前在微医的组长这周五也离职了，去了总结，薪资无敌，原地起飞。

四百一个人的海鲜自助，五个男人，战斗力都不行，亏得很，根本吃不回来。

晚上十二点多到家，又开始了忧虑，我什么时候能和这些大佬一样？

# 4.9

# 新人培训第 3 天

完结、散花

# TypeScript 中的 any 和 unknown 的区别

简单说下，any 可是是任何类型的父类或者是子类，是类型不安全的，什么是类型不安全？很好理解，就是平常我们懒得写定义，直接 any，让编译器忽略检查 any 类型的值，这么做就会产生一些意想不到的情况，导致代码出错，而且很难去排查。而 unknown 则是类型安全的，unknown 也是可以赋值任何值，但是当我们进行使用它进行一些操作的时候，比如把 unknown 类型的值作为一种方法来调用，编译器就会报错，因为你不确定这个变量是不是个方法，因此是不能调用的，需要在调用前确保它可以被调用。

let fn: unknown = () => {};
if (typeof fn === "function") {
  fn();
}

1
2
3
4

# 4.8

# 新人培训第 2 天

# 4.7

# 新人培训第 1 天

时间安排的比较紧凑，三个班级，近一百人，来着全国各个地方。优秀的人很多，能说会道的人很多，沉默的一看就是干技术的~~~

# 6 号晚

7-9 点已经搞过一波了，感觉有点累，心里带着学习的负担，一点话都不想说。。。。

# 三天

三天的培训，个人的心态得调整下，Just Do It！！！

# 4.6

# react hooks demo

写了几个，useCallback,useMemo,useEffect,useContext,useReducer，写自定义 hooks 报了错，莫名其妙，暂时还没解决

# 完成 todo list

后面再学学新的东西，可以优化一波，加一些新功能

# mac git 安装

系统更新了一波，结果 Git 环境没了，奇奇怪怪

MAC 上 Git 安装与 GitHub 基本使用 (opens new window)
先安装 brew,安装比较慢，执行/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
安装完成会有个提醒：Add Homebrew to your PATH in /Users/wujunjie/.zprofile:
修改_base_profile,找不到文件的，cmd+shift+g 输入 /
或者直接命令行vi .bash_profile 添加提示内容
source .bash_profile 生效

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/wujunjie/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

1
2

# 4.5

# todo list

react 写个 todolist，仿造公司的需求管理平台，完成 50%

看和写差不多还是很多的，遇到些问题，明天请教下大哥们

# zent form

写了写，zent 的 form 表单，比较在 pc 端，这是最重要的。

和 vue 的开发模式差别挺大，目前还不熟练，多在自己的学习项目多写写，同时练习 ts

# useCallback，useMemo

写了几个 demo，基本会用了

# 4.4

# react 实站学习

# RFC

Request For Comments

# vue3 放弃 IE11

之前面涂鸦有被问到，vue3 如何兼容 IE11，我说降级处理，使用 defineProperty。面试官说那不就回到了 vue2 了，我无言以对。实际上他说他想了解的是看我会不会往 polyfill 方面想。实际上，vue3 用的 proxy 是浏览器级别的东西，没法用 polyfill 支持。

最近尤大提了 RFC，在 vue3 中会放弃 IE11，并且将精力投入在 vue2.7 版本，加入一些优化，支持 composition-api，加入 vite 等等。

萌新表示大力支持！！！

# Object.create(proto, [propertiesObject])

let a = Object.create(null) 这样创建的 a 无任何属性，原型也没有

如下创建，可以指定创建对象的原型指向

var person = {
  address: "world",
};

var son = Object.create(person, {
  age: {
    value: 23,
  },
});
console.log(son.address); // world

1
2
3
4
5
6
7
8
9
10

# 4.3

# zent 熟悉

公司的开源的组件库，之前一直有计划来写一遍，一直都在脱，现在有了目标，就有动力了。

今天写了三大类，基础组件类，导航类，数据类。剩下两类明天写完！！！

# react 学习文档

对比 vue 学，先记录着，后面学完了整理一下，对外输出一波

# 4.2

# promise.any()

该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。只要参数实例有一个变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；如果所有参数实例都变成 rejected 状态，包装实例就会变成 rejected 状态。

和 race 很像，只有一点不同，就是不会因为某个 Promise 变成 rejected 状态而结束。

# 关于最近

来公司一个月了，但是熟悉项目比较慢，大部分时间都用在了聊天。掘金发了两篇文章，大量的人加我咨询一些学习方法，或者是内推，有点忘记了自己的事情。领导给了指标，对我的一些期望，希望自己能达到要求。这段时间就好好学习了，冲冲冲！！！！

# 4.1

# snowpack

目前 bundleless 的开发工具主要有两个: vite 和 snowpack,两者内部都用到了 rollUp,都是基于浏览器的 ESM 来设计的
snowpack 可以通过 plugin 的方式接入 webpack 并用于生产，如 @snowpack/plugin-webpack
vite 则使用 rollup 这一 bundle 工具作为内置的生产打包工具

#学习打卡

最近更新时间： 2021/06/09 09:40:43

← 【新公司】3月完结【减肥&转正主题月】5月完结→

【React主题月】4月完结

# 博客5.0

# 4.29

# 忽然

# react资源问题

# 4.28

# react-router和react-router-dom

# 4.27

# qiankun

# Makefile

# react 配置开发环境跨域

# setupProxy

# webpack 配置

# QPS

# RPC

# DTO

# 4.26

# Faiz

# react 总结

# gitee page

# react vscode 插件

# 4.25

# React 中无状态组件和有状态组件

# Faiz

# react 总结

# 4.24

# Faiz 1-13

# 关于周末

# 独居老人

# 4.23

# react 总结

# react ts 项目别名配置

# 4.22

# web api 通信相关

# 1、storage

# 2、webscoket

# 3、webworker

# 4、SharedWorker

# 5、BroadcastChannel

# webpack 热更新

# padStart()、padEnd()

# 大数相加

# 一些误解

# vue v-model 受控组件

# 技术文章的意义

# 4.21

# 查询 npm 包最新版本

# 升级固定版本，不带 ^

# 4.20

# React + TypeScript 实践

# 使用 Type 还是 Interface？

# useRef<T>

# useState<T>

# 函数组件写法

# 1、React.FC 写法

# 2、React.PropsWithChildren

# 3.直接声明

# 4.19

# yarn-lock

# Object.seal()

# 装饰器模式

# 4.18

# 新的生活区

# 思考 🤔

# 关于 node

# 4.17

# 上午，改 bug

# react

# 小程序生命周期

# 4.16

# 取消 merge

# reactis

# 买房攻略

# 4.15

# StrictMode

# Profiler

# Suspense

# forwardRef

# 监控平台

# 4.14

# `useRef<T>`

# `useState<T>`