React 的几种组件以及首次渲染实现React 更新机制的实现以及 React diff 算法React 的代码还是非常复杂的，虽然这里是一个简化版本。但是还是需要有不错的面向对象思维的。React 的核心主要有一下几点。虚拟 dom 对象（Virtual DOM）虚拟 dom 差异化算法（diff algorithm）单向数据流组件声明周期事件处理本文代
......
283
0
0
2023-03-15
非嵌套关系组件的通信方式？即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。可以使用自定义事件通信（发布订阅模式）可以通过redux等进行全局状态管理如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。react hooks，它带来了那些便利代码逻辑聚合，逻辑复用HOC嵌套地狱代替classReact
......
309
0
0
2023-03-14
mixinMixin 设计模式Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，可以拷贝多个属性到一个对象上，为了解决代码复用问题。常用的方法：JQuery 的 extend 方法。var LogMixin = {
log: function() {
console.log('log');
......
302
0
0
2023-03-14
React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在 React 中渲染集合时，向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。key 应该是唯一ID，最好是 UUID 或收集项中的其他唯一字符串：<ul>
{todos.map((tod
......
301
0
0
2023-03-14
前言所谓同构，简而言之就是，第一次访问后台服务时，后台直接把前端要显示的界面全部返回，而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。同构概念并不复杂，它也非项目必需品，但是探索它的原理却是必须的。阅读本文需要你具备以下技术
......
305
0
0
2023-03-14
目录1. 简介2. useState使用3. useEffect使用useEffect发起网络请求1. 简介在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数组件，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI
......
399
0
0
2023-03-14
目录什么是hooks？解决了什么问题？Hook 简介Hook APIuseState指定初始 state惰性初始化自定义 Hook什么是hooks？解决了什么问题？Hooks 是react16.8新增特性，它可以使用一些state的新特性，简化逻辑复用，副作用统一数据。Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或者
......
315
0
0
2023-03-14
在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的props变化。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事情如下re
......
336
0
0
2023-03-12
目录前言实现原理固定定位实现MousePositionDemoMousePositionModal绝对定位（相对于整个浏览器窗口）MousePositionDemoMousePositionModal绝对定位和相对定位（相对于鼠标跟随框的父元素）MousePositionDemoMousePositionModal2最后前言鼠标跟随框的作用如下图所示，可以在
......
320
0
0
2023-03-12
今天，让我们一起深入探究 React Hook 的实现方法，以便更好的理解它。但是，它的各种神奇特性的不足是，一旦出现问题，调试非常困难，这是由于它的背后是由复杂的堆栈追踪（stack trace）支持的。因此，通过深入学习 React 的新特性：hook 系统，我们就能比较快地解决遇到的问题，甚至可以直接杜绝问题的发生。在开始讲解之前，我先声明我不是 Re
......
301
0
0
2023-03-12
requestEventTime其实在React执行过程中，会有数不清的任务要去执行，但是他们会有一个优先级的判定，假如两个事件的优先级一样，那么React是怎么去判定他们两谁先执行呢？// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function requestEven
......
280
0
0
2023-03-12
这一章我想跟大家探讨的是React的生命周期与事件系统。jsx的编译结果在这里插入图片描述因为前面也讲到jsx在v17中的编译结果，除了标签名，其他的挂在标签上的属性（比如class），事件（比如click事件），都是放在_jsxRuntime.jsx函数的第二参数上。表现为key:value的形式，这里我们就会产生几个问题。react是怎么知道函数体（事件
......
302
0
0
2023-03-12
目录1. 事件绑定1.1 函数组件1.2 类组件2. 合成事件3. 事件传参的3种不同写法4. this 指向问题1. 事件绑定React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:React 事件的命名采用小驼峰式，而不是纯小写。onClick => onChange使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是
......
341
0
0
2023-03-12
目录1. 基本使用2. 使用setState操作state数据3. 案例-toDoList4. 案例-购物车1. 基本使用要点：成员属性 state 它是一个特殊的属性，它是当前类的私有数据，只有在当前的组件中才能操作里面的数据状态( state )即数据，是组件内部的私有数据，只能在组件内部使用,和vue中data差不多，不过它没有像vue中的data进行
......
321
0
0
2023-03-12
目录1. 受控组件1.1 介绍1.2 受控组件简写1.3 在表单中使用受控组件1.4 综合案例2. 非受控组件介绍非受控组件的应用1. 受控组件1.1 介绍概述：将 state 与表单项中的 value 值绑定在一起，有 state 的值来控制表单元素的值，称为受控组件。绑定步骤：在state中添加一个状态，作为表单元素的value值给表单元素绑定 chan
......
331
0
0
2023-03-11