HTTISHERE · 阿汪同学
  文章分类
随笔 3 LeeCode 1 读书&听书 1 大前端 20 JavaScript 20 android 1 HTML 1 日本語 3 手帳 2 css/Less 1 React 21 Vue 2 微信小程序 1 Taro 1 周刊 6 Notion 3 开发 3 日语初级 1 Daily 5 TypeScript 9 algorithm 2 SASS 1 browser 3 CSS/Less 4
⚫ React Hooks 精进 18 - 服务器端组件 ⚫ React Hooks 精进 18 - 服务器端组件
React 17渐进升级React 17 带来的渐进升级提供了一种新方案，渐进升级的支持就是一个应用可以同时由多个 React 版本。 新的事件模型react 中所有的事件都是合成事件，实现的机制是在根节点上监听所有事件，经过 react
2023-08-12 React
React
⚫ React Hooks 精进 17 - 单元测试 & 常用的第三方工具库 ⚫ React Hooks 精进 17 - 单元测试 & 常用的第三方工具库
单元测试使用 Jest 和 React Testing Library 进行单元测试JestFacebook 推出的 js 但愿测试框架，零配置就能提供并发测试，测试覆盖率，Mock 工具，断言 API 等。 Jest 从哪里寻找测试文件
2023-08-12 React
React
⚫ React Hooks 精进 16 - 打包部署 ⚫ React Hooks 精进 16 - 打包部署
了解 Webpack通常在实际开发中我们不需要太关注源代码是通过什么编译器如何打包成最后的应用程序的，因为 IDE 已经帮我们把这些都做好了。 但是我们需要知道它的主要功能，以及能够排查问题。 Failed to compile：编译阶段
2023-08-09 React
React
⚫ React Hooks 精进 15 - 按需加载 ⚫ React Hooks 精进 15 - 按需加载
控制整个应用的大小，提高加载性能是前端开发需要的挑战。 提高首屏加载速度： 对应用分包 采用高效的缓存策略 实现按需加载使用 import 语句，定义按需加载的起始模块本质在于，需要有动态加载模块的能力——import（ECMA S
2023-08-09 React
React
⚫ React Hooks 精进 14 - 浮动层的使用 & 路由管理 ⚫ React Hooks 精进 14 - 浮动层的使用 & 路由管理
浮动层的使用通常的对话框使用： 对话框需要在父组件中声明，才能在子组件中控制是否显示。 给对话框传递参数智能由 props 传入，意味着所有状态管理需要在更高级别的组件上。 处理对话框的误区当这里是一个左右分栏布局的页面，在左侧的菜单栏
2023-08-08 React
React
⚫ React Hooks 精进 13 - Hooks给Form带来的新变化 ⚫ React Hooks 精进 13 - Hooks给Form带来的新变化
在表单中使用 React 组件：受控组件和非受控组件非受控组件：表单元素的值不是由副组件决定的，是完全内部的状态 通过非受控组件的方式，可以避免某些程度上的组件重复渲染导致的性能问题，但是无法对外有交互。 使用 Hooks 简化表单处理维护
2023-08-06 React
React
⚫ React Hooks 精进 12 - 项目结构：按领域组织文件夹结构 ⚫ React Hooks 精进 12 - 项目结构：按领域组织文件夹结构
在实际开发中，关键在于：每增加一个新的功能，整个应用程序的复杂度不应该明显上升，这样才能保证应用程序始终可扩展，可维护。 软件复杂度的根源：复杂的依赖关系按领域组织文件夹结构通常在开发中会从技术角度对文件夹进行拆分，而不是按照业务功能组织在
2023-08-06 React
React
⚫ React Hooks 精进 11 - 创建自定义事件 ⚫ React Hooks 精进 11 - 创建自定义事件
props 是组件之间通信的基础。 在 React 中使用原生事件React 原生事件的原理：合成事件由于虚拟 DOM 的存在，在 React 中即使绑定一个事件到原生的 DOM 节点，事件也并不是绑定在对应的节点上，而是所有的事件都是绑定
2023-08-05 React
React
⚫ React Hooks 精进 10 - 函数组件设计模式 ⚫ React Hooks 精进 10 - 函数组件设计模式
函数组件设计模式保证状态的唯一数据源，语义化的拆分复杂组件都是一些设计模式。 容器模式：实现按条件执行 Hooks注意点：Hooks 必须在顶层作用域调用（因为 React 需要在函数组件内部维护所用到的 Hooks 的状态）。 比如有一个
2023-08-05 React
React
⚫ React Hooks 精进 9 - 异步处理：向服务端发送请求 ⚫ React Hooks 精进 9 - 异步处理：向服务端发送请求
实现自己的 API Client在项目内实现异步请求时第一个事情就是创建自己的 API Client，之后所有的请求都可以通过这个 Client 发出去。 一些通用的 header 服务器地址的配置：比如可以根据当前环境判断连接的服务器地
2023-07-15 React
React
⚫ React Hooks 精进 8 - 复杂状态处理 ⚫ React Hooks 精进 8 - 复杂状态处理
状态一致性React 开发就是复杂应用程序状态的管理和开发。 原则一：保证状态最小化在保证 State 完整性的同时也要保证它的最小化，如果某些数据能从已有的 state 中计算得到那么不要把计算的结果存到 state 内。 按照 Reac
2023-07-15 React
React
⚫ React Hooks 精进 7 - 全局状态管理 Redux ⚫ React Hooks 精进 7 - 全局状态管理 Redux
Redux 是状态管理框架，基于不可变数据的机制。 Redux 的出现背景原先的数据传递：组件级别的 state，从上而下的 props 两个状态机制。 但是无法满足类似跨层级的组件数据共享和传递。 Redux Store 的特点 Redu
2023-07-15 React
React
⚫ React Hooks 精进 6 - 典型的使用场景 ⚫ React Hooks 精进 6 - 典型的使用场景
在开发前需要思考：这个功能的哪些逻辑可以抽出成为独立的 Hooks。 Hooks 核心优点： 方便进行逻辑复用 帮助关注分离 自定义 Hooks方法：声明一个名字以 use 开头的函数，且在函数内使用到了其他 Hooks，如果没有使用到
2023-07-10 React
React
⚫ React Hooks 精进 5 - 函数组件的生命周期 ⚫ React Hooks 精进 5 - 函数组件的生命周期
忘记 Class 组件的生命周期Class 组件和函数组件是两种实现 React 应用的方式，需要忘记 Class 组件的生命周期概念。 React 的本质：从 Model 到 View 的映射。 改变组件状态的场景： 用户操作 请求返回
2023-02-26 React
React
⚫ React Hooks 精进 4 - 内置Hooks（二）回调函数 ⚫ React Hooks 精进 4 - 内置Hooks（二）回调函数
useCallback，useMemo，useRef，useContextuseCallback：缓存回调函数函数组件中并没有一个直接的方式在多次渲染之间维持一个状态，所以一些定义在函数组件内的函数在多次渲染之间无法重用，每次都需要创建一个
2023-02-17 React
React
⚫ React Hooks 精进 3 - 内置Hooks（一）组件状态 ⚫ React Hooks 精进 3 - 内置Hooks（一）组件状态
遇到需求时，直接考虑在 Hooks 内如何实现。 内置 Hooks常用 Hooks useState useEffect useCallback useMemo useRef useContext … useState：让函数组件具备
2023-02-02 React
React
⚫ React Hooks 精进 1 - 用Hooks的角度去转变开发思路 ⚫ React Hooks 精进 1 - 用Hooks的角度去转变开发思路
React 两个颠覆性创新点 虚拟 DOM 机制 JSX 语法 Hooks 出现之前的业务逻辑复用方式在组件内的不同生命周期中做时间监听的绑定和解绑。 引入 Hooks 之后只需要通过 Hooks 的方式进行封装，将其变成一个可绑定的数据
2023-01-30 React
React
⚫ React Hooks 精进 2 - React基本概念 & Hooks的理解 ⚫ React Hooks 精进 2 - React基本概念 & Hooks的理解
在 React 之前需要调用 DOM 的 API 来修改 DOM 树的结构从而改变 UI 的展示方式。 React 之后需要要在业务状态和 UI 状态之间建立一个绑定的关系。 基本概念用组件的方式描述 UI在 React 内所有的 UI
2023-01-30 React
React
「React Practice」React生态圈 「React Practice」React生态圈
「React Practice」系列教程是学习王沛老师的【React 实战进阶】课程的学习记录，demo 参考来自https://codesandbox.io/s/6n20nrzlxz。非原创，仅作为学习记录。 Redux ref：ht
2021-07-12 React
React
「React Practice」Base 「React Practice」Base
「React Practice」系列教程是学习王沛老师的【React 实战进阶】课程的学习记录，demo 参考来自https://codesandbox.io/s/6n20nrzlxz。非原创，仅作为学习记录。 React 组件（pro
2021-07-07 React
React
1 / 2