React Native 脚手架的基本使用详解
构建项目在相应的路径下执行命令行：react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)react-native --v //查看版本react-na...
2021-05-30
React事件机制源码解析
React v17里事件机制有了比较大的改动，想来和v16差别还是比较大的。本文浅析的React版本为17.0.1，使用ReactDOM.render创建应用，不含优先级相关。原理简述
React中事件分为委托...
2021-05-30
react diff算法源码解析
React中Diff算法又称为调和算法，对应函数名为reconcileChildren，它的主要作用是标记更新过程中那些元素发生了变化，这些变化包括新增、移动、删除。过程发生在beginWork阶段，只...
2021-05-30
详解react setState
setState是同步还是异步
自定义合成事件和react钩子函数中异步更新state
以在自定义click事件中的setState为例import React, { Component } from 'react';class Test exten...
2021-05-30
详解React 父组件和子组件的数据传输
在学习 React 框架组件间数据传输知识点前，我们需要先明确几点使用原则。 React的组件间通讯是单向的。数据必须是由父级传到子级或者子级传递给父级层层传递。 如果要...
2021-05-30
React中useRef的具体使用
相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。首先来看一...
2021-05-30
React获取input值并提交的2种方法实例
方法一 利用DOM提供的Event对象的target事件属性取值并提交import React from 'react'; class InputDemo extends React.Component{ state = { InputValue : "",//输入...
2021-05-30
react如何用懒加载减少首屏加载时间
最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目。其中遇到很多问题，最重要的应该是访问速度了。我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲...
2021-05-30
React事件节流效果失效的原因及解决
今天做react项目中，给一个 input onKeyDown 事件做节流，出现了节流效果失效。问题代码：render() { return ( <div className="search-bar"> <input className="...
2021-05-30
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
React useMemo和useCallback的使用场景
useMemo我们知道当父组件发生重新渲染时，其所有（状态、局部变量等）都是新的。一旦子组件依赖于父组件的某一个对象变量，那么无论对象是否发生变化，子组件拿到的都是新的对象，从而...
2021-05-30
详解React中key的作用
要了解React中key的作用，可以从key的取值入手，key的取值可以分为三种，不定值、索引值、确定且唯一值在下面的代码中，key的取值是不定值（Math.random()）问题： 点击按钮的时候，span的...
2021-05-30
React如何利用Antd的Form组件实现表单功能详解
一、构造组件1、表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。这里先引用了封装的表单域 <Form.Item />2、使用Form.create处理后的表单具有...
2021-05-30
封装一个最简单ErrorBoundary组件处理react异常
前言从 React 16 开始，引入了 Error Boundaries 概念，它可以捕获它的子组件中产生的错误，记录错误日志，并展示降级内容，具体 官网地址错误边界避免一个组件错误导致整个页面白屏...
2021-05-30
react显示文件上传进度的示例
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress.react上传文件...
2021-05-30
TypeScript在React项目中的使用实践总结
序言本文会侧重于TypeScript（以下简称TS）在项目中与React的结合使用情况，而非TS的基本概念。关于TS的类型查看可以使用在线TS工具👉TypeScript游乐场React元素相关React...
2021-05-30
React-Native 环境搭建和基本介绍
环境搭建准备1.环境搭建
React Native中文网2.开发工具
前端开发软件：Visual Studio Code移动端开发软件：Xcode、Android Studio3.知识储备NodeJS React Es6,Es7React Native...
2021-05-30
React ref的使用示例
写了一段时间的 react，99%都在写 state、prop、useState、useEffect，对 ref 特别不熟悉，前几天做一个需求，想用 ref 实现父组件捞子组件的某个状态值，结果失败了，特此整理一下 ref...
2021-05-30
React嵌套组件的构建顺序
在React官网中，可以看到对生命周期的描述这里有一个疑问是，在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新解决这个问题，可以从嵌套单个元素入手...
2021-05-30
如何不使用eject修改create-react-app的配置
一、为啥不建议执行eject1.执行eject产生了什么变化？create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中，执行yarneject后，会将webpack、babel等配置...
2021-05-30
React三大属性之Refs的使用详解
refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候，用来获取节点的方法。在React官方的解释中，它的适用范围如下： 管理焦点，文本选择或媒体播放。 触发强...
2021-05-30
浅析React中的受控组件和非受控组件
非受控组件
表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）1.非受控组件<!DOCTYPE html><html l...
2021-05-30
浅谈React 的引入
1. CDN 引入和普通的 JS 库或框架一样，React 也可以从 CDN 引入。在使用 CDN 引入之前需要了解两种类型的 JS 文件，一个是 cjs ，一个是 umd。cjs：全称为 CommonJS，是 Node.js 支...
2021-05-30
30分钟带你全面了解React Hooks
概述1. Hooks 只能在函数组件内使用；2. Hooks 用于扩充函数组件的功能，使函数组件可以完全代替类组件React Hooks 都挂在 React 对象上，因此使用时为 React.useState() 的形式，...
2021-05-30
React虚拟列表的实现
1.背景
在开发过程中，总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器，终会导致浏览器的性能下降。如果数据量过大，首先渲染极慢，其次页面直接卡死。当然，你可以选择其...
2021-05-30
react native实现监控手势上下拉动效果
react native实现监控手势进行上下拉动效果,详细核心代码如下:代码：import {PanResponder} from 'react-native';var Dimensions = require('Dimensions');const deviceHeigh...
2021-05-30
react实现浏览器自动刷新的示例代码
在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但...
2021-05-30
React hooks的优缺点详解
前言
Hook 是 React 16.8 的新增特性。它是完全可选的，并且100%向后兼容。它可以让你使用函数组件的方式，运用类组件以及 react 其他的一些特性，比如管理状态、生命周期钩子等...
2021-05-30
react合成事件与原生事件的相关理解
1. 原生事件
原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需...
2021-05-30
提高React界面性能的十个技巧
总的说来，React是通过维护视图中的内存(in-memory)模型来运作的。这通常被称为虚拟DOM，它可以被用来确定实际DOM何时需要被更新。不过，由于操控实际DOM的成本较高，因此我们需要...
2021-05-30
详解React Hooks是如何工作的
1. React Hooks VS 纯函数React Hook 说白了就是 React V18.6 新增的一些 API，API的本质就是提供某种功能的函数接口。因此，React Hooks 就是一些函数，但是 React Hooks 不是纯...
2021-05-30
无废话快速上手React路由开发
安装输入以下命令进行安装：// npmnpm install react-router-dom// yarnyarn add react-router-domreact-router相关标签react-router常用的组件有以下八个：import { Browser...
2021-05-30
在Ant Design Pro登录功能中集成图形验证码组件的方法步骤
前言：本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤，服务端方法请参考《基于OAuth2.0授权系统的验证码功能》正文：在Ant Design Pro模板中，使用账号密...
2021-05-30
详解React setState数据更新机制
为什么使用setState
在React 的开发过程中，难免会与组件的state打交道。使用过React 的都知道，想要修改state中的值，必须使用内部提供的setState 方法。为什么不能直接使用赋值...
2021-05-30
react自动化构建路由的实现
序
在使用react-router-dom在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中. 所以我们就会想到,使用re...
2021-05-30
React函数式组件的性能优化思路详解
优化思路主要优化的方向有2个： 减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction...
2021-05-30
react如何快速设置文件路径别名
React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来...
2021-05-30
react中props 的使用及进行限制的方法
组件的props（ props是一个对象 ）作用：接收传递给组件的数据
特点： 可以给组件传递任意类型的数据 props是只读的对象，只能读取属性的值，无法修改对象 注意：使用类组件时，如...
2021-05-30
react国际化react-intl的使用
react怎么实现国际化？react-intl插件提供了一套实现react国际化的方法，具体实现如下~~一 搭建react环境和下载相应插件默认你已经安装了nodejs 如果没有装的百度装下 这里不再...
2021-05-30
React中事件绑定this指向三种方法的实现
1.箭头函数
1.利用箭头函数自身不绑定this的特点;2.render()方法中的this为组件实例,可以获取到setState();class App extends React.Component{ state ={ count:...
2021-05-30
详解如何构建自己的react hooks
1. 常用的一个 hooks官方中提供了几个内置的钩子，我们简单了解下他们的用法。1.1 useState: 状态钩子需要更新页面状态的数据，我们可以把他放到 useState 的钩子里。例如点击...
2021-05-30
使用react的7个避坑案例小结
React是个很受欢迎的前端框架。今天我们探索下React开发者应该注意的七个点。
1. 组件臃肿
React开发者没有创建必要的足够多的组件化，其实这个问题不局限于React开发者，很多V...
2021-05-30
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
react-diagram 序列化Json解读案例分析
本文目标 本文档的目标在于解释react-diagram框架模型序列化的Json，由于缺乏文档，我这边只能通过不断尝试和调试来进行测试。序列化案例1：空画布{ "id": "27", "offsetX": 0,...
2021-05-30
React鼠标多选功能的配置方法
一般列表都有选择功能，单选复选多选都很常见。在自定义循环的列表，图像中，实现鼠标单选，多选，反选功能。# React mousemultiples
# React 鼠标多选组件React 鼠标多选组件 局限性...
2021-05-30
react基础知识总结
前言
最近在准备面试。复习了一些react的知识点，特此总结。开始
React 生命周期
react 16以前的生命周期是这样的组件在首次渲染时会被实例化，然后调用实例上面的componentWil...
2021-05-30
React tsx生成随机验证码
React tsx 生成随机验证码，供大家参考，具体内容如下最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。tsx文件如下：Reac...
2021-05-30
详解React中的this指向
打算记流水账一般细数一下 React 中的 this 指向问题，具体流程按事件三要素：起因，经过，结果。哈哈哈哈哈！起因：
众所周知，React 的设计是响应式的，使用者无需操纵 DOM,操纵数据，页面...
2021-05-30
React Hook用法示例详解（6个常见hook）
1、useState：让函数式组件拥有状态用法示例：// 计数器import { useState } from 'react'const Test = () => { const [count, setCount] = useState(0); return (...
2021-05-30
详解React 代码共享最佳实践方式
任何一个项目发展到一定复杂性的时候，必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式：Mixin、高阶组件(HOC)、修饰器(decorator)、Render Props、Hook。...
2021-05-30
