React | Vue
文章平均质量分 90
汇聚 MVVM 框架文章,如 React、Vue 等
编程轨迹_
修罗社区 | 掘金优秀创作者 | 清华大学出版社签约作者 | Web3 开发者 | CSDN 银牌讲师 | 蓝桥云课2021年度人气作者Top2 | 工信部蓝桥认证命题人 | CSDN 博客专家 | 腾讯云2022 年度优秀作者 | 阿里云专家博主 | 华为云享专家 | 著作:《前端面试复习笔记》|《Web3 开发系列教程》|《ThreeJS 在网页中创建动画》|《ElementUI 详解与实战》|《PWA 渐进式Web应用开发》
展开
-
在 RN 中构建自适应 UI
如果你要在 React Native 中构建自适应用户界面,你需要对可用的工具和技术有深刻的理解。例如通过利用Dimensions API、useWindowDimensions、SafeAreaView 组件和平台特定的编码策略,可以创建响应性和自适应的 ui,从而在不同的设备和平台上提供最佳的用户体验。希望这篇文章能帮助你梳理这些方法!原创 2023-10-21 16:03:51 · 658 阅读 · 0 评论 -
搞懂了,React 中原来要这样测试自定义 Hooks
首先,我们先编写一个自定义 Hooks,接着我们再使用 React Testing Library 对它进行测试。下面这段代码,你看到的是我将前面计算器的逻辑提取到一个名为useCounter}) => {return {接着,让我们来探索一下如何使用import {})这时候你会发现上面这段代码在执行的时候会有一些问题,在下面的内容中我会进行阐述。测试自定义钩子不同于测试组件。当你尝试将钩子传递给render()函数来测试钩子时,你将收到一个类型错误指示该钩子不能分配给类型的参数。原创 2023-06-18 18:34:20 · 750 阅读 · 0 评论 -
猿创征文|2022年快过完了,是时候总结一下那些优秀的 React 组件库
2022 年只剩下 2 个月,在这快一年的开发过程中,我觉得是时候总结了 7 个很棒的、日常开发中常用的 React 组件库。原创 2022-11-04 09:44:42 · 781 阅读 · 1 评论 -
提升 React 应用的安全性:从这几点入手
目前的网络环境,共享的数据要比以往任何时候都多,对于用户而言,必须注意在使用应用程序中可能遇到的相关风险。原创 2022-09-06 22:32:43 · 1756 阅读 · 0 评论 -
【Vue3】通过实例,理解 Vue3 的响应式设计
响应式指的是变量(如:数组、字符串、数字、对象等)在其值或它引用的任何其他变量在声明后发生更改时更新的能力。在本文中,我们将研究 Vue 中的响应式设计,它是如何工作的,以及我们如何使用新创建的方法和函数来创建响应式变量。默认情况下,JavaScript 不是响应式的。 这意味着如果我们创建变量 boy 并在应用程序的 A 部分中引用它,然后在 B 部分继续修改 boy,A 部分将不会更新为boy 的新值。上面的代码片段是 JavaScript 非响应式特性的经典示例——因此,为什么更改没有反映在 sen原创 2022-07-08 08:40:31 · 1718 阅读 · 32 评论 -
十分钟,让你学会Vue的这些巧妙冷技巧
感谢提供本期文章的作者:作者:村上小树链接:https://juejin.cn/post/7103066172530098206来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。写了两年的Vue,期间学习到好几个提高开发效率和性能的技巧,现在把这些技巧用文章的形式总结下来。1. 巧用 $attrs和 $listeners$attrs 用于记录从父组件传入子组件的所有不被 props 捕获以及不是 class 与 style 的参数,而 $listeners .转载 2022-06-01 08:56:22 · 240 阅读 · 4 评论 -
目前最流行的 5 大 Vue 动画库,使用后太炫酷了
动画在交互方式中发挥着重要作用,它们可通过添加一些视觉风格来增强用户体验。 在本文中,我们将研究和比较目前最流行的 Vue.js 动画库。vue-kinesis首先是 vue-kinesis,它是一个强大的动画库,它提供了一系列组件,允许我们将交互式动画添加到我们的 Vue 应用程序中。 这个库会自然地对光标变化做出反应,并根据鼠标事件调用动画,但有趣的是,除此之外,vue-kinesis 还允许我们根据音频变化控制动画。它的组件具有广泛的自定义属性,我们可以使用它们以编程方式控制动画,从而使我们能原创 2022-05-23 08:30:12 · 23574 阅读 · 15 评论 -
快将你的 React 应用迁移到 Vite 吧,速度太快啦
我们大多数人将使用 Create React App 来创建 React App。 它支持所有开箱即用的配置。 但是,当您的项目代码增长时,您可能会面临更高的构建时间、开发服务器的启动速度变慢并等待 2 到 5 秒以反映您在代码中所做的更改,并且当应用程序大规模增长时,这可能会迅速增加。这增加了开发时间,因为每次更改我们需要等待 2 到 6 秒。生产构建时间,部署快速修复可能需要大约 10 到 20 分钟。But, 时间就是金钱🙂。为什么 CRA 如此慢?CRA 使用 Webpack 来 b原创 2022-05-20 08:04:17 · 781 阅读 · 4 评论 -
Vue3 的 Reactive 响应式到底是什么
Vue 3 除了令人钦佩的性能改进,还带来了一些新功能。可以说,最重要的介绍是 Composition API 。在本文的第一部分中,我们将概括 Vue3 创建新 API 的动机:即,更好的组织和重用代码。在第二部分中,我们将重点讨论使用新API时较少讨论的方面,例如响应式特性。我将响应式特性其称为按需响应。在介绍了相关的新特性之后,我们将构建一个简单的电子表格应用程序来演示。最后,我将讨论这种按需响应的改进在现实场景中的用途。Vue3 有什么新功能,为什么它很重要Vue 3 是 Vue 2 的主要原创 2022-05-19 07:44:52 · 1057 阅读 · 14 评论 -
【React】将 useReducer 应用于 Web Worker,擦出奇妙的火花
有这么一个场景,当加载一个网页时,它突然变得无响应,直到所有的资源完全加载完毕才响应。但是,当资源加载时,用户可能无法执行页面上的某些功能,比如单击、选择或拖动元素。这个时候你可能会想到使用 Web workers帮助我们解决这个问题。在本文中,我们将学习如何在 React 应用程序中使用web workers。我们还将学习通过 useWorkerizedReducer 在web worker 中使用 useReducer Hook。web workerweb worker 是一个JavaScript原创 2022-05-16 07:52:25 · 339 阅读 · 9 评论 -
使用React Router v6 进行身份验证完全指南
React Router v6是React应用程序的一个流行且功能强大的路由库。它提供了一种声明式的、基于组件的路由方法,并能处理URL参数、重定向和加载数据等常见任务。这个最新版本的React Router引入了很多新概念,比如<Outlet />和layout布局路由,但相关文档仍然很少。本文将演示如何使用React Router v6创建受保护的路由以及如何添加身份验证。开始打开终端,运行以下命令创建一个新的 React 项目:> npx create-react-app原创 2022-05-13 07:37:10 · 1400 阅读 · 2 评论 -
实战:使用 React 实现渐进式加载图片
图片对网站有很大的影响。它们的存在改善了用户体验,提高了用户粘性。然而,加载高质量的图片需要时间,而且会让这种体验更令人沮丧,尤其是在网速较慢的情况下。为了解决这个问题,开发人员需要部署支持积极加载体验的策略。其中一个策略是渐进式图像加载。在本文中,我们将学习渐进式图像加载,如何在React中实现这个策略。我将从以下几个步骤介绍:为什么渐进式图像加载是有用的React中的渐进式图像加载技术创建一个图像组件将缩略图更新为实际图像实现过渡模糊使用库逐步加载图像为什么渐进式图像加载是有原创 2022-05-08 09:46:01 · 1391 阅读 · 6 评论 -
面试官:如何解决React useEffect钩子带来的无限循环问题
React的useEffect Hook可以让用户处理应用程序的副作用。例如:从网络获取数据:应用程序通常在第一次加载时获取并填充数据。这可以通过useEffect函数实现操作UI:应用程序应该响应按钮点击事件(例如,打开一个菜单)设置或结束计时器:如果某个变量达到预定义值,则内置计时器应自行停止或启动尽管useEffect Hook在React生态系统中很常见,但它需要时间来掌握。因此,许多新手开发人员在配置他们的useEffect函数时,会导致无限循环问题。在本文中,您将了解不同场景下带来的原创 2022-05-07 11:36:25 · 2459 阅读 · 4 评论 -
我是这样在 React 中实践 TDD 编程的
在Redux中编写测试听起来肯定有悖直觉。如果您使用了Redux,它可能看起来更加复杂。然而,在添加功能之前编写测试有助于编写更好的代码,因为你预先考虑了将使用的设计模式、体系结构和变量的名称。我们正在构建一个用户管理仪表板。基本上,使用Redux,我们想执行CRUD操作。用户可以:创建用户更新用户删除用户获取用户或用户列表这个小项目中的用户将有四个属性:id\name\username\email为了简单起见,我们不编写UI代码。我们将主要关注于创建一个测试环境,编写测试,并.原创 2022-04-21 08:30:00 · 735 阅读 · 0 评论 -
给我5分钟,教你写出干净清爽的 React 代码
作为React开发人员,我们都希望编写更简洁、更容易阅读的代码。在这篇指南中,我总结了七种最重要的方法,你可以从今天开始编写更干净的React代码,让构建React项目和检查代码变得更容易。一般来说,学习如何编写更清晰的React代码将使你成为一个更有价值、更快乐的React开发人员,所以让我们开始吧!1. 使用JSX简写如何将true的值传递给给定的prop?在下面的例子中,我们使用showTitle这个prop来在导航栏组件中显示我们应用的标题。// src/App.jsexport d原创 2021-04-10 17:03:31 · 830 阅读 · 0 评论 -
React ref & useRef 完全指南
在这篇文章中,你将学习如何使用React.useRef()钩子来创建持久的可变值(也称为references或refs),以及访问DOM元素。我们将从下面几点讲解:1. 可变值- 1.1用例:记录按钮点击- 1.2用例:实现秒表2. 访问DOM元素- 2.1用例:聚焦输入3.更新引用限制4. 总结可变值useRef(initialValue)接受一个参数(引用的初始值)并返回一个引用(也称为ref)。引用只是一个具有特殊属性current的对象:const reference .原创 2021-03-28 20:13:31 · 2319 阅读 · 0 评论 -
使用 React-Hook-Form 让你的表单天生强大
没有人喜欢创建和重新创建带有验证的复杂表单,包括React开发人员。在React中构建表单时,必须使用一个表单库,该库提供了许多方便的工具,而且不需要太多代码。基于实用和简单这两个标准,应用程序最理想的React表单库是 React-hook-form 。让我们看看如何在你自己的项目中使用 React-hook-form 来为你的React应用程序构建丰富的、有特色的表单。安装让我们来讨论一个典型的用例:一个用户注册到我们的应用程序。对于我们的注册表单,我们将为任何新用户的用户名、密码和电子邮.原创 2021-03-21 21:45:20 · 9737 阅读 · 5 评论 -
【Vue】(3)生命周期钩子函数 | 组件定义的方式 | 组件切换方式 | 父子组件之间传值 | watch/methods/computed
Vue实例的生命周期生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称生命周期生命hz周期钩子:生命周期事件的别名而已组件创建期间的4个钩子函数beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data和methods属性created:实例已经在内存中创建好,此时data和methods也已经创建好。但,此时还没有开始编...原创 2019-10-20 16:56:34 · 720 阅读 · 0 评论 -
【React】归纳篇(二)JSX使用与虚拟DOM
先上示例:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" con原创 2018-08-30 21:00:29 · 388 阅读 · 0 评论 -
【React】归纳篇(三)模块与组件以及模块化与组件化-概念与基本使用
慨念模块:向外提供特定功能的JS文件,便于复用JS,简化JS,提升JS效率数据、对数据的操作(函数)、将想暴露的私有的函数向外暴露(暴露的数据类型是对象)模块化:形容项目编码方式,即按模块编写与组织的项目。组件:用来实现特定布局功能效果的代码与资源集合,包含html、css、js、图片资源等,例如一个页面中头部区域的资源集合组件化:形容项目的编码方式,即按组件方式编写实现的项...原创 2018-09-05 19:55:21 · 1482 阅读 · 0 评论 -
【React】归纳篇(四)组件的三大属性之 state | props | refs 属性
再次来回顾下 : 组件化编码两步走:1、定义组件(两种方式)2、渲染组件标签组件的三大属性之 state 属性(最重要的属性)state基础(最重要的属性)state是组件对象最重要的属性,其值是对象,即可以包含多个数据可以通过更新组件的state来更新对应的页面的显示(重新进行组件渲染)state 操作初始化状态constructor(props){...原创 2018-09-05 20:02:06 · 721 阅读 · 0 评论 -
【React】归纳篇(五)组件组合的使用 | 受控与非受控组件 | 组件的综合练习 | 获取表单数据
今天我们来一个小练习,最常见的TODO练习,将组件进行组合使用。首先明确以下3点: 功能界面的组件化编码流程(重要)1、拆分组件:例如把一个整体界面进行拆分,分为一个个单个组件2、实现静态组件:使用组件实现静态页面效果3、实现动态苏建:动态显示初始化数据;实现交互功能,如绑定事件监听思考?数据应该保存在哪个组件内?分析:1、看数据是某个组件需要,还是...原创 2018-09-05 20:38:33 · 585 阅读 · 0 评论 -
【React】归纳篇(六)组件对象的生命周期 | 实例 | 虚拟DOM与DOM Diff算法
组件对象的生命周期组件对象的生命周期,指的是从组件对象产生到销毁的过程。如下图所示: 生命周期的回调函数:你定义了,你没有调用,但是这个函数却执行了。如render()函数。也称为生命周期的“钩子函数”。透明度改变动画-实例<!DOCTYPE html><html lang="en"><head> <meta char...原创 2018-09-12 20:46:14 · 355 阅读 · 0 评论 -
【React】归纳篇(七)React脚手架 | 写一个表单
React 脚手架脚手架:用来帮助程序员快速创建一个基于某种库的模板项目。其包括:所有需要的配置指定的所有的依赖可以直接安装/编译/运行的简单效果React 提供了用于创建react项目的脚手架库:create-react-app,使用这个脚手架开发项目具有“模块化、组件化、工程化”特点。工程化:例如通过一个命令就能对项目进行打包、编译,从而提升效率。通常项目的整体技术...原创 2018-09-12 20:51:36 · 1280 阅读 · 0 评论 -
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
在React中发送Ajax请求-axios的使用 React本身不包含发送Ajax的代码,一般使用第三方的库。如axios,这是专门用于ajax请求的库。其封装了XmlHttpRequest对象的ajax,且使用promise风格写法,在浏览器的客户端与服务端都能使用。你可能会想问为什么不用fetch()原生函数呢?因为考虑到对老版本浏览器的支持情况。 其次,fetch()不使用X...原创 2018-09-13 22:15:19 · 5305 阅读 · 0 评论 -
【React】归纳篇(九)组件间通信的3中方式之props与订阅发布机制 | subscribe | publish | 改写前面练习
组件间通信的2种方式方式1:通过props传递1、一般数据–>父组件传递数据给子组件–>子组件读取数据2、函数数据–>子组件传递数据给父组件–>子组件调用函数3、共同的数据放在父组件上,特有的数据放在自己组件内部(state)4、通过props可以传递一般数据和函数数据,只能一层一层传递方式2:消息订阅(subscribe)与发布(publish)机制联系...原创 2018-09-22 17:05:47 · 1245 阅读 · 0 评论 -
【React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react
react-router4react-router概览1、react的一个插件库2、专门用于实现一个SPA应用3、基于react的项目都会用到该库SPA1、点击页面中的链接不会刷新页面,本身也不会向服务器发送请求2、点击路由链接时,只会发生页面局部更新3、数据通过ajax请求,在前端异步展示4、整个应用只有一个完整页面,该页面由各种组件构成路由路由时一个映射关系(k...原创 2018-09-22 17:15:58 · 1925 阅读 · 0 评论 -
【Vue】(1)基础知识 | MVVM | 基础指令 | v-model | v-for | v-if | v-show | 实例
VueJS 基础MVC与MVVMVue只关注视图层,是一套构建用户界面的框架。app.js :项目的入口模块,一切的请求,都要先进入这里进行处理。(注意:app.js并没有路由分发功能,需要调用router.js模块进行路由的分发处理)router.js:这是路由分发处理模块:为了保证路由模型的只能单一,router.js只负责分发路由,不负责具体业务逻辑的处理(如果涉及到业务逻辑处...原创 2019-07-14 22:44:52 · 713 阅读 · 0 评论 -
【Vue】(2)基础知识 | 过滤器 | 指令
过滤器Vue允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在2个地方:mustache插值和v-bind表达式。过滤器应该被添加在Javascript表达式的尾部,有管道符 "|"指示。过滤器定义语法过滤器的function的第一个参数,已被规定了,永远是过滤器管道符前面传递过来的数据Vue.filter('过滤器的名称',function(data){});...原创 2019-09-15 10:59:07 · 312 阅读 · 3 评论 -
【React】归纳篇(一)基本使用 React开发环境搭建
常用网站https://reactjs.org/docs/getting-started.html https://react.docschina.org/ https://www.bootcdn.cn/常用三个文件//react 核心库 [必要]react.development.js&lt;script src="https://cdn.bootcss.com/re...原创 2018-08-30 20:56:01 · 1230 阅读 · 1 评论