- 博客(22)
- 收藏
- 关注
RSS订阅原创 React Hooks —— useContext上下文通信
上下文操作的核心是上下文对象，如ThemeContext。创建多个不同的上下文对象，可以基于不同上下文对象中的Provider存放不同的上下文信息，同时也可以基于不同的上下文对象，获取指定上下文中的信息。为了实现祖孙组件的便捷通信，不使用繁琐的props和ref层层传递信息，可以使用Hooks组件的context特性实现通信。对象存储上下文中共享的数据和方法，祖先组件更新时会往上下文中放入最新的共享内容。将所有后代组件包裹到。创建一个上下文对象，用来管理上下文中的信息。解构上下文对象获取上下文信息。
2023-06-28 14:03:02
406
原创 React Hooks —— useReducer【useState进阶方案】
需要注意的是，React 可能仍需要在跳过渲染前再次渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用。state，因此传入的新状态和旧状态不能是同一个地址。若在旧状态上直接更改，React将跳过子组件的视图重新渲染和副作用的执行。的第三个参数传入，这样初始 state 将被设置为。普通需求场景下，useState直接处理比较简单。将初始 state 作为第二个参数传入。的 reducer，并返回。
2023-06-28 13:49:25
280
原创 React Hooks —— useMemo&useCallback优化性能
在前端开发的过程中，我们需要缓存一些内容，以避免在需渲染过程中因大量不必要的耗时计算而导致的性能问题。为此 React 提供了一些方法可以帮助我们去实现数据的缓存，useMemo 就是其中之一，只能应用在函数组件中，在某些情况下能大大提高函数的运行效率。诉求：当父组件更新的时候，因为传递给子组件的属性仅仅是一个函数「特点：基本应该算是不变的」，所以不想再让子组件也跟着更新了！父组件嵌套子组件父组件要把一个内部的函数，基于属性传递给子组件，此时传递的这个方法，基于useCallback处理会更好。
2023-06-28 13:47:57
510
原创 React Hooks —— useImperativeHandle和ref转发
【代码】React Hooks —— useImperativeHandle和ref转发。
2023-06-28 13:44:39
192
原创 React Hooks—— useRef用法及类组件的三种ref创建使用方式
给元素标签设置ref，目的：获取对应的DOM元素给类组件设置ref，目的：获取当前调用组件创建的实例（后续可以根据实例获取子组件中的相关信息）// 基于ref获取子组件的实例，这样基于实例，可以调用子组件内部，挂载到实例上的东西 class Child extends React . Component {state = {x : 1000 };
2023-06-28 13:39:15
3215
原创 React Hooks —— useLayoutEffect及其与useEffect的区别
useLayoutEffect函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。尽可能使用标准的 useEffect 以避免阻塞视觉更新。可以使用它来读取 DOM 布局并同步触发重渲染。
2023-06-28 13:32:21
213
原创 React Hooks ——useEffect及其底层链表机制
1、按照顺序执行期间，首先会检测依赖项的值是否有更新「有容器专门记录上一次依赖项的值」；有更新则把对应的callback执行，没有则继续处理下一项。函数组件在渲染（或更新）期间，遇到useEffect操作，会基于MountEffect方法把callback（和依赖项）加入到。2、遇到依赖项是空数组的，则只在第一次渲染完毕时，执行相应的callback。3、遇到没有设置依赖项的，则每一次渲染完毕时都执行相应的callback。只能在函数最外层调用 Hook，不要在。作用：在函数组件中使用生命周期函数。
2023-06-28 13:26:03
1475
原创 React Hooks —— useState异步更新队列、闭包、浅比较深入理解
render多次（理论上是一次，这里是因为这些操作作用的都是一个闭包中的同一个状态值x，在第一次改状态还没改成功之前，其他次操作访问的状态值仍旧是还没改的10，直到第一次改状态成功，剩余次操作不会再通过Object.is的测试。第二次flushSync，更新队列里只有一个setX，立即同步执行，使用的也是第一次Demo创建出来的EC的闭包中的state（因为这些flushSync方法都存在于第一个上下文中），也就是10。注意不是因为DOM-DIFF；，会刷新队列，也就是通知更新队列中的所有任务执行：把。
2023-06-28 12:27:28
3897
1
原创 React Hooks——Hooks组件简介
Hook 是 React 16.8 的新增特性！并且只能运用到函数组件中！就是基于 React 中新提供的 Hook 函数，可以。
2023-06-26 14:23:57
273
原创 this指向全解析
this实质上是函数内部的执行期的上下文指向this只有在执行期才能明确指向，换言之，函数的执行条件的环境决定了this的指向。
2023-06-18 22:32:19
204
原创 call()和apply()
这两个方法都会以指定的 this 值来调用函数，即会设置调用函数时函数体内 this 对象的值。apply()方法接收两个参数：函数内 this 的值和一个参数数组。第二个参数可以是 Array 的实例，但也可以是 arguments 对象。call()方法与 apply()的作用一样，只是传参的形式不同。第一个参数跟 apply()一样，也是 this值，而剩下的要传给被调用函数的参数则是逐个传递的。换句话说，通过 call()向函数传参时，必须将参数一个一个地列出来。相同之处：都用来实现代码重用
2021-11-14 21:42:11
302
原创 原型、原型链、constructor
/*对应名称prototype 原型__proto__ 原型链（原型的链接点，当作一个指针、结点）从属关系prototype -> 函数的一个属性：对象 {}__proto__ -> 对象的Object的一个属性：对象 {}对象的__proto__保存着该对象的构造函数的prototype*/function Test() { this.a = 1;}const test = new Test(); // 沿着原型链从底层向高层逐渐继承Test.prot
2021-11-14 21:40:41
708
原创 闭包(基础)
让我们先来看一个简单的例子function test1() { function test2() { var b = 2; console.log(a); } var a = 1; return test2();}var c = 3;var test3 = test1();test3();尽管此时test1已经销毁(销毁理应a为undefined)test1执行结束之后应该销毁掉scope chain和对应的AO,但此时te
2021-11-14 21:38:36
412
原创 作用域、作用域链——预编译（2）
这里写目录标题[[scope]]JS都做了什么?1.函数定义时生成GO2.预编译(被执行前)时生成AO3.外层函数被执行的时候，内层函数被定义4.b函数只有在执行时才会生成自己的AO要点总结：练习AO是和function紧密联系在一起的，函数可以被认为是一个独立的仓库。函数其实也是一种对象类型、引用类型，具有引用值，如function.name function.prototype function.length。但是函数的有些属性是我们无法访问的，类似私有属性，是JS引擎内固有的隐式属性[[scope
2021-11-14 21:33:07
533
原创 AO对象与GO对象——预编译（1）
文章目录AO对象与GO对象——预编译（1）JS引擎都做了什么？函数声明提升var关键字的声明提升，赋值不提升一个奇奇怪怪的例子暗示全局变量AO对象GO对象AO和GO综合练习AO对象与GO对象——预编译（1）JS引擎都做了什么？1.检查通篇的语法错误（语法分析）1.5预编译的过程（预编译）2.解释一行执行一行（解释执行）函数声明提升text();function text() { console.log(1); } // 1var关键字的声明提升，赋值不提升var关键字声明的变量会自动提
2021-11-14 21:23:01
1175
原创 浙大数据结构-堆和优先队列
一、优先队列优先队列（Prior Queue）：特殊的“队列”，取出元素的顺序是以招元素的优先权（关键字）大小，而不是元素进入队列的先后顺序数组或链表实现优先队列 插入——元素总是插入尾部 Θ(1) 数组 删除——查找最大（或最小）关键字 Θ(n) 移动数组元素后删去 O(n) 插入——元素总是插入头部 Θ(1) 链表 删除——查找最大(或最小)关键字 Θ...
2021-04-17 11:18:47
262
原创 浙大数据结构-5.2 Huffman Tree & Huffman Code
哈夫曼树的定义带权路径长度（WPL）：设二叉树有n个叶子结点，每个叶子节点带有权值wk,从根节点到每个叶子结点的长度为lk，则每个叶子节点的带权路径长度之和最优二叉树或哈夫曼树：WPL最小的树实际意义：根据结点不同的查找频率构建更有效的搜索树哈夫曼树的构造每次把权值最小的两棵二叉树合并...
2021-04-16 14:45:38
462
1
原创 浙大数据结构-二叉树的遍历算法及拓展
1.递归版本1.先序遍历访问根结点 先序遍历左子树 先序遍历右子树typedef struct TreeNode *BinTree;typedef struct{ int Data; BinTree lchild; BinTree rchild; } TreeNode;void PreOrderTraversal( BinTree BT){ if( BT ){ printf("%d", BT->Data); PreOrderTraversal( BT->lc
2021-04-14 21:30:28
372
原创 浙大数据结构-二叉树基础
二叉树的定义二叉树T：一个有穷的结点集合，此集合可以为空，若不为空，则它是由根节点和左子树TL、右子树TR两个不相交的二叉树组成二叉树的子树有左右顺序之分 每个结点的度为0，1，2 二叉树有五种基本结构：空，只有根结点，只有左子树，只有右子树，左右子树均存在特殊二叉树斜二叉树（Skewed Binary Tree）：只存在左子树或右子树完美二叉树（Perfect Binary Tree）/满二叉树（Full Binary Tree）：所有分支结点都有左右孩子，且叶子结点都集中在最下一.
2021-04-13 15:31:33
319
原创 数据结构-树的基础知识
树的定义n(n>=0)个结点构成的有限集合，非线性数据结构，n=0时为空树对于任意一棵非空树具备以下性质：有一个Root，用r表示其余结点可分为m个互不相交的有限集T1,T2, ... ,Tm，其中每个集合本身又是一棵树，称为原来树的子树SubTree判定树与非树？子树不相交除了根结点外，每个节点有且仅有一个父结点一棵N个结点的树有N-1条边树是保证结点连通的最少边的方式树的基本术语结点的度（degree）：结点的子树个数树的度：数的所有结点中最大的度数
2021-04-13 14:50:40
2686
原创 数据结构-5.3集合及运算
集合的表示集合运算：交、并、补、差，判定一个元素是否属于某一集合 并查集：集合并、查某元素属于什么集合 并查集问题中集合存储如何实现？链式存储：树结构表示集合，树的每个结点代表一个集合元素 顺序存储：用数组表示集合运算查找某个元素所在的集合（用根节点表示）集合的并运算分别找到x1和x2两个元素所在的集合的根节点 判断是否同根：同根则不做改变；不同根则将其中一个根节点的父节点指针设置成另一个根节点的数组下标...
2021-04-12 11:09:16
568
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人