HTTISHERE · 阿汪同学
08
12
⚫ React Hooks 精进 18 - 服务器端组件 ⚫ React Hooks 精进 18 - 服务器端组件
React 17渐进升级React 17 带来的渐进升级提供了一种新方案,渐进升级的支持就是一个应用可以同时由多个 React 版本。 新的事件模型react 中所有的事件都是合成事件,实现的机制是在根节点上监听所有事件,经过 react
2023-08-12
12
09
⚫ React Hooks 精进 16 - 打包部署 ⚫ React Hooks 精进 16 - 打包部署
了解 Webpack通常在实际开发中我们不需要太关注源代码是通过什么编译器如何打包成最后的应用程序的,因为 IDE 已经帮我们把这些都做好了。 但是我们需要知道它的主要功能,以及能够排查问题。 Failed to compile:编译阶段
2023-08-09
09
⚫ React Hooks 精进 15 - 按需加载 ⚫ React Hooks 精进 15 - 按需加载
控制整个应用的大小,提高加载性能是前端开发需要的挑战。 提高首屏加载速度: 对应用分包 采用高效的缓存策略 实现按需加载使用 import 语句,定义按需加载的起始模块本质在于,需要有动态加载模块的能力——import(ECMA S
2023-08-09
09
🆕 在js内用文本内容定位DOM元素 🆕 在js内用文本内容定位DOM元素
在开发中遇到了一个需求:在 url 内输入页面上的按钮 label 就可以触发按钮的点击事件。 此时就需要用文本内容来定位页面上的DOM元素。 1. 遍历法遍历页面上所有的相关元素。 Array.from(document.queryS
2023-08-09
08
⚫ React Hooks 精进 14 - 浮动层的使用 & 路由管理 ⚫ React Hooks 精进 14 - 浮动层的使用 & 路由管理
浮动层的使用通常的对话框使用: 对话框需要在父组件中声明,才能在子组件中控制是否显示。 给对话框传递参数智能由 props 传入,意味着所有状态管理需要在更高级别的组件上。 处理对话框的误区当这里是一个左右分栏布局的页面,在左侧的菜单栏
2023-08-08
06
⚫ React Hooks 精进 13 - Hooks给Form带来的新变化 ⚫ React Hooks 精进 13 - Hooks给Form带来的新变化
在表单中使用 React 组件:受控组件和非受控组件非受控组件:表单元素的值不是由副组件决定的,是完全内部的状态 通过非受控组件的方式,可以避免某些程度上的组件重复渲染导致的性能问题,但是无法对外有交互。 使用 Hooks 简化表单处理维护
2023-08-06
06
⚫ React Hooks 精进 12 - 项目结构:按领域组织文件夹结构 ⚫ React Hooks 精进 12 - 项目结构:按领域组织文件夹结构
在实际开发中,关键在于:每增加一个新的功能,整个应用程序的复杂度不应该明显上升,这样才能保证应用程序始终可扩展,可维护。 软件复杂度的根源:复杂的依赖关系按领域组织文件夹结构通常在开发中会从技术角度对文件夹进行拆分,而不是按照业务功能组织在
2023-08-06
05
⚫ React Hooks 精进 11 - 创建自定义事件 ⚫ React Hooks 精进 11 - 创建自定义事件
props 是组件之间通信的基础。 在 React 中使用原生事件React 原生事件的原理:合成事件由于虚拟 DOM 的存在,在 React 中即使绑定一个事件到原生的 DOM 节点,事件也并不是绑定在对应的节点上,而是所有的事件都是绑定
2023-08-05
05
⚫ React Hooks 精进 10 - 函数组件设计模式 ⚫ React Hooks 精进 10 - 函数组件设计模式
函数组件设计模式保证状态的唯一数据源,语义化的拆分复杂组件都是一些设计模式。 容器模式:实现按条件执行 Hooks注意点:Hooks 必须在顶层作用域调用(因为 React 需要在函数组件内部维护所用到的 Hooks 的状态)。 比如有一个
2023-08-05
07
27
15
15
⚫ React Hooks 精进 8 - 复杂状态处理 ⚫ React Hooks 精进 8 - 复杂状态处理
状态一致性React 开发就是复杂应用程序状态的管理和开发。 原则一:保证状态最小化在保证 State 完整性的同时也要保证它的最小化,如果某些数据能从已有的 state 中计算得到那么不要把计算的结果存到 state 内。 按照 Reac
2023-07-15
15
⚫ React Hooks 精进 7 - 全局状态管理 Redux ⚫ React Hooks 精进 7 - 全局状态管理 Redux
Redux 是状态管理框架,基于不可变数据的机制。 Redux 的出现背景原先的数据传递:组件级别的 state,从上而下的 props 两个状态机制。 但是无法满足类似跨层级的组件数据共享和传递。 Redux Store 的特点 Redu
2023-07-15
10
⚫ React Hooks 精进 6 - 典型的使用场景 ⚫ React Hooks 精进 6 - 典型的使用场景
在开发前需要思考:这个功能的哪些逻辑可以抽出成为独立的 Hooks。 Hooks 核心优点: 方便进行逻辑复用 帮助关注分离 自定义 Hooks方法:声明一个名字以 use 开头的函数,且在函数内使用到了其他 Hooks,如果没有使用到
2023-07-10
03
31
https://www.notion.so/icons/branch_gray.svg Notion https://www.notion.so/icons/branch_gray.svg Notion
该系列将会持续更新,我会整理以及和大家分享我平时的常用公式 Notion 公式是 Database 数据库最重要的功能之一,在 Notion 数据库中,我们可以通过添加一个公式属性,来基于其他属性进行运行各种计算和函数,来操作现有数据并得出
2023-03-31
02
26
20
💟 汪汪周刊 004期:怎么停止精神内耗 💟 汪汪周刊 004期:怎么停止精神内耗
Hello,大家好,这里是阿汪同学。本期关键词: 焦糖布丁前提每天晚上睡觉前总会 ‼️ 本周刊非纯技术周刊,包括各方面的分享。 有趣的工具专业技术领域Widverse · 汪汪汪世界 Widverse 是我开发的组件库,支持嵌入 Noti
2023-02-20
17
13
💟 汪汪周刊 003期:如何突破自己的学习瓶颈 💟 汪汪周刊 003期:如何突破自己的学习瓶颈
Hello,大家好,这里是阿汪同学。本期关键词: 星空葡萄前提前几天在逛掘金的时候,看到了一篇大哥写的文章《如何突破技术瓶颈(适合 P6 以下)》,特别有感触,其实毕业后没多久就碰上了疫情导致在工作上一直处于舒适圈也没有突破,一直想学习精
2023-02-13
1 / 2