。

由于递归执行#xff0c;所以更新一旦开始#xff0c;中途就无法中断。

当层级很深时#xff0c;递归更新时间超过了

16ms#xff0c;用户交互就会卡顿。

对于特别庞…React

fiber架构

。

由于递归执行所以更新一旦开始中途就无法中断。

当层级很深时递归更新时间超过了

16ms用户交互就会卡顿。

对于特别庞大的DOM树来说reconciliation过程会很长(x00ms)在这期间主线程是被

占用的因此任何交互、布局、渲染都会停止给用户的感觉就是页面被卡住了。

网友测试使用React

V15当DOM节点数量达到100000时

同步渲染中如果某一部分出错整个渲染过程都会中断无法优雅地处理错误。

Fiber架构

在执行工作单元之前由浏览器判断是否有空余时间执行有时间就执行工作单元执行完成后继续判断是否还有空闲时间。

没有时间就终止执行让浏览器执行其他任务如

GUI

线程等。

等到下一帧执行时判断是否有空余时间有时间就从终止的地方继续执行工作单元,一直重复到任务结束。

2.要让终止的任务恢复执行就必须知道下一工作单元对应那一个。

所以要实现工作单元的连接就要使用链表在每个工作单元中保存下一个工作单元的指针就能恢复任务的执行。

requestIdleCallback

Api。

传入回调函数回调函数接收一个参数剩余时间如果有剩余时间那么就执行工作单元如果时间不足了则继续requestIdleCallback等到下一帧继续判断。

总结核心概念

允许将渲染任务分成多个小的单元每次处理一部分任务。

如果有更高优先级的任务如用户输入事件出现可以暂停当前任务先处理高优任务。

(3)**

Tree表示当前屏幕上渲染的内容。

Work-in-progress

Fiber

:引入了调度器Scheduler根据任务的类型和优先级分配资源。

高优先级用户输入如点击、键盘事件。

中优先级动画、过渡效果。

低优先级后台数据加载或非关键渲染。

Fiber优点

可中断更新长任务被分解成小任务减少主线程阻塞提升用户体验。

**优先级调度**任务可以根据优先级被调度和重新安排。

**增量渲染**允许逐步构建UI避免界面冻结。

**增强错误边界**错误可以被捕获避免整棵树崩溃。

**支持未来特性**如

Concurrent

会通过setState等方式触发更新。

把待更新的任务会先放入队列中,

requestIdleCallback

API如createElement、setAttribute、appendChild等。

渲染完成后React

节点都有指向父、子节点和兄弟节点的指针方便进行遍历和更新操作。

在构建完

Fiber

的基石”。

通过组件化将用户界面拆分成一个个独立的、可复用的组件。

一个按钮、一个表单、一个导航栏等都可以是一个组件每个组件都有自己的状态和生命周期通过组合不同的组件来构建复杂的应用界面很好维护。

其次在构建界面的时候在代码的写法采用声明式编程

DOM

会自动根据新的数据重新渲染组件。

那在这个组件渲染状态变化的过程React

React

是通过链表的数据结构来存储和管理的。

当组件首次挂载时React

会按照

命令式编程则侧重于描述具体的操作步骤和执行顺序即告诉计算机如何一步一步地完成任务。

声明式写法

document.createElement(div);const

heading

document.createElement(h1);heading.textContent

Hello,

document.createElement(p);paragraph.textContent

This

JavaScript.;container.appendChild(heading);container.appendChild(paragraph);//

将容器添加到页面中document.body.appendChild(container);

使用原生

元素并通过命令式的方式逐步操作这些元素的创建和组装过程。

这样的写法更注重详细的步骤和控制。

总体而言声明式的代码更直观和简洁而命令式的代码更灵活可以更精细地控制每个步骤。

state

在组件内部存储和管理数据专门用于存储组件的可变数据这些数据通常与组件的用户交互、业务逻辑等相关。

例如一个输入框组件的输入值、一个列表组件的列表数据等都可以存储在state中。

可以根据需要多次调用。

**constructor**本身并不直接存储数据而是用于初始化组件所需的数据和操作。

如绑定this指针等但它不会直接存储组件的业务数据。

在组件实例化时只被调用一次用于进行组件的初始化操作。

之后无论组件的状态如何变化constructor都不会再次被调用除非重新创建组件实例。

定义方式

的class定义需要继承React.Component或React.PureComponent并且必须用render方法来返回组件的

函数组件

通过this.state来存储和管理组件的内部状态。

具有丰富的生命周期方法。

函数组件

后可以使用useEffect等钩子函数来模拟类组件的部分生命周期行为。

使用场景

类组件

在处理复杂表单时类组件的状态管理和生命周期方法能更好地处理input表单数据的收集、验证和提交。

包括我的组件库搭建时候弹窗组件动画与过渡效果需要在组件挂载、更新或卸载时添加动画或过渡效果类组件的生命周期方法提供了更精细的控制。

函数组件

实时数据展示与交互如实时聊天应用中的消息列表组件使用函数组件结合useEffect和useState可以方便地监听消息数据的变化并实时更新界面。

受控组件和非受控组件

