最新博客 

介绍 React 中的 re-render 的概念以及如何防止 re-render 的方法。

前言​

vue 中的 diff 算法是基于 vnode 实现的，vnode 简单来说就是将 dom 结构用 js 对象来表示，方便我们进行处理。

vnode 的部分属性如下：

export interface VNode {
  type: VNodeTypes // VNode 类型
  props: VNodeProps | null
  key: string | number | null // 用于 diff
  children: VNodeChildren // 子节点

  // 性能优化
  shapeFlag: number
  patchFlag: number
}

vuex 介绍​

我们先来介绍一下 vuex 中的一些概念

我们根据 vuex 的工作流程来说

• 改变state的唯一途径就是提交mutations
• 如果是异步的，就派发 (dispatch)actions，其本质还是提交mutations
• 提交mutations后，可以动态的渲染组件Vue Components

觉得是不是少了什么，没错，就是getters 下面实现的时候会说

Redux 的核心思想​

Redux 是 JavaScript 状态容器，能提供可预测化的状态管理。

这个问题是一个老生常谈，但非常考验知识的广度和深度的问题，我在这总结一下笔记。

流程​

先上一张 chrome 浏览器渲染流程图，可以在 performance 面板查看

分为以下几个步骤：

1. parse HTML：解析 HTML 文本构建 DOM Tree
2. Recalc Styles：样式计算，计算出每个 DOM 节点的样式
3. Layout：计算可见元素几何信息 （位置、尺寸） 生成布局树（Layout Tree），也就是我们常说的重排 reflow
4. update layer tree：对节点进行分层，建立图层树（Layer Tree）
5. paint：为每个图层生成绘制列表，并提交到合成线程，合成线程将图层分图块，并栅格化将图块转换成位图
6. Composite Layers：在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上

nextTick 的作用​

官方的介绍是

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

在 vue 中数据发生变化后，dom 的更新是需要一定时间的，而我们在数据更新之后就立即去操作或者获取 dom 的话，其实还是操作和获取的未更新的 dom ，而我们可以调用 nextTick 拿到最新的 dom

关于 node 入门的一篇课件

按响应流程和简化版源码来分析响应式系统