【React入门必备知识篇04】--- React 原理解析一、React 原理（1） setState() 的说明1.1 更新数据1.2 推荐语法1.3 第二个参数（2）JSX 语法的转化过程（3）组件更新机制（4）组件性能优化4.1 减轻 state4.2 避免不必要的重新渲染4.2.1 案例：随机数4.3 纯组件4.3.1 实现原理（5）虚拟 DOM 和 Diff 算法二、总结 一、Rea
转载
2024-03-28 22:57:11
391阅读
在之前的两篇FlyFish组件开发中，我们已经了解到了组件的构成和基本开发技巧，本次我们将详细讲解如果在飞鱼平台上使用React组件。组件导出首先要明确的一点是，目前的FlyFish是无法直接使用React的组件。需要如下图所示的办法，将ReactComponent来包裹实现组件导出 数据获取props.data 若为每次render自动重新计算data可直接从props.da
转载
2024-10-11 19:21:19
47阅读
1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）创建数组的语法： var arr=[值1,值2,值3];
一、事件监听添加事件监听window.addEventListener('scroll', this.handleListen)移除事件监听window.removeEventListener('scroll', this.handleListen)二、绑定的事件函数相关绑定是事件函数必须是同一个，如果不会同一个，会导致解绑失败。 一般会用到的事件函数类型有三种：命名函数、箭头函数、匿名函数这里重
转载
2024-09-11 14:52:19
323阅读
/*
记住，需要联合vue去认识react，利用是区别及记忆
路由：
前端路由：hash history
后端路由：
React特性：一切皆为组件
使用react路由需要安装，跟vue一样
1、安装 cnpm install react-router-dom -S
自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。对于开发已久且 Code Review 不是那么严格的庞大项目来说，在升级到 React 16 以后，可能会发现以前只偶尔在局部出现影响不大而未获得足够关注的异常，现在会时常导致整个应用垮掉。React 16 引入了错误边界（Error Boundaries）来解决这种情况。1 错误边界(Error Bou
关于服务端 401未登录的上报目前很多项目都对用户未登录信息做了日志收集，如果没有特殊的业务需求，我们可以过滤掉。if (err.response.status >= 400 && err.response.status < 500) {
// 如果是非401等 4xx code 则logger错误日志
if (IS_SERVER &a
转载
2024-07-15 13:54:44
160阅读
组件从概念上来看就像JS中的一个函数，它可以接收任意的输入值(称之为props),并返回一个需要在页面上展示的React元素。我们可以将UI切分成几个不同的，独立的，可复用的部分，进行单个部分即单个组件的构建，后面进行整合展示就可。 一、函数组件和类组件 组件的名称必须是大写开头，这样可以在使用时和html标签区分开来。函数组件的创建是定义一个首字母大写的函数，这个函数返回jsx，jsx它是
转载
2023-09-16 21:53:01
138阅读
Hooks一.Hook简介Hook是React 16.8新增的特性.它可以让你在不编写class的情况下使用state以及生命周期等特性 之前了解到组件有class(类)组件,和函数(无状态)组件,class组件中有自己的生命周期和自己的状态,而函数组件是一个无状态组件,Hook的出现正式为了解决这个问题,Hooks可以让函数式组件可以拥有state,生命周期等特性二.为什么要使用HookHook
转载
2024-02-21 13:55:41
33阅读
一、组件的属性(props)和状态(state)参考：https://www.jianshu.com/p/72f8c1da0b651. 属性（props）它是组件的不可变属性（组件自己不可以自己修改props）。 组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为节点的属性。 一般组件很少需要对外公开方法（例外：工具类的静态方法等），唯一的交互途径就是props
转载
2024-02-26 09:22:12
66阅读
1、问题背景 利用React遍历标签数组，并生成有序列表2、实现源码 React遍历标签数组 3、实现结果 ...
转载
2016-09-29 14:46:00
192阅读
2评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx小练习</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type
原创
2021-07-16 14:59:54
1045阅读
1、问题背景 利用React遍历数组，并用数组元素生成无序列表2、实现源码 React遍历数组 3、实现结果 ...
转载
2016-09-29 14:35:00
411阅读
2评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx小练习</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type
原创
2022-02-11 15:31:21
1101阅读
前言 学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。 github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢
Prometheus 最初是为监控后端服务而设计的，因此用它来观察 React 应用程序并不常见。本文中，我们将介绍如何使用 Prometheus 在应用程序架构中使用单个监控工具来监控 React 应用程序。监控Asserts UI在 Asserts，我们一直在对自己的产品进行处理，并用它来监控我们的后端服务。经过一番研究，我们发现可以帮助我们发布前端 Prometheus 指标的库已经存在。我
原创
2024-03-04 11:20:11
175阅读
最近做一个H5项目，数据交互量比较大，很多页面都是从后台拿过来数据做一个列表显示，这自然就遇到了滚动。刚开始我直接使用css做法，直接添加overflow: scroll;但在微信端用户滑动会直接将整个页面拖动，露出顶部的域名和底部的黑色背景。用户反映体验不好，要改……好吧，自己动手。但这并不是好改的，因为在React中都是构建的是虚拟DOM，直接操作DOM也会对性能有一定影响。这时候网上搜了一下
转载
2024-02-12 21:33:05
0阅读
在React中如何定义组件 在React中创建组件有两种方式，第一种: 通过ES6之前的构造函数的方式来定义(无状态组件)，第二种: 通过ES6开始的class来定义(有状态组件)。 通过 ES5 的构造函数来定义组件 在构造函数中返回组件的结构即可，如下所示： function Home() {
原创
2020-11-05 01:50:00
180阅读
目录什么是Hooks？为什么要引入Hooks？使用Hooks使用State Hooks使用 Effect Hook使用Ref Hook 其他Hook Hook 规则只在最顶层使用 Hook 只在 React 函数中调用 Hook自定义Hook 自定义Hook MousePosition 使用自定义Hook什么是Hooks？Hook&nb
转载
2024-10-08 12:41:33
21阅读
函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。
原创
2021-11-26 15:22:10
550阅读