状态的控制通常通过onChange等事件来更新状态并且表单元素的值由状态来决定。

非受控组件

元素的值在需要时进行操作。

例如一个只有一个输入框的登录表单使用非受控组件可以快速完成功能开发。

React事件机制

事件触发当用户在浏览器中执行某个操作如点击按钮、输入文本等浏览器会触发相应的原生事件。

事件委托React

采用了事件委托的机制将所有的事件都绑定在组件的根元素上。

当事件发生时通过事件冒泡机制事件会从触发的目标元素向上冒泡到组件的根元素。

合成事件生成在事件冒泡到根元素的过程中React

会根据原生事件创建相应的合成事件对象并将其传递给事件处理函数。

事件处理函数执行React

会调用绑定在元素上的事件处理函数并将合成事件对象作为参数传递给它。

在事件处理函数中开发者可以根据需要进行相应的操作如更新状态、调用其他函数等。

react所有事件都挂在documnet对象上先触发真实dom事件再触发react事件最后执行document上挂载的事件。

Webpack

更高效地管理和维护项目中的每一个资源通过文件划分的形式实现模块化但是模块都是在全局中工作大量模块成员污染了环境模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。

就出现了命名空间方式规定每个模块只暴露一个全局对象window.moduleA这种方式也并没有解决第一种方式的依赖等问题。

再后来我们使用立即执行函数为模块提供私有空间通过参数的形式作为依赖声明。

但是仍然存在一些没有解决的问题。

我们是用过script标签在页面引入这些模块的这些模块的加载并不受代码的控制时间一久维护起来也十分的麻烦。

理想的解决方式是在页面中引入一个JS入口文件其余用到的模块可以通过代码控制按需加载进来。

除了模块加载的问题以外还需要规定模块化的规范如今流行的则是CommonJS、ES

2.使用一些高级的特性来加快我们的开发效率或者安全性比如通过ES6、TypeScript开发脚本逻辑通过sass、less等方式来编写css样式代码

3.开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

解决了解决模块依赖复杂的问题资源整合与优化问题代码压缩、文件分割开发流程优化问题热更新、自动化构建过程、跨平台环境兼容性的问题适配不同浏览器、支持多种环境

entry和output

[./src/index1.js,./src/index2.js],

entry改为对象key表示打包后输出文件的名字。

output

filenamexxxxpathreslove(__dirname,build)

配置模式mode

将浏览器不能识别的新语法转换成原来识别的旧语法做浏览器兼容性处理

js兼容性处理

解决babel只能转换部分低级语法的问题(如let/const/解构赋值…)引入polyfill可以转换高级语法(如:Promise…)

2.core-js

图片文件webpack不能解析需要借助loader编译解。

析添加2张图片:•

小图,

html中的图片url-loader没法处理它只能处理js中引入的图片

样式中图片不能处理html中img标签需要引入其他html-loader处理。

webpack构建流程

1.初始化参数。

获取我们在webpack.config.js文件配置的参数

2.然后开始编译初始化一个叫compiler的对象还有各种plugins插件这个时候插件会开始监听webpack构建过程中的事件。

3.然后webpack要确定入口一般是从entry开始开始解析文件构建ast语法树找抽依赖递归下去。

4.这个递归的过程根据文件类型和loader配置调用相应的loader对不同的文件做转换处理在找出该模块依赖的模块递归本操作。

Module

Chunk根据entry以及output等配置生成代码块chunk输出到文件系统

loader它是一个转换器将A文件进行编译成B文件比如将A.less转换为A.css单纯的文件转换过程。

plugin是一个扩展器它丰富了webpack本身针对是loader结束后它并不直接操作文件而是基于事件机制工作会监听webpack打包过程中的某些节点执行广泛的任务。

插件的范围包括打包优化代码压缩甚至可以重新定义环境中的变量。

官方文档说相对于loader转换指定类型的模块功能plugins能够被用于执行更广泛的任务比如打包优化、文件管理、环境注入等……

手写一个loader

loader它的功能是将输入的文本内容里的所有单词首字母都转换为大写形式。

loader

word.slice(1).toLowerCase();});return

\n;

变量声明但未赋值时访问对象不存在的属性时函数没有显式返回值时。

代码中出现地址、时间等字符串时需要使用常量代替。

在进行比较的时候吧尽量使用’,

!‘代替’,

原型对象每个函数在创建的时候都会生成一个属性prototype这个prototype指向一个对象这个对象就是函数的原型对象。

比如说

function

属性(又叫隐式原型属性)指向它构造函数的原型对象。

原型链又叫隐式原型链原型链的作用是用来查找对象的属性的如果一个属性A.name在当前的对象上没有找到就会沿着原型链向上查找直到找到这个属性或者到达原型链的顶端。

Object.prototype.__proto__的值是null

Object的hasOwnProperty()方法返回一个布尔值判断对象是否包含特定的自身非继承属性。

Object.prototype.__proto__设置为null就表示原型链在这里结束了再往上就没有其他对象可查找了这符合原型链的设计逻辑。

如果Object.prototype的__proto__指向了其他非null对象那么在进行原型链查找时就会继续沿着这个指向去查找可能会导致无限循环或者不必要的查找开销。