编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Rust Android Go语言鸿蒙OS C类语言综合编程正则表达式

58浏览

0评论

react diff算法源码解析

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

2021-05-30 22:18:39

40浏览

0评论

详解react setState

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

2021-05-30 22:18:38

85浏览

0评论

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

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

2021-05-30 22:18:36

59浏览

0评论

React中useRef的具体使用

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

2021-05-30 22:18:35

50浏览

0评论

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

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

2021-05-30 22:18:34

78浏览

0评论

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

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

2021-05-30 22:18:30

62浏览

0评论

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

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

2021-05-30 22:18:29

48浏览

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 22:18:27

45浏览

0评论

React useMemo和useCallback的使用场景

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

2021-05-30 22:18:25

66浏览

0评论

详解React中key的作用

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

2021-05-30 22:18:19

81浏览

0评论

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

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

2021-05-30 22:18:12

54浏览

0评论

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

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

2021-05-30 22:18:11

66浏览

0评论

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

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

2021-05-30 22:18:09

65浏览

0评论

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

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

2021-05-30 22:18:07

59浏览

0评论

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

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

2021-05-30 22:18:05

66浏览

0评论

React ref的使用示例

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

2021-05-30 22:18:03

61浏览

0评论

React嵌套组件的构建顺序

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

2021-05-30 22:18:01

51浏览

0评论

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

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

2021-05-30 22:18:00

63浏览

0评论

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

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

2021-05-30 22:17:59

51浏览

0评论

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

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

2021-05-30 22:17:56

53浏览

0评论

浅谈React 的引入

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

2021-05-30 22:17:54

80浏览

0评论

30分钟带你全面了解React Hooks

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

2021-05-30 22:17:53

77浏览

0评论

React虚拟列表的实现

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

2021-05-30 22:17:51

111浏览

0评论

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

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

2021-05-30 22:17:49

199浏览

0评论

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

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

2021-05-30 22:17:41

61浏览

0评论

React hooks的优缺点详解

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

2021-05-30 22:17:39

62浏览

0评论

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

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

2021-05-30 22:17:35

50浏览

0评论

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

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

2021-05-30 22:17:34

56浏览

0评论

详解React Hooks是如何工作的

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

2021-05-30 22:17:33

63浏览

0评论

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

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

2021-05-30 22:17:29

55浏览

0评论

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

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

2021-05-30 22:17:27

59浏览

0评论

详解React setState数据更新机制

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

2021-05-30 22:17:25

60浏览

0评论

react自动化构建路由的实现

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

2021-05-30 22:17:23

69浏览

0评论

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

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

2021-05-30 22:17:22

52浏览

0评论

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

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

2021-05-30 22:17:21

72浏览

0评论

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

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

2021-05-30 22:17:19

40浏览

0评论

react国际化react-intl的使用

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

2021-05-30 22:17:18

53浏览

0评论

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

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

2021-05-30 22:17:17

57浏览

0评论

详解如何构建自己的react hooks

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

2021-05-30 22:17:15

60浏览

0评论

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

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

2021-05-30 22:17:14

62浏览

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 22:17:13

61浏览

0评论

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

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

2021-05-30 22:17:11

61浏览

0评论

React鼠标多选功能的配置方法

一般列表都有选择功能，单选复选多选都很常见。在自定义循环的列表，图像中，实现鼠标单选，多选，反选功能。# React mousemultiples
# React 鼠标多选组件React 鼠标多选组件局限性...

2021-05-30 22:17:09

68浏览

0评论

react基础知识总结

前言
最近在准备面试。复习了一些react的知识点，特此总结。开始
React 生命周期
react 16以前的生命周期是这样的组件在首次渲染时会被实例化，然后调用实例上面的componentWil...

2021-05-30 22:17:08

64浏览

0评论

React tsx生成随机验证码

React tsx 生成随机验证码，供大家参考，具体内容如下最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。tsx文件如下：Reac...

2021-05-30 22:17:07

78浏览

0评论

详解React中的this指向

打算记流水账一般细数一下 React 中的 this 指向问题，具体流程按事件三要素：起因，经过，结果。哈哈哈哈哈！起因：
众所周知，React 的设计是响应式的，使用者无需操纵 DOM,操纵数据，页面...

2021-05-30 22:17:06

63浏览

0评论

React Hook用法示例详解（6个常见hook）

1、useState：让函数式组件拥有状态用法示例：// 计数器import { useState } from 'react'const Test = () => { const [count, setCount] = useState(0); return (...

2021-05-30 22:17:04

173浏览

0评论

详解React 代码共享最佳实践方式

任何一个项目发展到一定复杂性的时候，必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式：Mixin、高阶组件(HOC)、修饰器(decorator)、Render Props、Hook。...

2021-05-30 22:17:02

47浏览

0评论

React编程中需要注意的两个错误

前言在React编程中，我们习惯用useEffect、useState等Hook去进行开发，但是在开发过程中难免会遇到许多问题，前阵子，我在写代码的时候，踩过不少坑，这里先列举两个较为常见的，也希望...

2021-05-30 22:17:00

55浏览

0评论

如何深入理解React的ref 属性

概述首先，Refs 和 ref 是两个概念，Refs 是 React 提供的可用特定 API 创建的一个对象。该对象的结构如下：这个对象只有一个属性就是 current ，那么这个对象是用来干嘛的呢？Refs...

2021-05-30 22:16:57

首页 «810 811812813 814 »尾页

热门文章