101浏览

0评论

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

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

• 2021-05-30

65浏览

0评论

ReactRouter的实现方法

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

• 2021-05-30

55浏览

0评论

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

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

• 2021-05-30

50浏览

0评论

React.Children的用法详解

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

• 2021-05-30

69浏览

0评论

浅谈React Router关于history的那些事

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

• 2021-05-30

88浏览

0评论

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

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

• 2021-05-30

60浏览

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

68浏览

0评论

简单分析React中的EffectList

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

• 2021-05-30

49浏览

0评论

编写简洁React组件的小技巧

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

• 2021-05-30

76浏览

0评论

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

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

• 2021-05-30

85浏览

0评论

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

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

• 2021-05-30

70浏览

0评论

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

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

• 2021-05-30

76浏览

0评论

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

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

• 2021-05-30

54浏览

0评论

React中使用setInterval函数的实例

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

• 2021-05-30

59浏览

0评论

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

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

• 2021-05-30

41浏览

0评论

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

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

• 2021-05-30

54浏览

0评论

React useEffect的理解与使用

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

• 2021-05-30

59浏览

0评论

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

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

• 2021-05-30

60浏览

0评论

React 非父子组件传参的实例代码

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，...

• 2021-05-30

54浏览

0评论

详解React中的不可变值

什么是不可变值
函数式编程是指程序里面的函数和表达式都能像数学中的函数一样，给定了输入值，输出是确定的。比如let a = 1;let b = a + 1;=> a = 1 b = 2;变量b出现，虽然使用...

• 2021-05-30

67浏览

0评论

React Hooks常用场景的使用(小结)

前言
React 在 v16.8 的版本中推出了 React Hooks 新特性。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分...

• 2021-05-30

85浏览

0评论

React Fiber结构的创建步骤

React Fiber的创建
当前React版本基于V17.0.2版本，本篇主要介绍fiber结构的创建。一、开始之前
个人理解，如有不对，请指出。首先需要配置好React的debugger开发环境，入口在这里：g...

• 2021-05-30

102浏览

0评论

详解antd+react项目迁移vite的解决方案

antd+react+webpack往往是以react技术栈为主的前端项目的标准组合，三者都有成熟的生态和稳定的表现，但随着前端圈的技术不断革新，号称下一代构建平台vite2的发布，webpack似乎不...

• 2021-05-30

68浏览

0评论

详解React Fiber的工作原理

啥是React Fiber？
React Fiber，简单来说就是一个从React v16开始引入的新协调引擎，用来实现Virtual DOM的增量渲染。说人话：就是一种能让React视图更新过程变得更加流畅顺滑的处...

• 2021-05-30

60浏览

0评论

React Native 脚手架的基本使用详解

构建项目在相应的路径下执行命令行：react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)react-native --v //查看版本react-na...

• 2021-05-30

52浏览

0评论

React事件机制源码解析

React v17里事件机制有了比较大的改动，想来和v16差别还是比较大的。本文浅析的React版本为17.0.1，使用ReactDOM.render创建应用，不含优先级相关。原理简述
React中事件分为委托...

• 2021-05-30

63浏览

0评论

react diff算法源码解析

React中Diff算法又称为调和算法，对应函数名为reconcileChildren，它的主要作用是标记更新过程中那些元素发生了变化，这些变化包括新增、移动、删除。过程发生在beginWork阶段，只...

• 2021-05-30

44浏览

0评论

详解react setState

setState是同步还是异步
自定义合成事件和react钩子函数中异步更新state
以在自定义click事件中的setState为例import React, { Component } from 'react';class Test exten...

• 2021-05-30

92浏览

0评论

详解React 父组件和子组件的数据传输

在学习 React 框架组件间数据传输知识点前，我们需要先明确几点使用原则。 React的组件间通讯是单向的。数据必须是由父级传到子级或者子级传递给父级层层传递。 如果要...

• 2021-05-30

65浏览

0评论

React中useRef的具体使用

相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。首先来看一...

• 2021-05-30

54浏览

0评论

React获取input值并提交的2种方法实例

