耿健的个人博客

何为 VNode

在开发过程中，或许总会听到有人提到过虚拟节点，
那么这个究竟是个什么东西？
首先我们要有一个认知，
那就是 js 的操作的执行速度是远远高于 DOM 的操作的。
基于这个认知，为了提升页面的性能，
我们宁可多执行一些 js 操作，也要减少对 DOM 的操作（重绘、回流）次数。
所以需要用 js 以对象的形式来模拟 DOM 节点，
那么经过 js 的计算，只照着最后的结果去操作 DOM 渲染到页面即可。
而这个数据结构就是虚拟节点 VNode。

问题背景

在开始写 setState 的时候，
都会有这个疑问。
为什么我已经对 state 的数值赋值了，
可是我接下来去用这个值的时候，却不是刚刚赋值过的数据。
其实原因很简单。

Because, setState is asynchronously.

需求情况

在项目开发过程中，
曾经遇到过这样一个样式需求。
在一行中，分为三个部分。
左右部分固定宽度，
中间部分适配机型宽度，
如果中间的文字超出宽度则以省略号显示。

当时没有觉得很复杂，
结果在实现的时候，兜兜转转踩了好多坑，
其实这个应该算是比较常见的样式吧，
决定把他记录下来，防止以后忘记。

关于 useState

useState 可谓是在 Taro 的开发过程中最常用的一个 hook。
由于函数式组件每次渲染都会执行一次函数，
他的作用就是在函数内保存一个变量，并且这个变量能够保存的住。
可以通过对应 setXXX 函数来对这个变量进行修改。
那么如果变量是一个对象或者一个数组，
我只想修改其中一个元素的时候，很容易因为闭包的情况误伤其他元素。
这个时候我们可以用到 useState 函数式更新。

问题背景

在日常开发过程中，
当使用循环渲染的时候就一定要为循环项设置 key 属性，
那么为什么循环项就一定要有 key 呢？
如果 key 直接用 index 或者 random 赋值会有什么问题呢？

书写背景

从接触到开发小程序，
也有一段时间了。
想新建一个帖子，
借此总结复盘一下自己踩过的坑，
和含泪背锅的经历。

使用背景

项目最近在用Taro重构，
在书写代码方面要求比较严格，
正好在跟老大调侃，
他偶尔看到我一筐switch…case…
给我指了指，
让我改用适配模式做一做。
本来项目任务都已经很紧了，
突然代码实现业务方式的改变，
让我有点猝不及防。
说实话本来是有点抗拒的，毕竟已经写了很多了，
不过后来琢磨了一下，产品的逻辑着实是乱的一批，
现在多写点代码，为了以后增改逻辑的时候，能少点坑，
看样子用上适配模式，也不失为一个好办法。

小程序兼容适配

机型适配，安卓与 iOS 系统的兼容，
是做前端永恒不变的话题。
现在随着终端设备的五花八门，
系统繁杂，尺寸比各式各样，
导致前端的适配工作就是一个永远也填不完的神坑。
随即新建了这个文章，
用来记录一下自己踩过的兼容适配坑。

关于 Hook

Hook 这个特性，是 React16.8 中新增的，
随着小程序框架 Taro 对 React 的支持，
让 Taro 也能开始使用，
甚至在 Taro3.0.0 开始，在底层 api 做了代理，
让 Hook 方法直接可以从 React 包中引用。
值得注意的是，
Hook 的方法，只能在函数组件的主体内部调用。

问题起因

最近的项目在用Taro重构代码，
接到个令人头秃的交互，通过拖拽栏目来改变排序顺序。
好在小程序和Taro框架，
已经封装了MovableArea和MovableView这俩标签，能降低点难度。
不过还是需要通过计算来定位位置，让我这个学酥瑟瑟发抖。

结果实现到最后的时候，遇到了个大坑，
就是滚动穿透的问题。
效果就是，当这边拖拽着栏目的时候，结果页面也跟着一起滚动。
也是醉了。