7、时间切片
根据浏览器的帧率,计算出时间切片的大小,并结合当前时间计算出每一个切片的到期时间。在每次while循环前,判断当前时间切片是否到期,若已到期,则结束循环,让出主线程的控制权。
8、合成事件
React 的事件系统沿袭了事件委托的思想, 实现了对所有事件的中心化管控
当事件在具体的 DOM 节点上被触发后,最终会冒泡到 document 上,document 上所绑定的统一事件处理程序会将事件分发到具体的组件实例。
在分发事件之前,React 首先会对事件进行包装,把原生 DOM 事件包装成合成事件。
在底层抹平了不同浏览器的差异,在上层面向开发者暴露统一的、稳定的、与 DOM 原生事件相同的事件接口。
在 React 17 中,事件的中心化管控被转移到了每个组件的容器 DOM 节点中
document 是整个文档树的根节点,操作 document 带来的影响范围太大,这会使事情变得更加不可控
9、React 性能优化
1.使用 shouldComponentUpdate 规避冗余的更新逻辑: React 组件会根据 shouldComponentUpdate 的返回值,来决定是否执行该方法之后的生命周期,进而决定是否对组件进行 re-render(重渲染)。在 React 中,只要父组件发生了更新,那么所有的子组件都会被无条件更新。
使用 shouldComponentUpdate 来避免不必要的更新,避免无意义的 re-render 发生, 这是 React 组件中最基本的性能优化手段,也是最重要的手段。
2.PureComponent + Immutable.js: PureComponent 内置了对 shouldComponentUpdate 的实现:PureComponent 将会在 shouldComponentUpdate 中对组件更新前后的 props 和 state 进行浅比较,并根据浅比较的结果,决定是否需要继续更新流程。
PureComponent 浅比较带来的问题是对“变化”的不能精准判断。Immutable.js将数据内容的变化和数据的引用严格地关联了起来,使得“变化”无处遁形。
3.React.memo 与 useMemo: React.memo:“函数版”shouldComponentUpdate/PureComponent。和 shouldComponentUpdate 不同的是,React.memo 只负责对比 props,而不会去感知组件内部状态(state)的变化。React.memo 控制是否重渲染一个组件,而 useMemo 控制是否重复执行组件内某一段逻辑。
React.memo :组件级别,无法感知函数内部状态
useMemo :组件内
10、前端路由
在前端技术早期,一个 URL 对应一个页面,如果要切换页面,那么必然伴随着页面的刷新。
Ajax 出现后,产生了SPA(单页面应用),不刷新页面即可更新页面内容。在内容切换前后,页面的 URL 都是一样的,无法确定当前的页面“进展到了哪一步”。
前端路由可以在仅有一个页面的情况下,“记住”当前走到了哪一步,前进、后退触发的新内容,都会映射到不同的 URL 上去。此时即便刷新页面,当前的 URL 也可以标识出他所处的位置,内容也会丢失。
解决思路:拦截用户的刷新操作、感知 URL 的变化
hash 模式:通过改变 URL 后面以“#”分隔的字符串( URL 上的哈希值),让页面感知到路由变化
history 模式: 浏览器的 history API 赋予了页面间的跳转能力,前进、后退、修改、新增。pushState 和 replaceState 两个 API,允许对浏览历史进行修改和新增
11、Redux 中间件
中间件的执行时机:action 被分发之后、reducer 触发之前;
中间件的执行前提:即 applyMiddleware 将会对 dispatch 函数进行改写,使得 dispatch 在触发 reducer 之前,会首先执行对 Redux 中间件的链式调用。
和普通 Redux 调用最大的不同就是 dispatch 的入参从 action 对象变成了一个函数
redux-thunk 在拦截到 action 以后,会去检查它是否是一个函数。若 action 是一个函数,就会执行它并且返回执行结果;若 action 不是一个函数,直接调用 next。
12、redux与mobx的区别?
redux 将数据保存在单⼀的store中,mobx将数据保存在分散的多个store中
redux 需要⼿动处理变化后的操作;数据变化后⾃动处理响应的操作
redux 使⽤不可变状态,状态是只读的,不能直接去修改它,⽽是应该返回⼀个新的状态,同时使⽤纯函数;mobx中的状态是可变的,可以直接对其进⾏修改
mobx ⽐较简单,更多的使⽤⾯向对象的编程思维;redux会⽐较复杂,函数式编程思想不是那么容易,同时需要借助中间件来处理异步和副作⽤
mobx中有更多的抽象和封装,调试会⽐较困难,同时结果也难以预测;⽽redux提供能够进⾏时间回溯的开发⼯ 具,同时其纯函数以及更少的抽象,让调试更加容易
参考: