前言为了入门react，我特意花了10分钟写了一个todo-list,它长这样:我将之拆分成如下模块:图标输入框与添加按钮列表展示待办事项事项索引事项详情编辑与删除这其中还包含了一些隐藏的操作，例如输入待办事项，按下enter键也可以实现编辑或者确定的效果，点击待办事项还可以弹出一个消息提示框，展示待办事项详情，点击删...

摘要：ahooks 是一个可靠的 React Hooks 库。本文将详细介绍 useSafeState 这个 Hook，帮助您理解其工作原理和应用场景。官方地址：ahooks useSafeState

前言ps: 本文使用ant组件库和react技术栈，因此假定你导入了这些依赖包。如果让你实现一个显示当前日期的定时器组件，你会怎么做？如下图所示:初步实现探索碰到这样的需求，你是不是会使用定时器来实现，如下所示: {代码...} 可以看到，我们使用到了useEffect，在里面使用setInterval方法来不停的设置值，从而达到实现定...

Excuse me? 产品让我实现一个值班表产品经理让我实现一个值班表，然而我找遍了开源项目，都没有找到符合设计的交互需求，没有办法，我只好自己实现了一个值班表。如下图所示:ps: 值班表的实现采用 react.js 技术栈，所以也将以 react.js 为主来讲解。实现模块分析根据交互图，我将整个值班表拆分出了如下模块:标题用户搜...

