FOUC即无样式内容闪烁(Flash Of Unstyled Content),是在IE下通过@import导入css文件引起的。
IE会首先加载整个HTML文档的DOM,然后再导入外部的css文件。因此,在页面DOM加载完成到css导入完成之间,有一段时间页面上的内容是没有样式的,这段时间的长短跟网速和电脑速度都有关系
解决方法:在之间加入一个标签来导入css文件
预编译是程序编译前的准备阶段,预编译又称为预处理,预编译是做些代码文本的替换工作,把一个工程中的一部分代码预先编译好放在一个文件里。C 编译系统在对程序进行通常的编译之前,首先进行预处理。C/C++提供的预处理功能主要:宏定义、文件包含、条件编译。
shouldComponentUpdate 函数是 React 中的一个生命周期函数,用于在更新组件前检查数据是否有变化,从而决定是否重新渲染组件。
为了解决跨浏览器兼容性问题,React 会将浏览器原生事件(Browser Native Event)封装为合成事件(SyntheticEvent)传入设置的事件处理器中。
这里的合成事件提供了与原生事件相同的接口,不过它们屏蔽了底层浏览器的细节差异,保证了行为的一致性。
另外有意思的是,React 并没有直接将事件附着到子元素上,而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。
这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器,最终达到优化性能的目的
根据组件的职责通常把组件分为 UI 组件和容器组件
UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑
两者通过 React-Redux 提供 connect 方法联系起来
点击查看详情
shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom因为dom描绘非常消耗性能,如果我能在shouldComponentUpd方法中能够写出更优化的domdiff算法,可以极大的提高性能
Fiber把渲染更新过程拆分成多个子任务,每次只做一小部分,做完看是否还有剩余时间,如果有继续下一个任务;如果没有,挂起当前任务,将时间控制权交给主线程,等主线程不忙的时候在继续执行
即可以中断与恢复,恢复后也可以复用之前的中间状态,并给不同的任务赋予不同的优先级,其中每个任务更新单元为 React Element 对应的 Fiber节点
点击查看详情
Flux是一种架构思想或者说是设计模式,专门解决软件的结构问题。
它跟MVC架构是同一类东西,但是更加简单和清晰。
FaceBook Flux是用来构建客户端Web应用的应该架构。
利用单向数据流的方式来组合React中的视图组件。
更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速上手
Redux最主要的作用是用作状态的管理,即:集中式管理状态的javascript库。
两大核心:actions state
简言之,Redux用一个单独的常量状态树(state对象)保存这一整个应用的状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers),这样就可以进行数据追踪,实现时光之旅。
Html渲染过程
Css渲染过程
点击查看详情
点击查看详情
任务队列个数不同
浏览器事件环有 2个事件队列(宏任务队列和微任务队列)
NodeJS 事件环有 6 个事件队列
微任务队列不同
浏览器事件环中有专门存储微任务的队列
NodeJS 事件环中没有专门存储微任务的队列
微任务执行时机不同
浏览器事件环中每执行完一个宏任务都会去清空微任务队列。
NodeJS 事件环中只有同步代码执行完毕和其它队列之间切换的时候会去清空微任务队列
微任务优先级不同
浏览器事件环中如果多个微任务同时满足执行条件,采用先进先出。
NodeJS 事件环中如果多个微任务同时满足执行条件,会按照优先级执行
Vue Router 是一个基于 Vue.js 的官方路由器,致力于提供一个简单灵活的路由系统并实现页面切换时的无缝过渡效果。其底层原理主要是依托于 Vue.js 的能力来实现的。
Vue Router 主要由两部分组成,一个是路由映射表,另一个是路由组件。
路由映射表主要用于定义路由地址和相应的组件对应关系,并对每个路由进行配置。其中包括路由地址、路由组件、路由别名、路由重定向、路由嵌套和路由元信息等。
路由组件是指与路由地址相关联的组件,通过路由映射表中的配置,路由器会将当前路由地址和相关组件映射关联起来,并根据需要动态加载。
在使用 Vue Router 时,主要通过 Vue.js 提供的路由 API来实现其中包括 router-link 组件、router-view 组件和路由对象等
router-link 组件主要用于定义页面中的路由跳转链接,通过设置 to 属性来指定跳转到的路由地址。
router-view组件则用于定义页面中的路由视图,它会根据当前的路由地址动态加载相应的路由组件并显示出来。
而路由对象则提供了一些方法和属性,用于获取当前路由地址导航到新的路由地址、监听路由变化等操作,从而实现路由器的基本功能。
总之,Vue Router 的底层原理就是通过路由映射表和路由组件来实现页面路由和组件加载,并通过 Vue.is 提供的路由API 来实现路由器的基本功能。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态,
这个状态管理应用包含以下几个部分:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。(也就是所谓的MVVM)
传参通过路由来传参,然后将B组件的数据存入vuex中,每次加载都是从vuex中取数据