Yzzzed's Blog
A new frontend developer.
React Native实现模仿web端通过id获取input DOM
你所描述的是React Native环境中管理焦点（focus）问题的一个解决方案。在React Native中，由于没有像Web中的DOM API那样的直接方式来获取和操作DOM元素，因此需要采取一些不同的策略来实现这样的需求。在你的实现中，使用了React的上下文（Context）和引用（Refs）来模拟类似的功能。这是一个很好的解决方案，因为它允许你在组件树中的任何位置管理焦点，同时还能处理嵌套组件中的焦点问题。以下是关于你的解决方案的一些简要解释： 1. **InputRefsContext**: 创建了一个上下文来存储所有注册的输入元素的引用。这使得你可以在任何子组件中访问这个上下文并获取或设置焦点。 2. **CIdInput组件**: 这个组件使用`forwardRef`来接受一个引用，并在内部将其与ID一起注册到上下文中。此外，它还提供了`focus`方法，可以在外部被调用以设置焦点。 3. **InputRefsContextProvider**: 这是一个组件，它提供了一个上下文提供者（Provider），在其中可以注册新的输入元素并聚焦特定的输入元素。通过使用React的`useRef`和`useMemoizedFn` hooks，可以存储和调用相关的函数来管理焦点。 4. **DeepNestedInputs和ParentComponent**: 在这两个组件中，使用了`CIdInput`组件并使用了按钮来触发焦点的设置。通过按钮的`onPress`事件，可以调用通过上下文提供的`focusInput`函数来设置焦点。 这种方法适用于React Native环境，因为它充分利用了React的特性，如上下文和引用，而没有依赖于Web特有的DOM API。通过这种方式，你可以有效地管理跨多层嵌套的组件的焦点问题。
vite项目初始化实践
vite项目初始化 使用官方vite模板初始化 pnpm create vite my-app --template react-swc-ts 配置.vscode { "prettier.enable": false, "editor.formatOnSave": false, "ed
Antd-FormList嵌套Table实践
需求说明使用Antd，实现一个Table，有两种状态，纯展示状态和可编辑状态。纯展示状态下所有内容直接取值，不可变。可编辑状态下table某些列为Input输入框，并且input中的值改变时，需要实时收集改变后的状态。Table行支持勾选，并且在可编辑状态下，点击提交表单时，只校验已勾选行的值。实现
[常用算法整理]javascript algorithm
排序算法: 冒泡排序，插入排序，选择排序，快速排序，归并排序，桶排序，堆排序。其他常用算法：洗牌算法，最小公约数，最大公因数，获取所有匹配字符串的下标。
![[常用算法整理]javascript algorithm](https://image.hyzed.cn/blog/484bcf1ca4d77859e911dc5c6e3a78c7.jpg)
[学习笔记整理] 浏览器缓存策略
浏览器缓存策略两类缓存强缓存（本地缓存）协商缓存（弱缓存）浏览器缓存分为两个阶段，本地缓存阶段与协商缓存阶段，也就是以上两个顺序为先判断强缓存再判断协商缓存。
![[学习笔记整理] 浏览器缓存策略](https://image.hyzed.cn/blog/dc438af7e1c489186d0d5f68ad8e5811.jpg)
[20210422] js截取字符串 - slice(), substring(), substr() 区别
2021.4.22 js截取字符串 slice() string.slice(start, end) 参数描述 start必需。要截取的字符串的起始下标。如果是负数，则数值为string.length + start。例如，-1指的是最后一个字符，-3指的是倒数第三个字符。
![[20210422] js截取字符串 - slice(), substring(), substr() 区别](https://image.hyzed.cn/blog/e351f31c1206b637d789b3b1441de6fd.jpg)
观察者模式 -- 鼠标拖拽div
观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。以观察者模式的形式去实现鼠标拖拽div。注：此处的实现是一对一的依赖关系。代码实现基本html<!DOCTYPE html><html>
js数据结构与算法 -- 快速排序（quickSort） 简单算法与高级算法
快速排序 (quickSort) 快速排序是对冒泡排序的一种改进, 第一趟排序先分成两份, 然后递归调用，继续二分。 快排属于分治法的一种，先把大问题分成各个小问题，再把小问题分成更小的问题。 简单算法实现 const quickSort = (arr) => { const len =
Leetcode - 70 爬楼梯 js解法
Leetcode - 70 爬楼梯 js解法 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 注意： 给定 n 是一个正整数。 示例一 输入： 2 输出： 2 解释： 有两种方法可以爬到楼顶。 1. 1 阶 + 1 阶
