react源码解析
文章平均质量分 66
进阶__前端
这个作者很懒,什么都没留下…
展开
-
Gatsby
Gatsby 介绍Gatsby 是一个静态站点生成器.官网:https://www.gatsbyjs.org/静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单Gatsby 总览基于 React 和 GraphQL. 结合了 webpack, babel, react-router 等前端领域中最先进工具. 开发人员开发体验好采用数据层和UI层分离而不失 SEO 的现代前端开发模式. 对SEO非常友好数据预读取, 在浏览器空闲的时候预先读取链接对应的页面内容.原创 2021-02-25 15:46:56 · 546 阅读 · 0 评论 -
Next.js
NEXTJS介绍Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用.支持两种预渲染方式, 静态生成和服务器端渲染.基于页面的路由系统, 路由零配置自动代码拆分. 优化页面加载速度.支持静态导出, 可将应用导出为静态网站.内置 CSS-in-JS 库 styled-jsx方案成熟, 可用于生产环境, 世界许多公司都在使用应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境.代码地址:https://github.com/q原创 2021-02-21 17:31:21 · 2602 阅读 · 0 评论 -
React SSR
React SSR源码地址:https://github.com/qifutian/learngit/tree/main/react-ssr/react-ssrReact服务端渲染什么是服务端渲染SSR: Server Side Rendering服务器返回html,DATA和html在服务端进行渲染什么是客户端渲染CSR:Client Side Rendering服务器返回html,DATA和html在客户端进行渲染客户端渲染的问题首屏等待时间藏,体验差页面结构为空,不利于SEO原创 2021-02-20 17:31:00 · 251 阅读 · 0 评论 -
CSS-IN-JS
集成 CSS 代码在 JavaScript ⽂件1. 为什么会有 CSS-IN-JSCSS-IN-JS 是 WEB 项⽬中将 CSS 代码捆绑在 JavaScript 代码中的解决⽅案.这种⽅案旨在解决 CSS 的局限性, 例如缺乏动态功能, 作⽤域和可移植性2. CSS-IN-JS 介绍CSS-IN-JS ⽅案的优点:让 CSS 代码拥有独⽴的作⽤域, 阻⽌ CSS 代码泄露到组件外部, 防⽌样式冲突.让组件更具可移植性, 实现开箱即⽤, 轻松创建松耦合的应⽤程序让组件更具可重⽤性, 只原创 2021-02-18 15:02:59 · 587 阅读 · 0 评论 -
Formik
React 表单增强1. Formik 介绍1.1 Formik 介绍增强表单处理能⼒. 简化表单处理流程. [官⽹](https://jaredpalmer.com/formik/)1.2 Formik 下载npm install formik2. Formik 增强表单2.1 Formik 基本使⽤使⽤ formik 进⾏表单数据绑定以及表单提交处理2.2 表单验证2.2.1 初始验证⽅式2.2.2 完善错误信息提示时的⽤户体验开启离开焦点时触发验证提示信息时检查原创 2021-02-17 16:47:31 · 338 阅读 · 0 评论 -
React Hooks
React Hooks对函数型组件进⾏增强React Hooks 介绍React Hooks 是⽤来做什么的对函数型组件进⾏增强, 让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒. 让开发者在不使⽤类组件的情况下, 实现相同的功能类组件的不⾜缺少逻辑复⽤机制为了复⽤逻辑增加⽆实际渲染效果的组件,增加了组件层级 显示⼗分臃肿增加了调试的难度以及运⾏效率的降低类组件经常会变得很复杂难以维护将⼀组相⼲的业务逻辑拆分到了多个⽣命周期函数中在⼀个⽣命周期函数内存在多个不相⼲的业务逻原创 2021-02-16 19:16:51 · 318 阅读 · 0 评论 -
MobX专题
源码地址:https://github.com/qifutian/learngit/tree/main/mobx/mobx-guideMobX简介开发准备MobX + reactMobX异步MobX数据监测综合案例MobX简介简单, 可扩展的状态管理库MobX 是由 Mendix,Coinbase,Facebook 开源和众多个人赞助商所赞助的React 和 MobX 是一对强力组合,React 负责渲染应用的状态,MobX 负责管理应用状态供 React 使用浏览器支持M原创 2021-02-12 15:24:15 · 193 阅读 · 0 评论 -
Redux核心源码解析
核心逻辑目标:自己实现redux的核心逻辑最核心的就是createStore方法,接收reducer,preloadedState预存储的state状态,enhancer对store的功能进行增加调用之后会返回一个对象,含有getState获取状态,dispatch,subscribe自定义redux,myRedux.js/** * * createStore(reducer,preloadedState,enhancer) * * {getState,dispatch,subsc原创 2021-02-11 18:34:15 · 429 阅读 · 1 评论 -
Redux 中间件
中间件概念什么是中间件中间件本质是就是一道函数,redux允许我们通过中间件的方式扩展和增强redux的应用,体现在action的处理逻辑上,加载中间件之后,action会先被中间件处理,中间件在返回给reducer开发redux的中间件源码地址:https://github.com/qifutian/learngit/tree/main/redux%E5%8F%8A%E4%B8%AD%E9%97%B4%E4%BB%B6/react-redux-guideredux的中间件本质是一道函数,原创 2021-02-10 18:53:26 · 206 阅读 · 0 评论 -
Redux专题
学习目标Redux核心React + reduxredux的中间件开发redux中间件Redux综合案例1. Redux核心1.1 Redux介绍JavaScript状态容器,提供可预测化的状态管理1.2 Redux 核心概念及工作流程1.3 Redux 案例实现一个计数器案例思路:在页面中显示一个数值,数值初始是0,会有两个按钮,加和减,通过按钮加减数值,使用redux实现创建store对象通过reducer存放store,是一个函数的形式,名称可以任意以一个对象原创 2021-02-10 16:33:37 · 110 阅读 · 1 评论 -
react commit阶段
commit阶段commitRootImpl方法有三个while循环,代表commit的三个子阶段before mutation 阶段(执行 DOM 操作前)mutation 阶段(执行 DOM 操作)layout 阶段(执行 DOM 操作后)在workLoopSync方法调用完成之后代表所有的react元素都构建完成Fiber对象然后进行到commit阶段了,调用了finishSyncRender方法finishSyncRender方法小孩Fiber树,进入commit,commitR原创 2021-02-09 16:59:32 · 660 阅读 · 0 评论 -
react首次渲染
React 元素的初始渲染过程,就是react元素是怎么渲染到页面中的分内两个阶段:1是render阶段,是协调层负责阶段,为每一个元素构建Fiber对象,构建Fiber树,并未每一个元素记录操作类型,是删除,插入,更新,成功之后保存在fiberRoot中2是commit阶段,会先获取到render阶段的工作成果,就是获取保存在fiberRoot当中的树,接下来根据fiber对象中的类型作出对应的操作找到render方法,在packages/react-dom/src/client/ReactDO原创 2021-02-09 16:58:55 · 376 阅读 · 0 评论 -
react 双缓存计算
React 中应用的双缓存技术dom的更新采用双缓存技术,双缓存技术致力于更快速的DOM更新双缓存是什么?举个例子,使用 canvas 绘制动画时,在绘制每一帧前都会清除上一帧的画面,清除上一帧需要花费时间,如果当前帧画面计算量又比较大,又需要花费比较长的时间,这就导致上一帧清除到下一帧显示中间会有较长的间隙,就会出现白屏。为了解决这个问题,我们可以在内存中绘制当前帧动画,绘制完毕后直接用当前帧替换上一帧画面,这样的话在帧画面替换的过程中就会节约非常多的时间,就不会出现白屏问题。这种在内存中构建原创 2021-02-09 16:58:00 · 394 阅读 · 0 评论 -
3. Fiber数据结构
三. Fiber数据结构Fiber的基本结构分为4类:和dom实例相关,构建Fiber树相关,状态数据相关,副作用相关DOM实例相关:tag:标记不同的组件类型type:组件类型 div、span、组件构造函数stateNode: 实例对象, 如类组件的实例、原生 dom 实例, 而 function 组件没有实例构建Fiber树相关:return:指向自己的父级 Fiber 对象child:指向自己的第一个子级 Fiber 对象sibling:指向自己的下一个兄弟 iber原创 2021-02-09 16:57:17 · 407 阅读 · 0 评论 -
2.React16版本采用的架构
2 React16版本采用的架构一. 架构可以分为三层:调度层、协调层、渲染层Scheduler(调度层): 调度任务的优先级,高任务优先进入协调器Reconciler(协调层): 构建Fiber数据结构,比对Fiber对象找出差异,记录Fiber对象要进行的dom操作Renderer(渲染层):负责将变化部分渲染到浏览器Scheduler 调度层在 React 15 的版本中,采用了循环加递归的方式进行了 virtualDOM 的比对,由于递归使用 JavaScript 自身的执行栈,一旦原创 2021-02-09 16:56:45 · 153 阅读 · 2 评论 -
1.react 处理createElement方法
1.react 处理createElement方法也是jsx转换reactElement方法createElement方法接收type, config, children1.1 分离属性,定义propName属性名称,props存普通元素属性,不含key等key,ref等特殊处理判断有config属性,有ref存ref属性,有key属性存key并转字符串三元接收self,sourcefor in 遍历config添加到props中1.2 如果有children并且是数组或者对象1.3原创 2021-02-09 16:56:15 · 275 阅读 · 0 评论 -
React源码解读
1. 配置 React 源码本地调试环境使用 create-react-app 脚手架创建项目npx create-react-app react-test弹射 create-react-app 脚手架内部配置npm run eject克隆 react 官方源码 (在项目的根目录下进行克隆)git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react链接本地源码//原创 2021-02-08 14:12:23 · 365 阅读 · 0 评论 -
为什么 React 16 版本中 render 阶段放弃了使用递归
为什么 React 16 版本中 render 阶段放弃了使用递归旧版 Stack算法的问题:stack算法是循环加递归的方式,这种对比方式有一个问题,就是一旦任务开始无法中断,因为递归需要一层层进入,一层层递归。如果组件特别多,主线程就会长期调用,只有完成更新才能释放,页面卡顿问题,形象体验Fiber算法利用浏览器的空闲时间,拒绝长期占用主线程放弃递归只采用循环,循环可以中断将任务才分,成为一个个小任务实现思路拆分成两部分构建Fiber 可以中断提交Commit 不可中断原创 2021-02-08 14:07:18 · 194 阅读 · 0 评论 -
类组件的props处理
类组件的props处理在处理类组件时候,传递任意属性根据经验,实例化类组件时候可以通过this.props来拿到传递的属性,例如name是张三,age是20在使用props属性时候,并没有手动添加props,设计思路是1.在定义组件时候,由于定义的是一个子类,继承了Tiny.react父类2. 可以在子类中,调用父类,在子类中传递props给父类,3. 在父类在执行this.props.name = props4. 既然子类继承父类,那么父类中有props,子类也就有了props5. 所原创 2021-02-08 14:06:49 · 543 阅读 · 0 评论 -
React Fiber流程
Fiber的执行流程jsx调用render方法转换react.createElement方法返回Virtual DOM节点render方法 向任务队列添加任务,就是通过vdom构建Fiber对象,通过createTaskQueue方法添加任务使用requestIdleCallback()方法在浏览器空闲执行任务,接收performtask参数,也是一个方法在performTask方法中调用workLoop方法,是专门调度任务的逻辑先判断任务是否存在,判断SubTask是否有值,没有调用原创 2021-02-08 14:06:17 · 201 阅读 · 0 评论 -
reactc key 属性实现
reactc key 属性实现在 React 中,渲染列表数据时通常会在被渲染的列表元素上添加 key 属性,key 属性就是数据的唯一标识,帮助 React 识别哪些数据被修改或者删除了,从而达到 DOM 最小化操作的目的。key 属性不需要全局唯一,但是在同一个父节点下的兄弟节点之间必须是唯一的。也就是说,在比对同一个父节点下类型相同的子节点时需要用到 key 属性。1 节点对比实现思路是在两个元素进行比对时,如果类型相同,就循环旧的 DOM 对象的子元素,查看其身上是否有key 属性,如果有原创 2021-02-08 14:05:32 · 135 阅读 · 0 评论 -
react ref的实现
react ref的实现react中可通过ref获取对应的dom对象实现思路是在创建节点时判断其 Virtual DOM 对象中是否有 ref 属性,如果有就调用 ref 属性中所存储的方法并且将创建出来的DOM对象作为参数传递给 ref 方法,这样在渲染组件节点的时候就可以拿到元素对象并将元素对象存储为组件属性了。// createDOMElement.jsif (virtualDOM.props && virtualDOM.props.ref) { virtualDOM.原创 2021-02-08 14:04:59 · 150 阅读 · 1 评论 -
react setState的实现
react setState的实现实现类组件的更新组件进行更新需要调用setState方法在react中的Component中定义setState方法,接收state作为参数,state就是在调用时候传入的状态子类调用setState时候,setState里的this指向子类的实例对象,使用this.state修改的其实是子类的state值使用Object.assign方法将传入的state和原有的state进行合并合并完state之后,需要更新页面中的状态,使用this.render获原创 2021-02-08 14:04:27 · 216 阅读 · 0 评论 -
react 更新节点流程
react 更新节点流程在进入页面,调用react.render方法接收jsx代码并且显示在界面中实现界面更新,需要拿新节点和旧节点进行对比,找出差异部分,更新到页面中,实现页面的最小 化更新在创建节点时候,新添加一个属性存储对应的virtual dom,在diff中,判断旧的virtual dom是否存在,节点类型相同时候如果不是旧节点,根据type推断是文本还是元素,文本使用updateTextNode更新内容,元素使用updateNodeElement方法进行更新节点,内部删除原创 2021-02-08 14:03:49 · 704 阅读 · 0 评论 -
react首次渲染
全局暴露render方法react的jsx第一次渲染在js中调用将jsx和dom的根节点传入render方法中render根据传入的元素调用diff方法中diff方法先判断是不是老节点,判断老节点依据是否含有_virtualDOM,根据不是老节点判断type类型调用createDOMElement创建对应的真实dom,第一次传入的话调用mountElement方法,mountElement使用isFunction方法区分渲染的是组件还是节点,组件调用mountComponent方法,节点调原创 2021-02-08 14:03:09 · 537 阅读 · 0 评论 -
React Fiber
React Fiber是对核心算法的一次重新实现React Fiber的方式 破解JavaScript中同步操作时间过长的方法其实很简单——分片。把一个耗时长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占,其他任务依然有运行的机会。ReactFiber把更新过程碎片化,执行过程如下面的图所示,每执行完一段更新过程,就把控制权交还给React负责任务协调的模块,看看有没有其他紧急任务要做,如果没有就继原创 2021-02-05 17:44:35 · 237 阅读 · 1 评论 -
react Virtual DOM以及diff方法
Virtual DOM 及 Diff 算法1. JSX 到底是什么使用 React 就一定会写 JSX,JSX 到底是什么呢?它是一种 JavaScript 语法的扩展,React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML,但它确实是 JavaScript 。在 React 代码执行之前,Babel 会对将 JSX 编译为 React API.<div className="container"> <h3>Hello React</h3>原创 2021-01-31 18:10:58 · 228 阅读 · 0 评论 -
React 基础
1. React 介绍React 是一个用于构建用户界面的 JavaScript 库,它只负责应用的视图层,帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面,它是一种 JavaScript 语法扩展。在 React 代码执行之前,Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语法糖,让开发人员使用更加舒服的代码构建用户界面。利用 JSX 编原创 2021-01-31 15:56:36 · 135 阅读 · 0 评论