45浏览

0评论

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

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

• 2021-05-30

38浏览

0评论

详解React中的不可变值

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

• 2021-05-30

48浏览

0评论

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

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

• 2021-05-30

49浏览

0评论

React Fiber结构的创建步骤

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

• 2021-05-30

82浏览

0评论

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

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

• 2021-05-30

52浏览

0评论

详解React Fiber的工作原理

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

• 2021-05-30

44浏览

0评论

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

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

• 2021-05-30

38浏览

0评论

React事件机制源码解析

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

• 2021-05-30

43浏览

0评论

react diff算法源码解析

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

• 2021-05-30

30浏览

0评论

详解react setState

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

• 2021-05-30

69浏览

0评论

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

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

• 2021-05-30

49浏览

0评论

React中useRef的具体使用

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

• 2021-05-30

40浏览

0评论

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

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

• 2021-05-30

60浏览

0评论

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

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

• 2021-05-30

51浏览

0评论

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

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

• 2021-05-30

35浏览

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

35浏览

0评论

React useMemo和useCallback的使用场景

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

• 2021-05-30

48浏览

0评论

详解React中key的作用

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

• 2021-05-30

61浏览

0评论

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

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

• 2021-05-30

35浏览

0评论

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

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

• 2021-05-30

56浏览

0评论

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

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

• 2021-05-30

55浏览

0评论

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

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

• 2021-05-30

44浏览

0评论

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

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

• 2021-05-30

56浏览

0评论

React ref的使用示例

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

• 2021-05-30

51浏览

0评论

React嵌套组件的构建顺序

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

• 2021-05-30

41浏览

0评论

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

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

• 2021-05-30

49浏览

0评论

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

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

• 2021-05-30

41浏览

0评论

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

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

• 2021-05-30

39浏览

0评论

浅谈React 的引入

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

• 2021-05-30

66浏览

0评论

30分钟带你全面了解React Hooks

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

• 2021-05-30

55浏览

0评论

React虚拟列表的实现

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

• 2021-05-30

85浏览

0评论

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

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

• 2021-05-30

187浏览

0评论

react实现浏览器自动刷新的示例代码

在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但...

• 2021-05-30

45浏览

0评论

React hooks的优缺点详解

前言
Hook 是 React 16.8 的新增特性。它是完全可选的，并且100%向后兼容。它可以让你使用函数组件的方式，运用类组件以及 react 其他的一些特性，比如管理状态、生命周期钩子等...

• 2021-05-30

50浏览

0评论

react合成事件与原生事件的相关理解

1. 原生事件
原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需...

• 2021-05-30

40浏览

0评论

提高React界面性能的十个技巧

总的说来，React是通过维护视图中的内存(in-memory)模型来运作的。这通常被称为虚拟DOM，它可以被用来确定实际DOM何时需要被更新。不过，由于操控实际DOM的成本较高，因此我们需要...

• 2021-05-30

46浏览

0评论

详解React Hooks是如何工作的

1. React Hooks VS 纯函数React Hook 说白了就是 React V18.6 新增的一些 API，API的本质就是提供某种功能的函数接口。因此，React Hooks 就是一些函数，但是 React Hooks 不是纯...

• 2021-05-30

52浏览

0评论

无废话快速上手React路由开发

安装输入以下命令进行安装：// npmnpm install react-router-dom// yarnyarn add react-router-domreact-router相关标签react-router常用的组件有以下八个：import { Browser...

• 2021-05-30

44浏览

0评论

在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

前言：本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤，服务端方法请参考《基于OAuth2.0授权系统的验证码功能》正文：在Ant Design Pro模板中，使用账号密...

• 2021-05-30

49浏览

0评论

详解React setState数据更新机制

为什么使用setState
在React 的开发过程中，难免会与组件的state打交道。使用过React 的都知道，想要修改state中的值，必须使用内部提供的setState 方法。为什么不能直接使用赋值...

• 2021-05-30

50浏览

0评论

react自动化构建路由的实现

序
在使用react-router-dom在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中. 所以我们就会想到,使用re...

• 2021-05-30

57浏览

0评论

React函数式组件的性能优化思路详解

优化思路主要优化的方向有2个： 减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction...

• 2021-05-30

42浏览

0评论

react如何快速设置文件路径别名

React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来...

• 2021-05-30

60浏览

0评论

react中props 的使用及进行限制的方法

组件的props（ props是一个对象 ）作用：接收传递给组件的数据
特点： 可以给组件传递任意类型的数据 props是只读的对象，只能读取属性的值，无法修改对象 注意：使用类组件时，如...

• 2021-05-30

30浏览

0评论

react国际化react-intl的使用

react怎么实现国际化？react-intl插件提供了一套实现react国际化的方法，具体实现如下~~一 搭建react环境和下载相应插件默认你已经安装了nodejs 如果没有装的百度装下 这里不再...

• 2021-05-30

43浏览

0评论

React中事件绑定this指向三种方法的实现

1.箭头函数
1.利用箭头函数自身不绑定this的特点;2.render()方法中的this为组件实例,可以获取到setState();class App extends React.Component{ state ={ count:...

• 2021-05-30

43浏览

0评论

详解如何构建自己的react hooks

1. 常用的一个 hooks官方中提供了几个内置的钩子，我们简单了解下他们的用法。1.1 useState: 状态钩子需要更新页面状态的数据，我们可以把他放到 useState 的钩子里。例如点击...

• 2021-05-30

47浏览

0评论

使用react的7个避坑案例小结

React是个很受欢迎的前端框架。今天我们探索下React开发者应该注意的七个点。
1. 组件臃肿
React开发者没有创建必要的足够多的组件化，其实这个问题不局限于React开发者，很多V...

• 2021-05-30

47浏览

0评论

react native环境安装流程

react-native安装流程1.npx react-native init AwesomeProject报错
运行 cd ./demo/ios && pod install 即可解决2.安装JDK
（1）brew install adoptopenjdk/openjdk/adoptopenj...

• 2021-05-30

49浏览

0评论

react-diagram 序列化Json解读案例分析

本文目标 本文档的目标在于解释react-diagram框架模型序列化的Json，由于缺乏文档，我这边只能通过不断尝试和调试来进行测试。序列化案例1：空画布{ "id": "27", "offsetX": 0,...

• 2021-05-30