方法一 利用DOM提供的Event对象的target事件属性取值并提交import React from 'react'; class InputDemo extends React.Component{ state = { InputValue : "",//输入...

• 2021-05-30

86浏览

0评论

react如何用懒加载减少首屏加载时间

最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目。其中遇到很多问题，最重要的应该是访问速度了。我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲...

• 2021-05-30

66浏览

0评论

React事件节流效果失效的原因及解决

今天做react项目中，给一个 input onKeyDown 事件做节流，出现了节流效果失效。问题代码：render() { return ( <div className="search-bar"> <input className="...

• 2021-05-30

53浏览

0评论

React Diff原理深入分析

在了解Diff前，先看下React的虚拟DOM的结构这是html结构<div id="father"> <p class="child">I am child p</p> <div class="child">I am child div</div></div>这是React渲...

• 2021-05-30

48浏览

0评论

React useMemo和useCallback的使用场景

useMemo我们知道当父组件发生重新渲染时，其所有（状态、局部变量等）都是新的。一旦子组件依赖于父组件的某一个对象变量，那么无论对象是否发生变化，子组件拿到的都是新的对象，从而...

• 2021-05-30

69浏览

0评论

详解React中key的作用

要了解React中key的作用，可以从key的取值入手，key的取值可以分为三种，不定值、索引值、确定且唯一值在下面的代码中，key的取值是不定值（Math.random()）问题： 点击按钮的时候，span的...

• 2021-05-30

86浏览

0评论

React如何利用Antd的Form组件实现表单功能详解

一、构造组件1、表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。这里先引用了封装的表单域 <Form.Item />2、使用Form.create处理后的表单具有...

• 2021-05-30

60浏览

0评论

封装一个最简单ErrorBoundary组件处理react异常

前言从 React 16 开始，引入了 Error Boundaries 概念，它可以捕获它的子组件中产生的错误，记录错误日志，并展示降级内容，具体 官网地址错误边界避免一个组件错误导致整个页面白屏...

• 2021-05-30

70浏览

0评论

react显示文件上传进度的示例

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress.react上传文件...

• 2021-05-30

69浏览

0评论

TypeScript在React项目中的使用实践总结

序言本文会侧重于TypeScript（以下简称TS）在项目中与React的结合使用情况，而非TS的基本概念。关于TS的类型查看可以使用在线TS工具&#128073;TypeScript游乐场React元素相关React...

• 2021-05-30

61浏览

0评论

React-Native 环境搭建和基本介绍

环境搭建准备1.环境搭建
React Native中文网2.开发工具
前端开发软件：Visual Studio Code移动端开发软件：Xcode、Android Studio3.知识储备NodeJS React Es6,Es7React Native...

• 2021-05-30

68浏览

0评论

React ref的使用示例

写了一段时间的 react，99%都在写 state、prop、useState、useEffect，对 ref 特别不熟悉，前几天做一个需求，想用 ref 实现父组件捞子组件的某个状态值，结果失败了，特此整理一下 ref...

• 2021-05-30

65浏览

0评论

React嵌套组件的构建顺序

在React官网中，可以看到对生命周期的描述这里有一个疑问是，在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新解决这个问题，可以从嵌套单个元素入手...

• 2021-05-30

55浏览

0评论

如何不使用eject修改create-react-app的配置

一、为啥不建议执行eject1.执行eject产生了什么变化？create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中，执行yarneject后，会将webpack、babel等配置...

• 2021-05-30

66浏览

0评论

React三大属性之Refs的使用详解

refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候，用来获取节点的方法。在React官方的解释中，它的适用范围如下： 管理焦点，文本选择或媒体播放。 触发强...

• 2021-05-30

63浏览

0评论

浅析React中的受控组件和非受控组件

非受控组件
表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）1.非受控组件<!DOCTYPE html><html l...

• 2021-05-30

55浏览

0评论

浅谈React 的引入

1. CDN 引入和普通的 JS 库或框架一样，React 也可以从 CDN 引入。在使用 CDN 引入之前需要了解两种类型的 JS 文件，一个是 cjs ，一个是 umd。cjs：全称为 CommonJS，是 Node.js 支...

• 2021-05-30

88浏览

0评论

30分钟带你全面了解React Hooks

概述1. Hooks 只能在函数组件内使用；2. Hooks 用于扩充函数组件的功能，使函数组件可以完全代替类组件React Hooks 都挂在 React 对象上，因此使用时为 React.useState() 的形式，...

• 2021-05-30

87浏览

0评论

React虚拟列表的实现

1.背景
在开发过程中，总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器，终会导致浏览器的性能下降。如果数据量过大，首先渲染极慢，其次页面直接卡死。当然，你可以选择其...

• 2021-05-30

118浏览

0评论

react native实现监控手势上下拉动效果

react native实现监控手势进行上下拉动效果,详细核心代码如下:代码：import {PanResponder} from 'react-native';var Dimensions = require('Dimensions');const deviceHeigh...

• 2021-05-30