使用webpack5从0到1搭建一个react项目的实现步骤
前言
在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据...
2021-05-30
React实现类似淘宝tab居中切换效果的示例代码
效果 DOM布局const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2,...
2021-05-30
React+EggJs实现断点续传的示例代码
技术栈
前端用了React，后端则是EggJs，都用了TypeScript编写。断点续传实现原理
断点续传就是在上传一个文件的时候可以暂停掉上传中的文件，然后恢复上传时不需要重新上传整个文...
2021-05-30
实例讲解React 组件
本章节我们将讨论如何使用组件使得我们的应用更容易来管理。接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：function HelloMessage(props) { return <h...
2021-05-30
React冒泡和阻止冒泡的应用详解
阻止事件冒泡分三种：1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();2: 合成事件间的冒泡，使用 e.stopPropagation()；3：阻止合成事件，往...
2021-05-30
在react项目中使用antd的form组件,动态设置input框的值
问题：创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了原因：点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使...
2021-05-30
React实现todolist功能
一、index.jsReactDOM.render( <React.StrictMode> <TodoList /> </React.StrictMode>, document.getElementById('root'));二、TodoList1、constructorconstructor(props)...
2021-05-30
React使用emotion写css代码
简介：
emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上...
2021-05-30
Vite搭建React项目的方法步骤
前言
日常放鸽，火钳刘明这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。创建一个 Vite 项目
yarn create @vitejs/app如上图，选择了 react-ts 预设模板，如果出现下图一...
2021-05-30
react项目从新建到部署的实现示例
开展新项目本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。项目选型
react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几...
2021-05-30
一百多行代码实现react拖拽hooks
前言
源码总共也就一百多行，看完这个大致可以理解一些成熟的react拖拽库的实现思路，比如react-dnd，然后你上手这些库的时候就非常快了。使用hooks实现的大致效果动图如下：我们的...
2021-05-30
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
React Hook的使用示例
这篇文章分享两个使用React Hook以及函数式组件开发的简单示例。一个简单的组件案例
Button组件应该算是最简单的常用基础组件了吧。我们开发组件的时候期望它的基础样式能...
2021-05-30
React实现登录表单的示例代码
作为一个Vue用户，是时候扩展一下React了，从引入antd、配置less、router，终于实现了一个简单的登录表单。代码如下：import React from 'react';import { Input, Button, message...
2021-05-30
react hooks入门详细教程
State Hooks案例：import { useState } from 'react';function Example() { const [count, setCount] = useState(0);//count:声明的变量；setCount：改变count值的函数；0：count的初...
2021-05-30
React+Antd 实现可增删改表格的示例
最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antdtable表格...
2021-05-30
详解react应用中的DOM DIFF算法
前言
对我们搞前端的来说，目前最流行的两大前端框架毫无疑问当属React和Vue，对于这两大框架，想必大家也是再熟悉不过了。然而，这两大框架无一例外的全部放弃使用传统的DOM技术，却...
2021-05-30
React State状态与生命周期的实现方法
一、实现组件的方法:组件名称首字母必须大写1.通过JS函数方式实现组件<div id="app"></div><script type="text/babel"> var ReactDiv = document.getElementById('app');...
2021-05-30
React antd tabs切换造成子组件重复刷新
描述：Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：<Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card...
2021-05-30
深入理解React Native核心原理(React Native的桥接（Bridge)
在这篇文章之前我们假设你已经了解了React Native的基础知识，我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。主线程在开始之前，我们需要知道在React Nati...
2021-05-30
React.cloneElement的使用详解
因为要接手维护一些项目，团队的技术栈最近从 vue 转向 react ，作为一个 react 新手，加上一向喜欢通过源码来学习新的东西，就选择了通过阅读 antd 这个大名鼎鼎的项目源码来学习...
2021-05-30
详解对于React结合Antd的Form组件实现登录功能
一、React 结合 Antd 实现登录功能
引入所需的 Antd 组件，代码如下所示：
import { Form, Icon, Input, Button, message } from 'antd'在 Login.jsx 中，创建一个 Login 组件。...
2021-05-30
使用 React 和 Threejs 创建一个VR全景项目的过程详解
最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目
实现的是加载一张 2:1 的720全景
分享一下我的创建过程一、搭建框架并安装需要的插件npx crea...
2021-05-30
如何使用Redux Toolkit简化Redux
了解Redux Toolkit，这是用于高效Redux开发的经过验证的工具集。在本文中，你将看到为什么Redux Toolkit值得React社区更多的关注。React和Redux被认为是大规模React应用中管理...
2021-05-30
react中常见hook的使用方式
1、什么是hook？
react hook是react 16.8推出的方法，能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。2、为什么要出现hook？
函数式组件是全局当中一个普通函数...
2021-05-30
React实现一个高度自适应的虚拟列表
近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。改造前：我们可以看...
2021-05-30
ReactRouter的实现方法
ReactRouter的实现ReactRouter是React的核心组件，主要是作为React的路由管理器，保持UI与URL同步，其拥有简单的API与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的...
2021-05-30
浅谈react路由传参的几种方式
第一种传参方式，动态路由传参
通过设置link的path属性，进行路由的传参，当点击link标签的时候，会在上方的url地址中显示传递的整个url<Link to='/home?name=dx'>首页</Link>...
2021-05-30
React.Children的用法详解
React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.prop...
2021-05-30
浅谈React Router关于history的那些事
如果你想理解React Router，那么应该先理解history。更确切地说，是history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页...
2021-05-30
聊一聊我对 React Context 的理解以及应用
前言
Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议...
2021-05-30
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
简单分析React中的EffectList
React中，会遍历EffectList来执行节点操作、生命周期方法、Effect方法，可以把EffectList比作圣诞树上挂的彩灯，而这颗圣诞树就是Fiber树。为什么会存在EffectList呢？打个比方来说...
2021-05-30
编写简洁React组件的小技巧
本文源于翻译文章 Simple tips for writing clean React components, 原文作者 Iskander Samatov在这篇文章中，我们会回顾一些简单的技巧，它们将帮助我们编写更简洁的 React...
2021-05-30
React中setState的使用与同步异步的使用
在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。
1、this.setState的两种定义方式定义初始状态state = {...
2021-05-30
一看就懂的ReactJs基础入门教程-精华版
一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这...
2021-05-30
React+Koa实现文件上传的示例
背景
最近在写毕设的时候，涉及到了一些文件上传的功能，其中包括了普通文件上传，大文件上传，断点续传等等服务端依赖
koa(node.js框架) koa-router(Koa路由) koa-body(Koa bo...
2021-05-30
React利用路由实现登录界面的跳转
上一篇在配置好了webpack和react的环境后，接下来开始写登录界面，以及接下来的跳转到主页的功能。
1、首先看一下总体的目录结构。因为很多时候在看别人写的例子的时候因为目录...
2021-05-30
React中使用setInterval函数的实例
本文是基于Windows 10系统环境，学习和使用React：Windows 10一、setInterval函数(1) 定义setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()...
2021-05-30
使用hooks写React组件需要注意的5个地方
Hook是React16.8开始新增的特性。虽然React官方文档已经作出了针对React hooks的相关概念的讲解，但是光看官方文档是很难将hooks使用好的，在编写hooks的过程中很容易跳进陷阱...
2021-05-30
React服务端渲染原理解析与实践
关于服务端渲染也就是我们说的SSR大多数人都听过这个概念，很多同学或许在公司中已经做过服务端渲染的项目了，主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客...
2021-05-30
React useEffect的理解与使用
React16.8新增的useEffec这个hook函数就是处理副作用的。所谓的“副作用”，举个通俗一点的例子，假如感冒了本来吃点药就没事了，但是吃了药发现身体过敏了，而这个“过敏”就是副...
2021-05-30
采用React编写小程序的Remax框架的编译流程解析(推荐)
Remax是蚂蚁开源的一个用React来开发小程序的框架，采用运行时无语法限制的方案。整体研究下来主要分为三大部分：运行时原理、模板渲染原理、编译流程；看了下现有大部分文章主要...
2021-05-30
React 非父子组件传参的实例代码
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，...
2021-05-30
详解React中的不可变值
什么是不可变值
函数式编程是指程序里面的函数和表达式都能像数学中的函数一样，给定了输入值，输出是确定的。比如let a = 1;let b = a + 1;=> a = 1 b = 2;变量b出现，虽然使用...
2021-05-30
React Hooks常用场景的使用(小结)
前言
React 在 v16.8 的版本中推出了 React Hooks 新特性。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分...
2021-05-30
React Fiber结构的创建步骤
React Fiber的创建
当前React版本基于V17.0.2版本，本篇主要介绍fiber结构的创建。一、开始之前
个人理解，如有不对，请指出。首先需要配置好React的debugger开发环境，入口在这里：g...
2021-05-30
详解antd+react项目迁移vite的解决方案
antd+react+webpack往往是以react技术栈为主的前端项目的标准组合，三者都有成熟的生态和稳定的表现，但随着前端圈的技术不断革新，号称下一代构建平台vite2的发布，webpack似乎不...
2021-05-30
详解React Fiber的工作原理
啥是React Fiber？
React Fiber，简单来说就是一个从React v16开始引入的新协调引擎，用来实现Virtual DOM的增量渲染。说人话：就是一种能让React视图更新过程变得更加流畅顺滑的处...
2021-05-30
