目录组件卸载前执行清理操作通过纯组件提升组件性能(类组件)通过shouldComponentUpdate生命周期函数提升组件性能函数组件使用memo 减少渲染次数memo的基本使用为memo 方法传递自定义比较逻辑通过组件懒加载提供应用性能路由组件懒加载根据条件进行组件懒加载通过使用占位符标记提升React组件的渲染性能使用Fragment 避免额外标记通过
......
199
0
0
2023-04-08
目录React操作DOM之forwardRefReact forwardRef使用方法作用与注意点父 -> 子 -> 子(Dom)父 -> 子 -> 子(class)高阶组件中的特殊情况总结React操作DOM之forwardRefReact操作DOM有几种方式，传入字符串，传入一个对象(react推荐的方式)，传入一个函数，今天就讲
......
202
0
0
2023-04-07
目录前言单节点key相同，类型相同key不同，类型相同key相同，类型不同多节点第一次遍历第二次遍历第三次遍历总结前言这篇文章帮助大家梳理一下React中的dom-diff。在React中，根据新的虚拟DOM的不同，分为单节点（指的是同层级只有一个子节点），和多节点（指的是同层级有多个子节点），分别是在reconcileSingleElement和recon
......
190
0
0
2023-04-04
目录1.文件12.文件23.使用使用react-sortable-hoc实现拖拽如图：提示：下面案例可供参考1.文件1代码如下（示例）：文件名称：./dragcomponentsimport * as React from 'react'
import {
sortableContainer,
sortableElement,
......
331
0
0
2023-04-02
1 事件三个阶段 捕获、目标、处理 （具体百度，后面有空补全）2 示例import React from "react";
class Test extends React.Component {
parentRef;
childRef;
constructor(props) {
super(props);
th
......
192
0
0
2023-03-27
目录React初体验Hello React案例演练Hello React案例升级Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例React初体验接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法Hello React案例演练第一步: 先引入React开发依赖<!-
......
179
0
0
2023-03-20
目录什么是 GraphQLGraphQL出现的意义传统API存在的主要问题：GraphQL 如何解决问题GraphQL基本语法标量类型对象类型枚举类型GraphQL 内置指令什么是 Apolloapollo-server处理流程1.解析阶段2.校验阶段3.执行阶段Schema给server端带来的便利性创建client将client注入到react数据请求数
......
332
0
0
2023-03-18
目录前言React HooksuseStateuseReducer基础用法进阶用法useContextuseEffectuseLayoutEffectuseRefuseImperativeHandleuseCallbackuseMemoReact Redux Hooks useSelectoruseDispatchReact Router HooksuseH
......
217
0
0
2023-03-18
目录recyclerlistview的介绍与使用1.安装2.概述和功能3. RecyclerListView的使用1、dataProvider2、LayoutProvider3、rowRenderer4、onEndReached5、onEndReachedThreshold6、extendedState7、scrollViewPropsRecyclerLis
......
338
0
0
2023-03-16
目录React的过渡动画过渡动画库的介绍CSSTransition(掌握)SwitchTransition(了解)TransitionGroup(了解) 总结React的过渡动画过渡动画库的介绍在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们
......
250
0
0
2023-03-16
React 的几种组件以及首次渲染实现React 更新机制的实现以及 React diff 算法React 的代码还是非常复杂的，虽然这里是一个简化版本。但是还是需要有不错的面向对象思维的。React 的核心主要有一下几点。虚拟 dom 对象（Virtual DOM）虚拟 dom 差异化算法（diff algorithm）单向数据流组件声明周期事件处理本文代
......
191
0
0
2023-03-15
非嵌套关系组件的通信方式？即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。可以使用自定义事件通信（发布订阅模式）可以通过redux等进行全局状态管理如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。react hooks，它带来了那些便利代码逻辑聚合，逻辑复用HOC嵌套地狱代替classReact
......
206
0
0
2023-03-14
mixinMixin 设计模式Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，可以拷贝多个属性到一个对象上，为了解决代码复用问题。常用的方法：JQuery 的 extend 方法。var LogMixin = {
log: function() {
console.log('log');
......
196
0
0
2023-03-14
React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在 React 中渲染集合时，向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。key 应该是唯一ID，最好是 UUID 或收集项中的其他唯一字符串：<ul>
{todos.map((tod
......
200
0
0
2023-03-14
前言所谓同构，简而言之就是，第一次访问后台服务时，后台直接把前端要显示的界面全部返回，而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。同构概念并不复杂，它也非项目必需品，但是探索它的原理却是必须的。阅读本文需要你具备以下技术
......
197
0
0
2023-03-14