JavaScript - 教程之家

59浏览

0评论

react-native 实现购物车滑动删除效果的示例代码

购物车的功能基本上电商项目都会有的，这是一篇关于react-native的，原生android的已经好久没写了。记得以前写原生购物车的时候，遇到过产品的灵魂质问，为啥iOS的滑动删除可以，andr...

2021-05-30

40浏览

0评论

React获取Java后台文件流并下载Excel文件流程解析

记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程，关键部分代码如下。首先在java后台中设置response中的参数：public void exportExcel(HttpServletResponse re...

2021-05-30

44浏览

0评论

详解React 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript...

2021-05-30

65浏览

0评论

实例讲解React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM
生命周期的方...

2021-05-30

47浏览

0评论

React实现阿里云OSS上传文件的示例

简介阿里云 OSS 是阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持...

2021-05-30

199浏览

0评论

React Ant Design树形表格的复杂增删改操作

最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了...

2021-05-30

103浏览

0评论

使用webpack5从0到1搭建一个react项目的实现步骤

前言
在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据...

2021-05-30

35浏览

0评论

React实现类似淘宝tab居中切换效果的示例代码

效果 DOM布局const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2,...

2021-05-30

47浏览

0评论

React+EggJs实现断点续传的示例代码

技术栈
前端用了React，后端则是EggJs，都用了TypeScript编写。断点续传实现原理
断点续传就是在上传一个文件的时候可以暂停掉上传中的文件，然后恢复上传时不需要重新上传整个文...

2021-05-30

35浏览

0评论

实例讲解React 组件

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：function HelloMessage(props) { return <h...

2021-05-30

61浏览

0评论

React冒泡和阻止冒泡的应用详解

阻止事件冒泡分三种：1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();2: 合成事件间的冒泡，使用 e.stopPropagation()；3：阻止合成事件，往...

2021-05-30

34浏览

0评论

React实现全选功能

本文实例为大家分享了React实现全选功能的具体代码，供大家参考，具体内容如下...

2021-05-30

48浏览

0评论

在react项目中使用antd的form组件,动态设置input框的值

问题：创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了原因：点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使...

2021-05-30

39浏览

0评论

React实现todolist功能

一、index.jsReactDOM.render( <React.StrictMode> <TodoList /> </React.StrictMode>, document.getElementById('root'));二、TodoList1、constructorconstructor(props)...

2021-05-30

76浏览

0评论

React使用emotion写css代码

简介：
emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上...

2021-05-30

59浏览

0评论

Vite搭建React项目的方法步骤

前言
日常放鸽，火钳刘明这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。创建一个 Vite 项目
yarn create @vitejs/app如上图，选择了 react-ts 预设模板，如果出现下图一...

2021-05-30

31浏览

0评论

react项目从新建到部署的实现示例

开展新项目本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。项目选型
react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几...

2021-05-30

50浏览

0评论

一百多行代码实现react拖拽hooks

前言
源码总共也就一百多行，看完这个大致可以理解一些成熟的react拖拽库的实现思路，比如react-dnd，然后你上手这些库的时候就非常快了。使用hooks实现的大致效果动图如下：我们的...

2021-05-30

30浏览

0评论

React html中使用react的两种方式

基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</tit...

2021-05-30

85浏览

0评论

React Hook的使用示例

这篇文章分享两个使用React Hook以及函数式组件开发的简单示例。一个简单的组件案例
Button组件应该算是最简单的常用基础组件了吧。我们开发组件的时候期望它的基础样式能...

2021-05-30

107浏览

0评论

React实现登录表单的示例代码

作为一个Vue用户，是时候扩展一下React了，从引入antd、配置less、router，终于实现了一个简单的登录表单。代码如下：import React from 'react';import { Input, Button, message...

2021-05-30

48浏览

0评论

react hooks入门详细教程

State Hooks案例：import { useState } from 'react';function Example() { const [count, setCount] = useState(0);//count:声明的变量；setCount：改变count值的函数；0：count的初...

2021-05-30

106浏览

0评论

React+Antd 实现可增删改表格的示例

最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antdtable表格...

2021-05-30

44浏览

0评论

详解react应用中的DOM DIFF算法

前言
对我们搞前端的来说，目前最流行的两大前端框架毫无疑问当属React和Vue，对于这两大框架，想必大家也是再熟悉不过了。然而，这两大框架无一例外的全部放弃使用传统的DOM技术，却...

2021-05-30

40浏览

0评论

React State状态与生命周期的实现方法

一、实现组件的方法:组件名称首字母必须大写1.通过JS函数方式实现组件<div id="app"></div><script type="text/babel"> var ReactDiv = document.getElementById('app');...

2021-05-30

43浏览

0评论

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

描述：Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：<Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card...

2021-05-30

87浏览

0评论

深入理解React Native核心原理(React Native的桥接（Bridge)

在这篇文章之前我们假设你已经了解了React Native的基础知识，我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。主线程在开始之前，我们需要知道在React Nati...

2021-05-30

29浏览

0评论

React.cloneElement的使用详解

因为要接手维护一些项目，团队的技术栈最近从 vue 转向 react ，作为一个 react 新手，加上一向喜欢通过源码来学习新的东西，就选择了通过阅读 antd 这个大名鼎鼎的项目源码来学习...

2021-05-30

30浏览

0评论

详解对于React结合Antd的Form组件实现登录功能

一、React 结合 Antd 实现登录功能
引入所需的 Antd 组件，代码如下所示：
import { Form, Icon, Input, Button, message } from 'antd'在 Login.jsx 中，创建一个 Login 组件。...

2021-05-30

41浏览

0评论

使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目
实现的是加载一张 2:1 的720全景
分享一下我的创建过程一、搭建框架并安装需要的插件npx crea...

2021-05-30

61浏览

0评论

如何使用Redux Toolkit简化Redux

了解Redux Toolkit，这是用于高效Redux开发的经过验证的工具集。在本文中，你将看到为什么Redux Toolkit值得React社区更多的关注。React和Redux被认为是大规模React应用中管理...

2021-05-30

44浏览

0评论

react中常见hook的使用方式

1、什么是hook？
react hook是react 16.8推出的方法，能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。2、为什么要出现hook？
函数式组件是全局当中一个普通函数...

2021-05-30

58浏览

0评论

React实现一个高度自适应的虚拟列表

近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。改造前：我们可以看...

2021-05-30

46浏览

0评论

ReactRouter的实现方法

ReactRouter的实现ReactRouter是React的核心组件，主要是作为React的路由管理器，保持UI与URL同步，其拥有简单的API与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的...

2021-05-30

41浏览

0评论

浅谈react路由传参的几种方式

第一种传参方式，动态路由传参
通过设置link的path属性，进行路由的传参，当点击link标签的时候，会在上方的url地址中显示传递的整个url<Link to='/home?name=dx'>首页</Link>...

2021-05-30

35浏览

0评论

React.Children的用法详解

React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.prop...

2021-05-30

48浏览

0评论

浅谈React Router关于history的那些事

如果你想理解React Router，那么应该先理解history。更确切地说，是history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页...

2021-05-30

58浏览

0评论

聊一聊我对 React Context 的理解以及应用

前言
Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议...

2021-05-30

39浏览

0评论

React+Ant Design开发环境搭建的实现步骤

基础知识1.使用脚手架创建项目并启动
1.1 安装脚手架：npm install -g create-react-app1.2 使用脚手架创建项目：create-react-app antd-start-demoantd-start-demo为项目名。1...

2021-05-30

48浏览

0评论

简单分析React中的EffectList

React中，会遍历EffectList来执行节点操作、生命周期方法、Effect方法，可以把EffectList比作圣诞树上挂的彩灯，而这颗圣诞树就是Fiber树。为什么会存在EffectList呢？打个比方来说...

2021-05-30

32浏览

0评论

编写简洁React组件的小技巧

本文源于翻译文章 Simple tips for writing clean React components, 原文作者 Iskander Samatov在这篇文章中，我们会回顾一些简单的技巧，它们将帮助我们编写更简洁的 React...

2021-05-30

54浏览

0评论

React中setState的使用与同步异步的使用

在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。
1、this.setState的两种定义方式定义初始状态state = {...

2021-05-30

60浏览

0评论

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

一、ReactJS简介　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这...

2021-05-30

48浏览

0评论

React+Koa实现文件上传的示例

背景
最近在写毕设的时候，涉及到了一些文件上传的功能，其中包括了普通文件上传，大文件上传，断点续传等等服务端依赖
koa(node.js框架) koa-router(Koa路由) koa-body(Koa bo...

2021-05-30

52浏览

0评论

React利用路由实现登录界面的跳转

上一篇在配置好了webpack和react的环境后，接下来开始写登录界面，以及接下来的跳转到主页的功能。
1、首先看一下总体的目录结构。因为很多时候在看别人写的例子的时候因为目录...

2021-05-30

35浏览

0评论

React中使用setInterval函数的实例

本文是基于Windows 10系统环境，学习和使用React：Windows 10一、setInterval函数(1) 定义setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()...

2021-05-30

44浏览

0评论

使用hooks写React组件需要注意的5个地方

Hook是React16.8开始新增的特性。虽然React官方文档已经作出了针对React hooks的相关概念的讲解，但是光看官方文档是很难将hooks使用好的，在编写hooks的过程中很容易跳进陷阱...

2021-05-30

21浏览

0评论

React服务端渲染原理解析与实践

关于服务端渲染也就是我们说的SSR大多数人都听过这个概念，很多同学或许在公司中已经做过服务端渲染的项目了，主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客...

2021-05-30

33浏览

0评论

React useEffect的理解与使用

React16.8新增的useEffec这个hook函数就是处理副作用的。所谓的“副作用”，举个通俗一点的例子，假如感冒了本来吃点药就没事了，但是吃了药发现身体过敏了，而这个“过敏”就是副...

2021-05-30

39浏览

0评论

采用React编写小程序的Remax框架的编译流程解析(推荐)

Remax是蚂蚁开源的一个用React来开发小程序的框架，采用运行时无语法限制的方案。整体研究下来主要分为三大部分：运行时原理、模板渲染原理、编译流程；看了下现有大部分文章主要...

2021-05-30

热门文章