首页
AI Coding
数据标注
NEW
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
min-react 源码实现
Holin_浩霖
创建于2022-02-05
订阅专栏
使用js实现 min-react ,源码实现
暂无订阅
共12篇文章
创建于2022-02-05
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
mini-react 实现function 组件
代码结构如下: React.js 作用 render() : 渲染入口,初始化根 Fiber 并启动调度 createElement() : 将 JSX 转换为虚拟 DOM 对象 workLoop()
🌿 Fiber 异步渲染机制 & 时间切片原理详解
问题出发:为什么要拆任务? 当我们的页面节点非常多(比如成千上万个 DOM),如果你一次性去执行所有渲染逻辑: 浏览器就会卡死几百毫秒甚至几秒,用户看到的就是: 这是因为浏览器主线程是单线程的
React Fiber 架构的前世今生
一、背景:为什么需要 Fiber? 1. React 15 时代的问题 在 React 15 及更早版本中,渲染是同步、不可中断的。当 setState 触发更新时,React 会递归整棵虚拟 DOM
函数式编程实现简单的 Fiber 架构
此文档对应仓库路径:src/mini-react-fiber-v1。 覆盖文件: index.js createNestedFiberjs 目标:把 mini-react-fiber-v1 中的实现拆
mini-react 动态渲染复杂的DOM结构
目标 实现一个更通用的虚拟DOM创建和渲染机制,能够动态渲染复杂的DOM结构 分析 创建虚拟DOM元素的函数 createElement 和 createTextNodeElement 使用递归的方式
React为什么要使用JSX?
历史背景与核心问题 问:在JSX出现之前,前端开发面临什么痛点? 答: 主要有三大痛点: 痛点1:模板与逻辑分离的复杂性 JavaScript 问题: 模板和逻辑在不同文件中,难以维护 DOM操
React渲染原理学习笔记
React为什么要这么设计? 1. 什么是JSX? 问:JSX是什么?为什么React要使用它? 答: JSX是JavaScript XML的缩写,它是一种语法扩展,让我们能在JavaScript中编
mini-react - 实现fiber架构
Fiber架构是一种软件架构,主要用于构建和运行Web应用程序。它由Facebook开发,是一种基于JavaScript的框架。Fiber架构的核心思想是通过将应用程序逻辑划分为多个小单元。
mini-react - 实现任务调度
思考: 如何dom 树特别大一次性渲染导致渲染卡顿,该如何解决这个问题? 解决思路:把大任务拆分到多个task里面完成
mini-react 实现 - 使用jsx替换js
在前端领域无论是哪种语言最基础的是javascript,所以我们一般定义的文件都是js文件,那么如何使mini-react识别jsx语法呢?
mini-react 实现 - 在页面中呈现app
为什么学习mini-react要从在页面上渲染app开始?无论是Vue, React,还是angular,对于前端来说,从最最直观的视觉角度来说就是在页面如何呈现内的。
组件跨层级通信-Context
什么是Context? Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有。 在React的官方文档中,被归类为高级部分(Advanced)