前端见闻录

背景

测试同学提了个 bug，在搜索框中疯狂输入文字，不一会儿接口就报错了。这个 bug 实际上就是由于每输入一个字符时，就去请求接口引起的：

const handleSearch = () => {
	// ...请求接口
}
<Input onChange={handleSearch} />

解决方法是通过 debounce 来控制输入的频率。

实际上 debounce 和 throttle 这两个概念经常是一起出现，在工作中也常常使用到。在早年接触前端的时候，项目里有 lodash，因此直接使用其提供的 debounce 和 throttle 。而在一些简单的项目里，往往不引入 lodash，这个时候就需要自己实现，于此做个记录。

背景

从早期的 grunt (我接触前端开发的时候这个已经趋于没落) 到 gulp，再到如今的 webpack，rollup ，parcel，以及 snowpack，vite，如今的前端已经脱离了刀耕火种的时代，各种打包工具层出不穷。前端项目基本离不开打包这个过程。那么当我们说到打包（bundle）时，我们在说的是什么？

这里不对 webpack 或者这些打包工具的使用进行具体说明，本文想探究的是打包的本质。

背景

此前项目有个 im 模块，需要用到 websocket。使用 websocket 需要建立连接：

const initWs = () => {
  const ws = new WebSocket('wss://xxx.com');
  ws.onopen(() => {
    console.log('opened')
  })
  ws.onmessage((evt) => {
    console.log('Received evt', evt.data)
  })
  //....
  return ws
}

我们肯定不希望在每个用到 ws 的地方都重复初始化，即我们只需要一个 WebSocket 的实例。

前言

本文翻译自 React hooks: not magic, just arrays，该文章很好的阐释了 react hooks 原理，我将保持原文的意思进行翻译，如有自己感觉不清楚的地方将会在括号中注明。以下为翻译内容。

我是 hooks api 的忠实粉丝。然而 hooks 在使用时却有一些奇怪的约束。在这里，我给尝试去理解这些规则由来的人提供一个了模型，用于思考如何去使用这些新 api。

背景

最近安全部门的小伙伴提了一个前端安全的漏洞，想到前端开发过程中有时候往往追求开发效率，忽略掉一些安全问题，以下简单总结一些自己遇到过的以及一些常见的攻击手段，以自查自省。

记录平时开发 rn 时遇到的问题，特指 0.59 版本，不同版本可能情况不同，仅供参考。

背景

电商项目需要搭建一个 h5 项目。这里简单记录一下搭建过程遇到的坑，作为总结。