前言在我重新复习我创建的代码段集合网站，我复习到了桶排序算法的实现，它的代码如下所示: {代码...} 咋一看代码实现思路，我并不是很清楚为什么这样写。我产生了如下几个疑惑点:为什么要取最小值和最大值?Math.floor((max - min) / size) + 1,这是一个公式，代表什么意义？并且这个公式如何得来的？Math.floor((val - ...

在 React 中，每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中，而是使用 <Fragment> 来保持 DOM 整洁。

八. 测试 react 代码54. 使用 React 测试库有效地测试你的 React 组件想要测试你的 React 应用吗？请务必使用 @testing-library/react。你可以在此处找到一个最基本的示例。55. React 测试库：使用测试演练场轻松创建测试用例难以决定在测试中使用哪些测试用例？考虑使用测试演练场从组件的 HTML 快速生成测试用例。以下...

文章概要:为什么我们需要在 React 中访问 DOM?refs 如何帮助我们实现访问 DOM?什么是 useRef、forwardRef 和 useImperativeHandle 钩子?如何正确使用它们?

以下是个人收集总结的一些使用 react 的小技巧第二篇。五. 高效的状态管理27. 永远不要为可以从其他 state 或 props 派生的值创建新的 statestate 越多 = 麻烦越多。每个 state 都可能触发重新渲染，并使重置 state 变得麻烦。因此，如果可以从 state 或 props 中派生出值，则跳过添加新的 state。不好的做法：filteredU...

在 React 中，每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中，而是使用 <Fragment> 来保持 DOM 整洁。

这是一个每天更新一题的文章，欢迎评论区网友提供题目和答案，不断更新中，记录下来，方便学习，参考答案如有问题，敬请批评指正，废话不多说，开始进入正文。

众所周知，JSON.parse方法用于将一个json字符串转换成由字符串描述的 JavaScript 值或对象，该方法支持传入2个参数，第一个参数就是需要被转换的json字符串，第二个参数则是一个转换器函数(reviver,也叫还原函数)，这个函数会针对每个键/值对都调用一次,这个转换器函数又接受2个参数,第一个参数为转换的每一个属性名，第...

事情是这样的，后端返回类似这样的数据格式`cshjdkvghsv<xxx xx='xxx' />sdhjkshfv'<xxx xx='xxx'></xxx>'sdhgjdsk,然后需要前端将字符串中的xxx`解析出来并渲染到页面中，还要保证渲染顺序，其中xxx可能是一个自定义的react组件名，也有可能是一个html元素标签名，而xx则可能是属性名,'xxx'则是属性...

编写可维护性高的 JavaScript 代码非常重要，因为大多数开发者在实际开发中都不会从零开始自己写代码，这种场景是很少的，通常都是会去维护别人写的代码，让自己的代码变得容易维护，也可以保证其他开发者能够更好的完成开发工作，也能让自己以后得维护变得更轻松。

本文参与了SegmentFault 思否 2023 年度有奖征文活动，欢迎正在阅读的你也加入。2023 年终总结又是这样匆匆忙忙的度过了一年，今年付出了很多，也收获了不少，接下来，我想盘点一下我今年所做的付出与收获。收集曾经的作品我收集了我曾经写的诗词，小说等作品，虽然写的不怎么样，但也是值得看看，留作纪念，网站地址我...

观察题目，其实就是将两个联合类型的值组合成接口，其中第一个联合类型的值作为属性，第二个联合类型的值则作为属性值，并且两者的属性顺序是一一对应的。下面跟着我一起来分析，通过这道题，我们能理解到 ts 的不少知识点，不信继续往下看。

有关隐藏元素的方式 display: none 与 visibility:hidden 的区别，这可以说是 css 面试题当中最常见的一道题了。相信大多数开发者被问到的第一答案就是:display: none 不占据空间，visibility: hidden 占据空间。但实际上两者之间的区别并不只是不占据空间这么简单，且听我娓娓道来。

js没有相关接口可以准确获取安卓手机软键盘的高度，这样也就无法处理当软键盘弹出时，能够将输入框顶上去，并且与软键盘完美的贴合，比如输入框在最底部的场景，此时页面滚动高度不够，因此无法准确的滚动到底，使得软键盘将输入框顶上去并与之完美的贴合。

事情是这样的，有个群友在业务当中碰到一个小小的需求，需求是这样的: 页面当中存在多个输入框，输入框的 value 值是一个数值组成的字符串（盲猜应该是身份证号码），这个字符串的位数是 15 位或者是 18 位，例如:'621848063680370'(15 位)和'621848063688370808'(18 位)，然后默认的值是这样的，现在问题来了，需求希望...

ew-message一个基于 typescript 而封装的消息提示框插件，可用于不使用ui组件库的中小型网站中。安装与使用安装 {代码...} 引入 {代码...} 消息提示框插件如下: {代码...} option 配置对象有如下参数: {代码...} ps: 推荐使用导入样式文件的方式。cdn 引入 {代码...} 在组件中使用 {代码...} 当然也可以不引入样式，插件...

问题很简单，先使用 let 在全局中定义了一个变量 a,并定义初始值为 1，然后定义了一个函数，在函数的内部又定义了一个同样的变量 a，然后调用这个函数，在调用函数之后打印变量 a，问题就是在函数内部添加一些代码使得最终打印变量 a 的结果是 3。

自译: 兔年既然来了，为了表示欢迎兔年的到来，而且我也认为兔兔很是可爱，令人喜欢，因此写了一个兔兔相册展示器，用来收藏可爱的兔兔图片，现在让我们先来看看这个相册展示器的效果吧，正如下面所展示的:

css content 属性有很多实用的用法，这其中最为强大的莫过于是计数器了，它甚至可以实现连 javascript 都不能够实现的效果，下面我们一起来研究一下吧。

将 dot 元素设置为内联元素(display:inline-block),并设置溢出隐藏(overflow:hidden)，高度设置为 1em。

要实现两个小圆球，我们可以思考两种方案的实现，第一种就是css方案，画两个小圆球，然后使用css动画来实现，而第二种则是使用canvas方案。我们首先来尝试第一种方案，首先肯定是要画出两个小圆球，这不就是相当于画两个圆嘛，所以使用宽高加圆角属性即可实现。

时光如梭，岁月匆匆而过，2022年一转眼就已经到了末尾，今年的环境异常艰难，可是想想自己这一年来的付出，也还是值得做一个复盘总结的，正所谓有得必有失，在这一年我失去了太多，不过却也让我成长了不少，当然这些都是题外话，我主要还是来复盘一下今年我所学习的成果。

本文参与了思否技术征文，欢迎正在阅读的你也加入。前言特别说明: 本文只适合新手学习这篇文章带我们入门go语言的定义变量的方式，其实和javascript很相似，所以特意总结在此。在go语言中，也有变量和常量两种，首先我们来看变量的定义，定义变量我们分为定义单个变量和多个变量。本文知识点总结如下图所示:定义单个变量...

最近在做项目，碰到了这样一个需求，就是页面有一个元素，这个元素可以在限定的区域内进行拖拽，拖拽完成吸附到左边或者右边，并且在滚动页面的时候，这个元素要半隐状态，停止滚动的时候恢复到原来的位置。如下视频所示:

使用思否猫素材实现一个轮播图本文参与了1024程序员节，欢迎正在阅读的你也加入。通过本文，你将学到:htmlcssjs没错，就是html，css,js,现在是框架盛行的时代，所以很少会有人在意原生三件套，通过本文实现一个丝滑的轮播图，带你重温html,css和js基础知识。为什么选用轮播图做示例？有如下几点:业务当中最常用轮播图说...

vue3实现一个思否猫连连看小游戏本文参与了1024程序员节，欢迎正在阅读的你也加入。通过本文，你将学到:vue3的核心语法vue3的状态管理工具pinia的用法sass的用法基本算法canvas实现一个下雪的效果，一些canvas的基本用法rem布局typescript知识点开始之前在开始之前，我们先来看一下最终的成品是怎么样的，如下图所示:首...