- 博客(119)
- 收藏
- 关注
RSS订阅
原创 响应式布局的5种实现方案
1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表。
2023-12-01 12:01:33
264
原创 几种前端数据存储方式（记录）
1. cookiecookie生成cookie是存在客户端，session存在服务器端。在cookie当用户第一次访问网页时，服务器会给客户端返回一个cookie，在cookie中保存着服务器端session文件的位置信息，用户第一次访问服务器，服务器就会为它创建一个session文件，并将session的标识保存在cookie中发给它。在这之后，通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。cookie访问和设置在 JavaScript 中可以通过 document.cookie
2021-07-22 15:05:18
3531
原创 React Native 之 定义全局状态管理库（九）
在onPress执行了一个setState的操作，这个操作有时候需要大量计算工作并且导致慢。，请务必注意在release 模式下去测试性能。
2024-05-23 09:30:03
170
原创 微前端架构 之 应用之间样式隔离 （四）
CSS Modules 会自动为这些类名添加唯一的哈希值，以确保它们在每个微前端应用中都是唯一的。如果你使用 webpack 作为构建工具，你可能需要安装 css-loader 和 style-loader。最后，确保每个应用的 CSS 只在其自己的作用域内加载和应用。这可以通过在微前端框架中实现特定的加载和卸载逻辑来实现，或者通过使用。Webpack 的 css-loader 和 style-loader（或类似的工具）的 modules 选项来实现。这可以通过在 CSS 选择器前添加特定的前缀来实现。
2024-05-22 22:29:52
307
原创 React Native 之 接口请求（八）
React Native 提供了和 web 标准一致的Fetch API，用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API，那么 Fetch 用起来将会相当容易上手。
2024-05-22 21:25:58
214
原创 React Native 之 处理触摸事件（八）
React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。Button是一个简单的跨平台的按钮组件。
2024-05-21 22:44:17
228
原创 React Native 之 颜色（七）
React Native 中的组件是使用 JavaScript 进行样式化的。颜色属性通常与 Web 上的 CSS 工作方式相匹配。
2024-05-20 09:26:12
171
原创 React Native 之 图片使用（六）
如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出 50%，以使图片看起来仍然足够清晰。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。然而，读取本地静态图片（使用require(‘./my-icon.png’)语法）则无需指定尺寸，因为它们的尺寸在加载时就可以立刻知道。大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。如果你有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。
2024-05-19 23:39:08
893
原创 React Native 之 Flexbox 布局（五）
在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
2024-05-18 21:32:27
937
原创 React Native 之 高度与宽度（四）
如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。按比例填充屏幕上某一部分，又不想使用 flex 布局，可以在组件的style中使用百分比。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。
2024-05-17 09:14:30
178
原创 微前端架构 之 路由管理（二）
它负责处理多个子应用（也称为微前端）之间的页面跳转和导航。在微前端架构中，由于存在多个独立的子应用，因此需要一个全局的路由管理器来协调这些子应用的路由。
2024-05-16 09:16:41
128
原创 微前端概念（一）
传统的单体前端应用架构在这种背景下显得力不从心，难以应对快速变化的需求和复杂的开发环境。因此，微前端架构应运而生，它将前端应用拆分成多个小型的、独立的微前端，每个微前端负责一个或多个特定的功能模块。（MicroFrontends）是一个近年来兴起的前端架构概念，它将传统意义上的单体前端应用拆解成一系列小型、独立且可复用的前端应用。每个微前端都是一个可独立开发、测试和部署的单元，它们通过统一的规范和机制进行集成，从而共同构建一个功能完备的前端应用。
2024-05-16 08:56:37
553
原创 React Native 之 样式使用（三）
常见的做法是按顺序声明和使用style属性，以借鉴 CSS 中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。
2024-05-15 22:41:33
241
原创 React Native 之 原生组件和核心组件（二）
在 React Native 中，则使用 React 组件通过 JavaScript 来调用这些视图。在运行时，React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。React Native 使用与 React 组件相同的 API 结构。React Native 具有许多核心组件，从表单控件到活动指示器，应有尽有。
2024-05-14 09:16:54
338
原创 React Native 之 开发环境搭建（一）
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。这包括创建AVD（Android Virtual Device，即Android虚拟机）以模拟Android设备，以及配置必要的Android SDK和构建工具。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录。
2024-05-13 21:12:35
929
1
原创 React 之 useCallback（缓存函数）（十八）
如果你正在编写一个 自定义 Hook，建议将它返回的任何函数包裹在 useCallback 中。//这确保了 Hook 的使用者在需要时能够优化自己的代码return {navigate,goBack,
2024-05-12 22:55:06
244
原创 React 之 forwardRef用法（十六）
它允许你将一个 ref 传递给子组件，即使该子组件是通过函数式组件定义的。这在某些情况下很有用，比如当你需要直接访问 DOM 元素或类组件的实例时。vue则通过this.refsXX或thischildren访问子组件的Dom节点对象。
2024-05-10 23:38:09
233
1
原创 React 之 组件之间共享值useContext使用（十五）
useContext 需要与 React.createContext() 一起使用。React.createContext() 会返回一个新的 React Context 对象。这个对象有两个属性：Provider 和Consumer。但是，useContext Hook 使得我们可以直接访问 Context 的值，而不需要使用 Consumer。
2024-05-09 09:18:05
329
原创 React 之 记忆化函数cache（十四）
返回一个与 fn 具有相同类型签名的已缓存版本。在此过程中，它不会调用 fn。：要对其结果进行缓存的函数。fn 可以接受任何参数并返回任何值。
2024-05-08 09:35:33
302
原创 React 之 ＜Suspense＞（十三）
React内置组件 <Suspense> 允许在子组件完成加载前展示后备内容。和Vue的<Suspense>相似。
2024-05-07 09:41:41
324
1
原创 React 之 内置标签＜Fragment＞ (＜＞...＜/＞) （十一）
通常使用 … 代替，它们都允许你在不添加额外节点的情况下将子元素组合。
2024-05-06 09:21:53
309
原创 React 之 主要的内置 Hook（十）
useContext 接收一个 React Context 对象（React.createContext 的返回值）并返回该。它使得你可以无需明确地逐层通过 props 来传递数据，而是在组件之间的任何位置直接访问 React 的 Context。用于在函数组件中添加状态。它返回一个状态变量和一个更新该状态的函数。这使得函数组件能够像类组件一样具有状态。用于在函数组件中执行副作用操作，比如数据获取、订阅、手动修改 DOM 等。它的工作方式与类组件中的。Context 的当前值。
2024-05-05 21:32:23
496
1
原创 React 之 useMemo Hook （九）
它允许你“记住”一些计算值，只有在依赖项之一发生变化时才会重新计算这些值。这有助于避免不必要的重新计算和渲染，从而提高应用程序的性能。
2024-05-04 22:13:30
683
原创 React 之 Effect与事件（event）（八）
事件（event）在Web开发中是一个非常重要的概念。它们是由用户或浏览器与页面交互时触发的，例如点击按钮、滚动页面、提交表单等。事件处理器（event handler）是处理这些事件的函数，你可以在事件处理器中执行特定的操作，例如更新状态、导航到新的页面等。当你传入一个函数给 useEffect 时，React会在每次组件渲染后（包括组件的首次渲染）调用这个函数。但请注意，它并不会阻塞浏览器更新屏幕，因此你的应用看起来仍然是响应式的。
2024-05-03 22:26:54
719
1
原创 React 之 使用 ref 引用值（七）
ref 是一种脱围机制，用于保留不用于渲染的值。你不会经常需要它们。ref 是一个普通的 JavaScript 对象，具有一个名为 current 的属性，你可以对其进行读取或设置。你可以通过调用 useRef Hook 来让 React 给你一个 ref。与 state 一样，ref 允许你在组件的重新渲染之间保留信息。与 state 不同，设置 ref 的 current 值不会触发重新渲染。不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测。
2024-05-02 22:31:04
698
1
原创 React 掌握这几个就入门了（五）
React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。react有很多内置的 Hook。其他单独做一个系列讲。6.如何对事件做出响应并更新界面。2.使用 JSX 编写标签。7.如何在组件间共享数据。1.如何创建和嵌套组件。5.如何渲染条件和列表。以上就是一些基本知识。
2024-04-29 17:06:56
171
原创 React中，双花括号和单花括号的区别（四）
单花括号 {}：用于在JSX中嵌入单个JavaScript表达式。双花括号 {{}}：通常用于在JSX中嵌入一个JavaScript对象字面量作为prop的值。实际上，你可以把它看作是先定义了一个对象（内层花括号），然后再将这个对象作为一个表达式插入到JSX中（外层花括号）。注意：在大多数情况下，你不会在JSX中看到超过两层的花括号嵌套。如果你看到更多层的嵌套，那通常意味着代码可能过于复杂，可能需要考虑重构以提高可读性。
2024-04-28 09:21:09
511
3
原创 React 之 组件模块依赖（三）
在一个文件中声明多个组件，但是文件变得太大的话就不方便查看了。要解决此问题，你可以将一个组件放到一个单独的文件中并（导出） export。组件，然后在另一个文件中（导入） import 该组件。
2024-04-26 09:34:50
409
2
原创 React 之 函数式组件（二）
React的函数式组件是React组件的一种形式，它使用JavaScript函数而不是类来定义组件。这种组件形式在React 16.8版本引入Hooks之后变得特别流行，因为它使得组件逻辑更加简洁、易于理解和测试。Welcome 是一个函数式组件。它接受一个名为 props 的参数，这个参数是一个对象，包含了传递给组件的所有属性。然后，组件返回一个JSX元素，这个元素会被React渲染到DOM中。
2024-04-25 09:27:58
354
原创 JavaScript 全局属性/函数
JavaScript 全局属性属性 描述 Infinity 代表正的无穷大的数值。 NaN 指示某个值是不是数字值。 undefined 指示未定义的值。 JavaScript 全局函数函数 描述 decodeURI() 解码某个编码的 URI。 decodeURIComponent() 解码一个编码的 URI 组件。 encodeURI() 把字符串编码为 URI。 encodeURIComponent() 把字
2024-04-12 09:00:00
238
原创 JavaScript Math 对象
Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
2024-04-11 21:44:59
548
原创 代码使用了 any 类型，如何才能让ESLint不告警
如果你确实需要在某些情况下绕过类型检查，你可以使用类型守卫或类型断言，但这应该谨慎使用，并带有充分的注释说明为什么需要这样做。：如果你知道 value 可能具有哪些属性或方法，你可以使用接口或类型别名来定义这些属性或方法的类型。：如果你发现自己在多个地方使用相似的结构，并希望避免 any，你可以创建更具体的类型来替代它。：如果 value 的类型不固定，并且你希望保持灵活性，你可以使用泛型来定义你的类型。：如果 value 有特定的类型，那么你应该使用那个类型替代 any。
2024-03-30 09:00:00
311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人