Xinyuan Wang

react

4

react hooks 最佳实践 https://juejin.cn/post/6844904165500518414 https://juejin.cn/post/7067006608508715016

```js arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) ```

如何设计一个组件

1

1. 根据组件结构编写样式及布局 2. 根据组件逻辑确定组件行为 3. 根据组件交互，绑定事件 4. 数据与逻辑分离，实现可复用

https://segmentfault.com/a/1190000041062139

设计模式

3

策略模式--简化 if else 原理策略对象搭配对象访问 ```js let object = { ADD:(a,b)=>a+b, SUB:(a,b)=>a-b, MUL:(a,b)=>a*b, DIV:(a,b)=>a/b, MOD:(a,b)=>a%b, POW:(a,b)=>a**b, SQRT:(a)=>Math.sqrt(a), ABS:(a)=>Math.abs(a), }; function compute(a,b,operator){ return object[operator](a,b); } ```

### CSSFlex排版 ##### Flex的设计 Flex排版的核心是display:flex和flex属性，它们配合使用。具有display:flex的元素我们称为flex容器，它的子元素或者盒被称作flex项。 flex项如果有flex属性，会根据flex方向代替宽/高属性，形成“填补剩余尺寸”的特性，这是一种典型的“根据外部容器决定内部尺寸”的思路，也是我们最常用的Windows和Apple窗口系统的设计思路。 ##### Flex的原理 FLex支持横向和纵向，这样我们就需要做一个抽象，我们把Flex延伸的方向称为“主轴”，把跟它垂直的方向称为“交叉轴”。这样，flex项中的width和height就会称为交叉轴尺寸或者主轴尺寸。 而Flex又支持反向排布，这样，我们又需要抽象出交叉轴起点、交叉轴终点、主轴起点、主轴终点，它们可能是top、left、bottom、right。 Flex布局中有一种特殊的情况，那就是flex容器没有被指定主轴尺寸，这个时候，实际上Flex属性完全没有用了，所有Flex尺寸都可以被当做0来处理，Flex容器的主轴尺寸等于其它所有flex项主轴尺寸之和。 ##### Flex的应用 **垂直居中：** ``` #parent { display:flex; width:300px; height:300px; outline:solid 1px; justify-content:center; align-content:center; align-items:center; } #child { width:100px; height:100px;...

## 创建一个正则表达式 1. 字面量：`const reg = /abc/i` 2. RegExp：`const reg = new RegExp('abc', 'i')` ## 与正则有关的几个方法 1. 判断一个字符串是否满足正则：`/abc/i.test('Abc')` 2. 找到字符串中匹配正则的所有地方：`'AbcdaBc'.match(/abc/ig)` 3. 替换字符串中匹配到的地方：`'AbcdaBc'.replace(/abc/ig, '***')` 4. 用正则去分割字符串：`'AbcdaBc'.split(/abc/i)` ## 工作中常用的几个正则 ### 校验 URL...

- [ ] javascript 基础 8-14 天 - [ ] React 框架 6天 - [ ] 算法 30 天 https://github.com/vortesnail/leetcode - [ ] 手写题（30 题左右） 15天 https://q.shanyue.tech/fe/code/3.html#%E9%98%B2%E6%8A%96-debounce-2