分类：React

2021
04-27

React嵌套组件的构建顺序

在React官网中，可以看到对生命周期的描述这里有一个疑问是，在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新解决这个问题，可以从嵌套单个元素入手。下面是一个只有DOM元素的组件ParentfunctionParent(){return(<div>child</div>)}对于上面的元素，React会调用React.createElement创建一个对象，这就是子元素的构建阶段（这里使用的是babeljs.io/）React.createElement("div",nul... 继续阅读 >
2021
04-27

详解React中的不可变值

什么是不可变值函数式编程是指程序里面的函数和表达式都能像数学中的函数一样，给定了输入值，输出是确定的。比如leta=1;letb=a+1;=>a=1b=2;变量b出现，虽然使用了变量a的值，但是没有修改a的值。再看我们熟悉的react中的代码，假如初始化了this.state={count:1}componentDidMount(){constnewState={...state,count:2};//{count:2}this.setState(newState);}虽然我们使用了this.state，... 继续阅读 >
2021
04-27

react diff算法源码解析

React中Diff算法又称为调和算法，对应函数名为reconcileChildren，它的主要作用是标记更新过程中那些元素发生了变化，这些变化包括新增、移动、删除。过程发生在beginWork阶段，只有非初次渲染才会Diff。以前看过一些文章将Diff算法表述为两颗Fiber树的比较，这是不正确的，实际的Diff过程是一组现有的Fiber节点和新的由JSX生成的ReactElement的比较，然后生成新的Fiber节点的过程，这个过程中也会尝试复用现有Fiber节点。节点Diff... 继续阅读 >
2021
04-27

React ref的使用示例

写了一段时间的react，99%都在写state、prop、useState、useEffect，对ref特别不熟悉，前几天做一个需求，想用ref实现父组件捞子组件的某个状态值，结果失败了，特此整理一下ref相关内容。什么是ref官网介绍：在典型的React数据流中，props是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的props来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一... 继续阅读 >
2021
04-25

React useMemo和useCallback的使用场景

useMemo我们知道当父组件发生重新渲染时，其所有（状态、局部变量等）都是新的。一旦子组件依赖于父组件的某一个对象变量，那么无论对象是否发生变化，子组件拿到的都是新的对象，从而使子组件对应的diff失效，依旧会重新执行该部分逻辑。在下面的例子中，我们的副作用依赖项中包含了父组件传入的对象参数，每次父组件发生更新时，都会触发数据请求。functionInfo({style,}){console.log('Info发生渲染');useEffect(()... 继续阅读 >
2021
04-25

React事件机制源码解析

Reactv17里事件机制有了比较大的改动，想来和v16差别还是比较大的。本文浅析的React版本为17.0.1，使用ReactDOM.render创建应用，不含优先级相关。原理简述React中事件分为委托事件（DelegatedEvent）和不需要委托事件（NonDelegatedEvent），委托事件在fiberRoot创建的时候，就会在root节点的DOM元素上绑定几乎所有事件的处理函数，而不需要委托事件只会将处理函数绑定在DOM元素本身。同时，React将事件分为3种类型——discreteE... 继续阅读 >
2021
04-25

详解react应用中的DOM DIFF算法

前言对我们搞前端的来说，目前最流行的两大前端框架毫无疑问当属React和Vue，对于这两大框架，想必大家也是再熟悉不过了。然而，这两大框架无一例外的全部放弃使用传统的DOM技术，却采用了以JS为基础的VirtualDOM技术，也可称作虚拟DOM。所以，到底什么是VirtualDOM？两大热门框架全部使用VirtualDOM的原因又是什么？接下来让我这个搞前端的人来好好地为您讲解一下DOMDIFF算法的牛逼之处。什么是VirtualDOM?如字面意思所... 继续阅读 >
2021
04-09

编写简洁React组件的小技巧

本文源于翻译文章SimpletipsforwritingcleanReactcomponents,原文作者IskanderSamatov在这篇文章中，我们会回顾一些简单的技巧，它们将帮助我们编写更简洁的React组件，并且更好地扩展我们的项目。避免使用扩展操作符传递props首先，让我们从一个应该避免的反模式开始。除非有明确的理由这样做，否则应该避免在组件树中使用扩展操作符传递props，比如：{...props}。通过这种方式传递props确实可以更快的编写组件... 继续阅读 >
2021
04-09

React实现一个高度自适应的虚拟列表

近期在某平台开发迭代的过程中遇到了超长List嵌套在antdModal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。改造前：我们可以看出来在改造之前，打开编辑窗口Modal的时候会出现短暂的卡顿，并且在点击Cancel关闭后也并不是立即响应而是稍作迟疑之后才关闭的改造后：改造完成后我们可以观察到整个Modal的打开比之前变得流畅了不少，可以做到立即响应用户的点击事件唤起/关闭Modal性能... 继续阅读 >
2021
04-09

React使用emotion写css代码

简介：emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上一个css开头的标识。如下：截图中以css-开头的几个标签，就是使用emotion库后渲染出来的。下面就从安装到使用，介绍下emotion在工程中的应用。emotion的安装：yarnadd@emotion/reactyarnadd@emotion/styled新增普通css组件：1，命名和组件一样，... 继续阅读 >
2021
04-09

react中常见hook的使用方式

1、什么是hook？reacthook是react16.8推出的方法，能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。2、为什么要出现hook？函数式组件是全局当中一个普通函数，在非严格模式下this指向window，但是react内部开启了严格模式，此时this指向undefined，无法像类式组件一样使用state、ref，函数式组件定义的变量都是局部的，当组件进行更新时会重新定义，也无法存储，所以在hook出现之前，函数式组件有很大的局限性，... 继续阅读 >
2021
04-07

简单分析React中的EffectList

React中，会遍历EffectList来执行节点操作、生命周期方法、Effect方法，可以把EffectList比作圣诞树上挂的彩灯，而这颗圣诞树就是Fiber树。为什么会存在EffectList呢？打个比方来说，一颗Fiber树中有一些Fiber节点需要执行componentDidMount方法，如果在Fiber树构建完成后，再遍历一次Fiber树，找到需要执行componentDidMount方法的Fiber节点，这是非常低效的。而EffectList就解决了这个问题，在Fiber树构建过程中，每当一个Fiber... 继续阅读 >
2021
04-07

使用hooks写React组件需要注意的5个地方

Hook是React16.8开始新增的特性。虽然React官方文档已经作出了针对Reacthooks的相关概念的讲解，但是光看官方文档是很难将hooks使用好的，在编写hooks的过程中很容易跳进陷阱和错误。本文总结了5个不好的地方。01.不需要render的场景下使用useState在函数组件中我们可以使用useState来管理状态，这使得对状态的管理变得很简单，但是也容易被滥用，我们通过下面的代码样例看下容易忽略的地方。不推荐×functionClickButton(props)... 继续阅读 >
2021
04-07

React+Antd 实现可增删改表格的示例

最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antdtable表格，点击编辑，打开弹窗，弹窗内是tab切换显示不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增一行可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了Table/index.jsimportReact,{useState}from'react'import{Row,Col,Card... 继续阅读 >
2021
04-07

React+Ant Design开发环境搭建的实现步骤

React+Ant Design开发环境搭建的实现步骤 基础知识1.使用脚手架创建项目并启动1.1安装脚手架：npminstall-gcreate-react-app1.2使用脚手架创建项目：create-react-appantd-start-demoantd-start-demo为项目名。1.3启动npmstart2.npm转换为yarn2.1安装yarn：npminstall-gyarn​2.2获取yarn当前的镜像源：yarnconfiggetregistry​2.3设置为淘宝镜像：yarnconfigsetregistry'https://registry.npm.taobao.org'​2.4常用命令：yarnin... 继续阅读 >