目录正文相关APIReact.createContextContext.ProviderClass.contextTypeContext.Consumer示例1. 动态context2. 在内嵌的组件中更新context3. 同时消费多个context遗留的APIContext提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的Rea
......
226
0
0
2023-06-15
目录热身准备明确几个概念事件系统角色划分事件注册registerSimpleEventsregisterEvents$2registerEvents$1registerEvents$3registerEvents事件监听事件派发合成事件捕获和冒泡总结热身准备明确几个概念在React@17.0.3版本中：所有事件都是委托在id = root的DOM元素中（网上
......
259
0
0
2023-06-15
目录为什么需要优先级同步模式下的react运行时如何运用优先级机制优化react运行时确定不同场景下的调度优先级lane优先级event优先级scheduler优先级优先级间的转换优先级机制如何设计设计思路合并赛道释放赛道找出最高优先级赛道快速定位赛道索引判断赛道是否被占用如何将优先级机制融入React运行时生成一个更新任务步骤一：获取本次更新的优先级步骤二
......
229
0
0
2023-06-13
目录三种使用方式1. String Refs2. 回调 Refs3. createRef两种使用目的Refs 转发createRef 源码forwardRef 源码三种使用方式React 提供了 Refs，帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素。React 提供了三种使用 Ref 的方式：1. String Refscl
......
255
0
0
2023-06-12
目录diff 算法介绍diff 策略tree diffcomponent diffelement diff结合源码看 diff整体流程新内容为 REACT_ELEMENT_TYPE新内容为纯文本类型新内容为数组类型diff 后的渲染上一章中 react 的 render 阶段，其中 begin 时会调用 reconcileChildren函数， reconc
......
256
0
0
2023-06-12
目录适合人群写源码之前的必备知识点JSX虚拟Dom原理简介手写react过程基本架子的搭建React的源码ReactDom.renderReactDom.Component简单源码适合人群本文适合0.5~3年的react开发人员的进阶。讲讲废话：react的源码，的确是比vue的难度要深一些，本文也是针对初中级，本意了解整个react的执行过程。写源码之前的
......
244
0
0
2023-06-11
目录useState 解析useState 使用useState 模拟实现hooks 规则useEffect 解析useEffect 使用useEffect 的模拟实现useEffect 注意事项接口无限请求问题Hooks 源码解析总结useState 解析useState 使用通常我们这样来使用 useState 方法function App() {
......
252
0
0
2023-06-11
目录jsx的转换16.x版本及之前17.x版本及之后React.createElement源码React.Component 源码总结jsx的转换我们从 react 应用的入口开始对源码进行分析，创建一个简单的 hello, world 应用：import React, { Component } from 'react';
import ReactDOM
......
321
0
0
2023-06-11
目录热身准备为什么会有hookshooks执行时机两套hookshooks存储初始化 mountuseStatemountWorkInProgressHook更新updateupdateStateupdateReducerupdateWorkInProgressHook总结热身准备在正式讲useState，我们先热热身，了解下必备知识。为什么会有hooks大
......
264
0
0
2023-06-11
目录准备工作render阶段workloopSyncbeginWorkcompleteWorkcommit阶段commitWorkmutation之前mutationfiber树切换layoutlayout之后总结准备工作为了方便讲解，假设我们有下面这样一段代码：function App(){
const [count, setCount] = use
......
294
0
0
2023-06-11
目录一 React-Redux的应用1.学习文档2.Redux的需求3.什么是Redux4.什么情况下需要使用redux二、最新React-Redux 的流程安装Redux Toolkit创建一个 React Redux 应用基础示例Redux Toolkit 示例三、使用教程安装Redux Toolkit和React-Redux创建 Redux Stor
......
293
0
0
2023-06-11
目录React 与 Babel元素标签转译组件转译子元素转译createElement源码函数入参第一段代码 __self 和 __source第二段代码 props 对象第三段代码 children第四段代码 defaultProps第五段代码 ownerReactElement源码REACT_ELEMENT_TYPE回顾React 与 Babel元素标签
......
271
0
0
2023-06-11
目录不可改变性虚拟dom与真实dom函数组件组件复用纯函数组件组合--组件树组件抽离不可改变性1.jsx-2.component(function)-component(class)-components(函数组件组合)-component tree(redux)-app(项目开发)在react中，创建了js对象（react元素）就是不可更改的（immuta
......
292
0
0
2023-06-09
目录什么是链表链表与数组的比较链表有什么作用？链表的优缺点通过JS简单实现一个单向链表创建Node辅助类单向链表新增操作单向链表插入操作单向链表删除操作单向链表查找操作单向链表修改操作单向链表类方法整合写在最后什么是链表在面试中只要被问到React Hooks就常被问到为什么Hooks不能在循环和条件判断嵌套函数当中使用；相信很多人都知道标准答案，【因为声明
......
288
0
0
2023-06-08
目录一、前言二、用法三、缺点四、context优化一重奏--使用PureComponent二重奏--使用shouldComponentUpdate三重奏--使用React.memo四重奏--Provider再封装+props.children总结一、前言我们在使用react的过程中，经常会遇到需要跨层级传递数据的情况。props传递数据应用在这种场景下会极度
......
272
0
0
2023-06-06