经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 React

vue3+ts中ref与reactive指定类型实现示例

目录ref 的基础特性如何在ref中指定类型reactiveisRef、isReactivetoRef、toRefs、toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 con...[2022/6/27]

React中前端路由的示例代码

目录一. url是什么二. 使用步骤 一. url是什么 访问不同url, 展示不同的组件 二. 使用步骤 安装React路由:命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4...[2022/4/18]

react 可拖拽进度条的实现

效果 /* * @Author: hongbin * @Date: 2022-04-16 13:26:39 * @LastEditors: hongbin * @LastEditTime: 2022-04-16 21:00:02 * @Description:拖动进度...[2022/4/18]

React中的Diff算法你了解吗

目录一、Diff算法的作用二、React的Diff算法  1、什么是调和?2、什么是Reactdiff算法?3、diff策略4、treediff:5、componentdiff:6、elementdiff 三、基于Diff的开发建议总结 一、Diff算法的作用 渲染...[2022/3/14]

react底层的四大核心内容架构详解

目录reactreact-domreact-reconcilerscheduler总结 react 提供定义 react 组件(ReactElement)的必要函数, 一般来说需要和渲染器(react-dom,react-native)一同使用. 在编写react应用的代码时, 大部分都是调用此包...[2022/3/14]

记一个React.memo引起的bug

目录一般memo用法:问题描述解决方法方案一.使用useRef+forceUpdate方案方案2.使用useCallback总结 与PureComponent不同的是PureComponent只是进行浅对比props来决定是否跳过更新数据这个步骤,memo可以自己决定是否更新,但它是一个函数组件而非...[2022/3/8]

react实现导航栏二级联动

本文实例为大家分享了react实现导航栏二级联动的具体代码,供大家参考,具体内容如下 效果图 js代码 import { Component } from "react"; import ''. croll.le '' ? cla Scroll extends Compo...[2022/3/8]

react-router-domV6版本的路由和嵌套路由写法详解

目录1-单级路由2-嵌套路由(about路径进行嵌套)ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</Nav...[2022/3/7]

React自定义Hook-useForkRef的具体使用

目录开篇思路实现自定义Hook-useForkRef 开篇 使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素,而在使用 React 封装组件时,会有这样一个场景: 组件将 props.children 作为 render 内容;组件内部会创建 ref 绑定...[2022/3/7]

React的三大属性你都知道吗

目录React三大属性props函数组件类组件state有状态组件和无状态组件setStateprops和state属性的区别refsReact.createRefref的绑定总结 React三大属性 props 组件是封闭的,接收外部数据应该通过props来实现函数组件通过参数props来接...[2022/2/28]

React-Router6版本的更新引起的路由用法变化

目录用法变化替换为嵌套路由重定向路由跳转路由传参search传参动态路由传参其他总结 React Router应该是React生态系统中最受欢迎的库了,npm周下载量达600w+,github也有45.2k的加星,足以说明它是一款非常优秀的库,作为React社区重要的库,它经历了多次迭代和重大更改,...[2022/1/18]

React事件绑定详解

React事件绑定详解

目录类组件事件绑定函数组件事件绑定总结 React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}} 注意:React事件采用驼峰命名法 类组件事件绑定 import React f...[2021/12/17]

鍦?HTML 椤甸潰涓娇鐢?React鐨勫満鏅垎鏋恄HTML/Xhtml

璇ユ柟妗堜娇鐢ㄥ満鏅細鍦╤tml椤甸潰涓娇鐢╮eact锛屼富js鏂囦欢index.js鍜屽叾瀹冮潪react鍔熻兘浣跨敤js妯″潡鍖栫殑鏂瑰紡寮€鍙戯紝閫傚悎杞婚噺绾т腑灏忓瀷搴旂敤 index.html浠g爜锛?/p> 寮曞叆react銆乺eact-dom銆乥abel銆乵oment銆...[2021/12/15]

setup+ref+reactive实现vue3响应式功能

setup+ref+reactive实现vue3响应式功能

setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用。在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能? 一...[2021/11/23]

JS跨域解决方案react配置反向代理

跨域解决方案 ? jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMe age window.name WebSocket react的代理实现跨域 在配置在src etupProxy.js文件,并通过npm安装http-proxy-...[2021/11/23]

详解React 和 Redux的关系

目录一、redux和react的关系二、react多组件共享三、redux的三个核心概念1、store2、action (动作)3、reducer (纯函数)总结 文档: Redux中文文档 Redux 官方文档对 Redux 的定义是:一个可预测的 JavaScript 应用状态管...[2021/11/16]

详解React的组件通讯

目录组件通讯介绍内容三种方式小结组件通讯-父传子内容:核心代码子组件接收数据组件通讯-子传父思路步骤核心代码小结组件通讯-兄弟组件思路核心代码组件通讯 -跨级组件通讯使用Context的步骤落地代码总结 组件通讯介绍 内容 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据...[2021/11/9]

基于CSS实现MaterialUI按钮点击动画并封装成 React 组件

前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, mate...[2021/11/9]

react dva实现的代码

目录dva使用dva实现dva支持异步router的实现实现: dva dva是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva额外内置了react-router,fetch,可以激烈为一个轻量级的应用框架。 使用dva 定义一个模型,有点像...[2021/11/8]

React Native项目中使用Lottie动画的方法

Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果。 使用流程上,Lottie动画需要先使用Adobe After Ef...[2021/10/8]

使用 Rails API 构建一个 React 应用程序的详细步骤

目录后端:Rails API部分前端:React部分React组件使用 axios 获取 API 数据 【51CTO.com快译】使用React创建项目时,动态数据无法保存的问题要怎么办呢?为此,我开始寻找一个充当备份的API来解决这一问题。 在本文中,我将介绍如何设置和构建一个以Reac...[2021/8/9]

React中Portals与错误边界处理实现

目录Portals 错误边界处理 如果没有使用错误边界会怎样? 注意点 Portals 可以说是 插槽,但 不同于 Vue 中的 slot,它指的是将一个 React 元素渲染到指定的容器 (真实 DOM) 中 比如说,Modal 组件一般默认直接作为 body 的真实结构的子元素...[2021/7/21]

浅谈React Component生命周期函数

浅谈React Component生命周期函数

React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的cla 以及create-react-cla 模块: 分为几个阶段:挂载,更新,卸载,错误处理; 1,挂载:constructor(常用)、static getDerivedStateFromProps、rende...[2021/6/28]

React列表栏及购物车组件使用详解

React列表栏及购物车组件使用详解

本文实例为大家分享了React列表栏及购物车组件的具体代码,供大家参考,具体内容如下 一、组件介绍 商家详细界面(StoreDetail组件): import React from ''react''; import axios from ''axios''; impo...[2021/6/28]

React + Threejs + Swiper 实现全景图效果的完整代码

  咱先看看全景图实现效果:展示地址   截图:   体验了一下是不是感觉周围环境转了一圈,感觉世界是圆的?😁   没错!恭喜你答对了!地球就是圆的!👀 ...[2021/6/28]

React如何创建组件

前言 这节我们将介绍 React 中组件的类别,以及如何创建和使用组件。 本文会向你介绍以下内容: 创建类组件 创建函数组件 渲染组件 合成组件 提取组件 Props 是只读的 组件介绍 组件(Components...[2021/6/28]

React引入antd-mobile+postcss搭建移动端

安装antd-mobile 全局引入 npm install antd-mobile --save 在App.js引入c import ''antd-mobile/dist/antd-mobile.c ''; 在jsx使用antd组件 imp...[2021/6/21]

React星星评分组件的实现

实现的需求为传入对商品的评分数据,页面显示对应的星星个数。 1. 准备三张对应不同评分的星星图片 2. 期望实现的效果 这样的 调用 <StarScore score={data.wm_poi_score}/> 3. 对传...[2021/6/15]

详解如何使用ReactiveObjC

详解如何使用ReactiveObjC

概述 RAC架构框架图 信号流程 基本使用 1、基本控件 UITextField 监听文本输入 [[_textField rac_textSignal] subscribeNext:^(NSString * _Nullable x) { ...[2021/6/7]

使用react-beautiful-dnd实现列表间拖拽踩坑

为什么选用react-beautiful-dnd 相比于react-dnd,react-beautiful-dnd更适用于列表之间拖拽的场景,支持移动端,且较为容易上手。 基本使用方法 基本概念 DragDropContext:构建一个可以拖拽的范围 on...[2021/5/24]

React虚拟列表的实现

1.背景 在开发过程中,总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器,终会导致浏览器的性能下降。如果数据量过大,首先渲染极慢,其次页面直接卡死。当然,你可以选择其他方式避免。例如分页,或者下载文件等等。我们这里讨论如果使用虚拟列表来解决这个问题。 2.什么是虚拟列表 ...[2021/5/17]

React实战进阶45讲,热门前端利器

目前最为流行的前端 UI 开发框架之一,React 不仅让你能够从容应对大型复杂前端应用的开发,其编程思想 还能应用到 React Native 原生 App 开发,服务器端渲染的后端开发。   学习 React 不仅能让你丰富自身的技能库,掌握当下最热门的前端开发利器,同时还能...[2021/5/6]

React使用高德地图的实现示例(react-amap)

pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https: elemefe.github.io/react-amap/component map,有兴趣的可以看下里面的API。 react-amap 安装 1、使用...[2021/4/19]

React 错误边界组件的处理

这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下~ React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载。从 React16 开始就是这样。但是同时React也引入了一个新的概念——错误边界。 定义,...[2021/4/12]

一看就懂的ReactJs基础入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独...[2021/4/6]

React antd tabs切换造成子组件重复刷新

描述: Tabs组件在来回切换的过程中,造成TabPane中包含的相同子组件重复渲染,例如: <Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} typ...[2021/4/6]

react quill中图片上传由默认转成base64改成上传到服务器的方法

react quill中图片上传由默认转成base64改成上传到服务器的方法

使用react-quill富文本编辑器,里面处理图片是默认转成base64,提交到后台的时候文件太大,因此这里改写处理image的逻辑,改成上传到服务器。 具体代码如下: 配置1 import Quill from ''quill'' import ReactQuil...[2019/10/30]

React全家桶+Material-ui构建的后台管理系统

一、简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心。 二、 附录+ 1. [在线体验](https: impleroom.github.i...[2019/10/30]

阿里雷卷:Reactive 基金会的成立将对开发方式带来哪些影响?

作者 | 赵钰莹 近日,Linux 基金会宣布成立 Reactive 基金会。对于 Reactive,各位开发者应该并不陌生,尤其是 Node.js 开发者,但真正了解并意识到这件事情对开发方式带来的影响的恐怕不多。本文,InfoQ 有幸第一时间对推动阿里巴巴成为该基金会初创成员的阿...[2019/9/17]

react项目添加本地音频

react项目添加本地音频

<audio src="./re audio/alarm.mp3" autoplay="autoplay" loop="loop" controls >   <track kind="captions" />   您的浏览器不支持 audio 元素。 <...[2019/8/15]

react如何在网页上编辑并运行代码?

最近想做个能在网站,能在网页上运行代码,并且保存这个组件,看了一下element-react的组件和官方的实例,发现都是可以编辑运行的,因为之前没有这方面的经验,所以看下各位大佬能不能给点意见 原文链接:http: www.cnblogs.com/brxchh/p/11204919.html[2019/7/18]

react koa rematch 如何打造一套服务端渲染架子

前言 本次讲述的内容主要是 react 与 koa 搭建的一套 r 框架,是在别人造的轮子上再添加了一些自己的想法和完善一下自己的功能。 本次用到的技术为: react | rematch | react-router | koa react服...[2019/6/27]

React组件对子组件children进行加强的方法

React组件对子组件children进行加强的方法

问题 如何对组件的children进行加强,如:添加属性、绑定事件,而不是使用<div>{this.props.children}</div>在<div>上进行处理。 前车之鉴 今天写组件遇到这个问题,在网上查阅了很多资料,都说可以使用Rea...[2019/6/24]

简谈创建React Component的几种方式

前言 当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件。但对于接触React不久,还没有真正用它做一个完整项目的人来说,理解如何创建一个组件也并不那么简单。 在最开始的时候我以为创建组件只需要调用createCla 这个ap...[2019/6/17]

React 全自动数据表格组件——BodeGrid的实现思路

表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路: 表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深...[2019/6/12]

【React Native】react-native之集成支付宝支付、微信支付

【React Native】react-native之集成支付宝支付、微信支付

一、在使用支付宝支付、微信支付之前导入桥接好的头文件   github地址:https: github.com/xujianfu/react-native-pay 二、集成支付宝支付流程   RN支付宝需要分别对iOS(Xcode)和安卓(AS)配置,与原生app相比只是将支付操作放在了R...[2019/6/12]

【React Native】React Native项目设计与知识点分享

  闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考。   GitHub:https: github.com/xujianfu/React-Native-CarProject.git   项目截图如下:    一、项目界面设...[2019/6/6]

React中使用外部样式的3种方式(小结)

一、关于c -in-js的认识 1、c -in-js是一种使用 js 编写 c 样式的 c 处理方案。它的实现方案有很多,比如styled-components、polished、glamorous(paypal 开源的,不再维护)、radium、emotion等等。 2、其中最成熟的...[2019/5/28]

JS中使用react-tooltip插件实现鼠标悬浮显示框

前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https: www.npmjs.com/package/react-tooltip 1, 首先在配置文件加上...[2019/5/16]

你再也不用使用Redux、Mobx、Flux 等状态管理了

Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能。看完这个库的说明后,没有想到代码可以这个玩。短短几行代码,仅仅使用 React Hooks ,就实现了状态管理的功能。 看完之后,第一想法就是翻译...[2019/5/9]

295
2
记录数:72 页数:1/212下一页尾页
 友情链接: NPS
加载更多