目录react的watch监视属性-useEffectuseEffect使用指南最基本的使用响应更新如何处理Loading和Error处理表单自定义hooks使用useReducer整合逻辑取消数据请求react的watch监...

React 18 最新的特性
批处理文件
在同一个 函数中, 调用多次 useState 也只是会更新一次function App() { const [count, setCount] = useState(0); const [flag, setFlag...

目录效果实现card-slider.tsxcard-item.tsxApp.tsx效果实现通过zIndex控制层级，opacity控制透明度，transform 控制卡片缩放程度，marginLeft控制位置，剩下的就是计算的事了card-s...

目录引言redux中的Middleware记录日志手动记录redux-sagaGenerator函数实际使用场景引言上一节我们学习了redux在实际项目的应用细节，这一节我们来学习redux中一个很重要的概...

目录Mobx介绍1.什么是Mobx2.Mobx有什么优势3.社区评价浏览器支持基础使用1. 初始化mobx2. React使用storeMobx - computedMobx - 模块化实现步骤代码实现Mobx - 总结Mobx介...

目录项目场景：1、创建父组件2、创建子组件问题描述原因分析：解决方案：项目场景：使用过vue的朋友都知道，vue父组件更改props的值，子组件是会刷新的，而react就未必。
先看以下例子：1、...

目录配置与初始化实践react+tsx中使用better-scroll首先，你要知道为什么可以滚动，原理很简单，父容器的高度比子元素的小即可。在这之前，我们先来看一下浏览器的滚动原理： 浏览器...

目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例：计数器背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而r...

前言：页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。先来看柱状图 + 文字这一部分。宽度定为 width: 55, height 高度使用百分比进行动态变化。整个部分使用 fl...

目录useEffect执行两次问题父组件里面 子组件里面react使用useEffect及踩坑useEffect 介绍重要理解useEffect常见跳坑useEffect执行两次问题在useEffect第二个参数变化的时...

目录braft-editor的基本使用项目需求使用braft-editor踩坑记,引用 braft-utils有错误遇到的问题解决方式braft-editor的基本使用项目需求实现照片上传，富文本为空时的提示，官...

目录摘要1.异步的setState2.多个setState方法3.手动实现mySetState摘要这一篇文章，主要是简单的实现一下this.setState方法，为了实现该方法，就要知道this.setState方法具有什么...

目录前言自定义 Hooks 简单实现在组件中使用自定义 Hooks提前阻止 dispatch 触发优化后再测试结论题外前言在快乐使用 React Hooks 开发自定义 Hooks 过程中，使用了 useEffec...

目录引言包装 Context.Provider 作为父组件使用 Context Hook 来实现子组件使用 React 顶层 API 动态设置样式复用 Context，实现其它子组件抽取共同状态逻辑自由组合父组件与...

目录一、是什么二、如何实现CSSTransitionSwitchTransitionTransitionGroup一、是什么在日常开发中，页面切换时的转场动画是比较基础的一个场景当一个组件在显示与消失过程中...

目录背景设计理念抽象代码结构声明与定义用法高级用法拆分/合并actionAPIuseSetStategetActionpolymerActionusePolymerActionStatemergePolymerAction背景随着React Hooks...

目录useEffect的第二个参数useEffect规则第二个参数的规则不同值的参数示例useEffect使用技巧useEffect的第二个参数useEffect规则在每次render之后执行接收第二个参数来控...

目录1.前言2.useImperativeHandle初探3.获取元素的几种方式3.1 useRef：获取组件内部元素3.2 forwardRef：父组件获取子组件内部的一个元素3.3 useImperativeHandle：父组件可以获...

目录react生命周期常用的生命周期不常用的生命周完整的生命周期图react生命周期函数组件无生命周期，生命周期只有类组件才拥有生命周期函数指在某一时刻组件会自动调用并执行...

目录react 代码块输出,代码高亮显示,带行号,能复制以modal组件为例infoModal.less样式react 代码块插件代码块插件react 代码块输出,代码高亮显示,带行号,能复制以modal组件...

目录React解析excel文件React上传excel预览React解析excel文件首先安装安装xlsx插件yarn add xlsx使用xlsx解析    /**     * 上传文件并解析成json     */    co...

目录react父子组件的执行顺序1.class组件 2.函数组件 hooks无依赖的情况react父子组件的执行顺序react版本：17.x，在此版本中完全可以用Hooks去进行开发了，开始先讲class组件，只...

目录正文状态 => 视图事件 => 状态改变 => 视图正文React推荐one-way单向数据流，注意只是推荐，并不强制，常见有以下两种情况:状态 => 视图事件 => 状态改变 => 视图状态 => 视...

目录引言主要设计来源display 布局display 布局动态位置使用绝对定位styleJS引言之前的文章，咱们介绍过横向和竖向，具体的内容，请看React + CSS 绘制横向柱状图React + CSS 绘...

react-native 父函数组件调用类子组件的方法，代码如下所示：import React, {Component} from 'react';import {Text, View, TouchableOpacity} from 'react-native';// 父let...

目录项目目录及ts文件划分在项目中使用TypeScript具体实践组件声明React Hooks使用useStateuseRefuseCallbackuseMemouseContextuseReduceruseImperativeHandleAxios请求/响...

目录React.memo？这是个啥？React.memo的第一个参数父组件子组件React.memo优化React.memo的第二个参数父组件子组件React.memo优化父组件子组件小结React.memo？这是个啥？按照官方...

浏览器端的前端路由模式：hash模式，history模式安装路由模块路由模块不是react自带模块，需要安装第3方模块// react-router-dom 它现在最新的版本6
npm i -S react-router-dom@5...

目录react-native 渐变色背景react-native学习记录滚动条轮播图示例渐变色ScrollableTabView默认页面ScrollableTabView背景颜色ScrollableTabView选中颜色ScrollableTabVie...

目录前言使用 create-vite 脚手架生成基础模板eslintprettierreact-routerantd别名Less 与 CSS Module总结前言使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过...

目录react-native-image-viewer大图预览先看一个实现的效果实例下面是一个简单的实例代码Propsreact-native-image-viewer大图预览在移动开发中，特别是涉及到图片的应用开发...

常见使用:获取数据案例:import React, { useState, useEffect } from 'react';import axios from 'axios';function App() { const [data, setData] = useState({ hits: []...

目录引言集中状态管理双向数据流那为何不选择双向数据流小结引言今天将之前的内容做个系统整理，结合 React Form 案例， 来了解下为何React推荐单向数据流，如果采用双向管理，可能...

目录我们为什么需要错误边界如何使用错误边界组件使用错误边界需要注意什么我们为什么需要错误边界在React组件中可能会由于某些JavaScript错误，导致一些无法追踪的错误，导致...

目录1 HTML 构建静态页面2 DOM 构建页面3 从命令式到声明式4 JSX5 总结6 完整代码这个系列的目的是通过使用 JS 实现“乞丐版”的 React，让读者了解 React 的基本...

目录前言1. 安装craco2.根路径下创建 craco.config.js3. 修改package.json文件的script字段4.使用补充：React 配置 @ 路径别名总结前言无论是vue还是react开发，我们通常需要引...

使用装饰器调用装饰器 用来装饰类的，可以增强类，在不修改类的内部的源码的同时，增强它的能力(属性或方法)装饰器使用@函数名写法，对类进行装饰，目前在js中还是提案，使用需要配置相...

目录一、理解JavaScript纯函数1.1 纯函数的概念1.2 副作用概念的理解1.3 纯函数在函数式编程的重要性二、Redux的核心思想2.1 为什么需要 Redux2.2 Redux的核心概念2.2.1 st...

目录Context/Provider/Consumer传参使用Context使用context向后代组件传参Context/Provider/Consumer传参使用react context这个api很少用到,所以一直不太清楚如何使用,最近...

目录react-native-doc-viewer文档预览具体步骤如下react-native初体验的总结一、前提知识点二、开发前后相关的一些配置三、开发项目中用到的知识四、ui库五、项目搭建六、...

目录React Hook 父子组件相互调用函数1.子组件调用父组件函数方法2.父组件调用子组件函数方法React Hook 父子组件传值父组件子组件React Hook 父子组件相互调用函数1.子组...

目录React Hook父组件获取子组件数据/函数子组件MyWorldMap父组件MyTripReact Hook父组件提交子组件form父组件子组件React Hook父组件获取子组件数据/函数我们知道在react...

目录Form数据管理重置Form状态form验证小结Form数据管理有时会遇到多个位置需要用户输入的情况，若每个状态都配置state或handler会很繁琐，可以尝试下面的方法import * as Reac...

目录Ant Design使用css切换问题1、绑定一个自定义属性2、css模块化3、Ant Design主题方案4、css in js ant design中css样式覆盖问题Ant Design使用css切换问题当想通过开关...

目录Suspense 基本应用Suspense 原理基本流程源码解读 - primary 组件源码解读 - 异常捕获源码解读 - 添加 promise 回调源码解读-Suspense首次渲染primary 组件加载完成前...

目录背景Android FullScreenModal 的封装使用Android 原生实现全屏 Dialog封装给 RN 进行相关的调用Android 原生部分实现JS 部分实现使用 RootSiblings 封装 Modal实现界面...

目录前言为什么页面会出现卡顿的现象？React 到底是在哪里出现了卡顿？React 有哪些场景会需要性能优化？一：父组件刷新，而不波及子组件。第一种：使用 PureComponent第三种：函数组件如...

目录React.lazy()概括为什么需要懒加载如何进行代码分割SuspenseSuspense应用场景Suspense实现原理总结Suspense和lazy()都是react中比较新的特性,在项目中使用还比较少,但...

目录1、介绍2、state概念演示3、props概念props与state区别4、refs概念refs种类5、父子组件什么是父子组件父子组件之间传值1、介绍React组件中默认封装了很多属性，有的是提...

目录使用websocket实时通信创建公共组件在react组件中的使用websocket在不同情形下的使用1.在react中使用websocket2.websocket在小程序中使用使用websocket实时通信在react...