一种基于依赖收集的最小化更新组件技术-唐霜

最近被react的性能问题折腾惨了，在实著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】际项目开发中，组件的深度可能很深很深，而未经授权，禁止复制转载。【未经授权禁止转载】react的更新机制本质上还是一种全量的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】脏检查，也就是从当前组件开始，把它作为根【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。节点的整棵树都检查一遍，并且在这过程中做【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。diff，中间涉及一些算法，这些算法说来【原创内容，转载请注明出处】【转载请注明来源】说去还是因为它存在性能问题，需要靠复杂的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net算法来迎合react这种脏检查带来的坏处【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。。那么，有没有一种办法，可以避免这种脏检【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net查，也就是在整棵树中，我只需要更新其中一本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。个节点即可。Mobx提供了一种创新的方法【未经授权禁止转载】【未经授权禁止转载】，就是对组件所需要的数据进行收集，只有当【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net这个数据发生变化的时候，这个组件才需要重未经授权，禁止复制转载。【转载请注明来源】新渲染。这里面还涉及到整个项目中所有组件【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。本身的设计问题。本文尝试基于mobx的这【作者：唐霜】【原创不易，请尊重版权】种思路，提出一种基于依赖收集的最小化更新【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。组件技术。

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【本文首发于唐霜的博客】

React组件性能优化的途径本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

单纯从优化的途径出发，React组件有以【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】下几种途径可以让开发者进行性能优化：

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【作者：唐霜】【原创不易，请尊重版权】

PureComponent【访问 www.tangshuang.net 获取更多精彩内容】

【访问 www.tangshuang.net 获取更多精彩内容】

【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

shouldComponentUpdat著作权归作者所有，禁止商业用途转载。【本文受版权保护】e

未经授权，禁止复制转载。

原创内容，盗版必究。

【转载请注明来源】

React.memo原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

其中PureComponent实际上内置著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。了shouldComponentUpda【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】te的特殊逻辑。React.memo针对【未经授权禁止转载】未经授权，禁止复制转载。functional组件，本质上还是差不未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。多，通过对比props来决定是否要更新当著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net前组件。但是注意，shouldCompo转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】nentUpdate可以控制this.s【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nettate的变化引起更新，而React.m本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。emo无法控制useState带来的更新未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

响应式本质【原创不易，请尊重版权】

无论是vue还是react，都是响应式视转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。图框架，通过修改数据来达到改变界面的效果【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】。响应式是现代前端框架的基本要求。对于开【版权所有，侵权必究】原创内容，盗版必究。发者而言，应该透过响应式的表象，看到它的【未经授权禁止转载】未经授权，禁止复制转载。本质——观察者模式/订阅发布模式。vue【转载请注明来源】著作权归作者所有，禁止商业用途转载。通过对数据劫持，在发生数据变化时，执行劫【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】持代码中的触发逻辑，触发更新机制。rea【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ct则是在setState等接口被调用时【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】，触发更新机制。它们本质上都是通过一个方【版权所有】唐霜 www.tangshuang.net【作者：唐霜】式触发更新。

【作者：唐霜】【转载请注明来源】【本文受版权保护】未经授权，禁止复制转载。【本文首发于唐霜的博客】

基于这一理解，我们再看redux，它是一【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net个状态管理器，在和react结合使用时，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本质上，它也是订阅发布器。只是库的作者封【本文受版权保护】原创内容，盗版必究。装了store.subscribe/st【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ore.dispatch方法，让很多开发【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。者只看到状态的变化，没有看到订阅发布的过本文作者：唐霜，转载请注明出处。【作者：唐霜】程。这实际上启发我们理解一个核心问题：单向双向数据流也好，immutable或【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netmutable也好，不是react或vu转载请注明出处：www.tangshuang.net【未经授权禁止转载】e界面更新机制的必要条件，必要条件是触发过程，也就是说，无论是哪【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。种数据流或哪种数据形态，只要数据变化之后著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，能够触发框架的更新机制，就可以完成更新【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net。

这有什么用呢？本文作者：唐霜，转载请注明出处。

我们不需要redux或vuex，我们可以未经授权，禁止复制转载。【版权所有，侵权必究】用mobx了。Mobx和前两者都有巨大的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。不同，你可以把它当作一个状态管理器，但是【版权所有，侵权必究】【作者：唐霜】，本质上，它不是专门为前端框架们特制的一未经授权，禁止复制转载。【转载请注明来源】个状态管理器，它是一个通用的数据模型生成原创内容，盗版必究。【版权所有，侵权必究】器。当你需要对一个物品/对象进行描述时，【本文首发于唐霜的博客】【转载请注明来源】可以用Mobx对该物品/对象进行描述，有【本文受版权保护】原创内容，盗版必究。什么属性，什么方法，都可以定义在Mobx本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的模型上。而mobx提供了多个方法，可以【版权所有】唐霜 www.tangshuang.net【本文受版权保护】帮助开发者对这些属性和方法，做更加深入和【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】魔幻的控制，比如让一个属性的值依赖另外一本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。个属性的值，被依赖属性的值发生变化时，该转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】属性的值也自动变化。所以，抛开前端框架来著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。讲，它只是一个用于创建数据的模型生成器。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。另外，你可以通过它的接口，订阅模型示例上未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。属性的变化，至于界面的更新，则是把框架的【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】更新机制的触发接口丢到这个订阅函数中去。【原创内容，转载请注明出处】【转载请注明来源】如果你需要一个理解起来更简单的数据模型，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】可以尝试我写的模式库tyshemo(np【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】m i tyshemo)来做这个响应式的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】模型对象。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

因此，我们在react之外建立的响应式数【本文受版权保护】本文作者：唐霜，转载请注明出处。据体系，可以很轻松的按照观察者模式/订阅本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。发布模式接入到react中。比较简单的一转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。种方式：

// 假如 model 是一个可订阅的对象
function ReactComponent(props) {
  const [, setState] = useState({})

  useEffect(() => {
    const forceUpdate = () => setState({})
    model.subscribe(forceUpdate)
    return () => model.unsubscribe(forceUpdate)
  }, [])

  // ....
}

这是最最最简单的实现了，可以看到，我们已【作者：唐霜】【原创内容，转载请注明出处】经可以用一个react之外的可订阅对象完【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。成react的响应式更新，也就是说，当我【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】们在该组件外更新了model，那么该组件转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net就会被更新。如果我们在多个组件中都做了这【本文受版权保护】未经授权，禁止复制转载。个操作，那么这些组件都会随着model上【未经授权禁止转载】【版权所有，侵权必究】属性的变化而进行更新。

依赖收集【转载请注明来源】

简单说，依赖收集就是你可以知道在一段代码未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。执行过程中，哪些数据被读取了。这种能力在【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】vue的computed属性中体现的尽致原创内容，盗版必究。转载请注明出处：www.tangshuang.net淋漓，vue通过执行computed函数转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，知道该计算属性依赖了哪些其他的属性，那原创内容，盗版必究。【本文受版权保护】么当被依赖的属性发生变化时，计算属性的计本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。算器就会再执行一次，得到新的值。

怎么实现依赖收集呢？vue3使用了Pro本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。xy作为响应式的底层技术，我们简单看下P【未经授权禁止转载】【作者：唐霜】roxy的依赖收集的实现：

const deps = []

const data = new Proxy({ a: 1, b: 2 }, {
  get: (target, key) => {
    deps.push(key)
    return target[key]
  },
})

function collect(compute) {
  deps.length = 0
  const computed = compute()
  const computedDeps = [...deps]
  deps.length = 0
  return [computed, computedDeps]
}

// 试试看
const [computed, computedDeps] = collect(() => {
  const { a, b } = data
  return a + b
})

你看，通过对数据拦截，我们可以非常轻松的【本文首发于唐霜的博客】【作者：唐霜】知道一个计算过程，依赖了那些其他属性。

但是，【转载请注明来源】

有的情况下，在计算时，存在if̷【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】0;else分支，这会导致第一次运行co【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】mpute时，有些依赖并没有收集到。这是【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一个非常重要的点，我会在下面详细讲解我的【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。思路/理念。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【作者：唐霜】

基于依赖更新组件【版权所有，侵权必究】

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】未经授权，禁止复制转载。

function SomeComponent() {
  const { a, b } = model

  // 再做一次上面那段关于用setState订阅model更新组件的活
  // ...
}

如果按照我们最前面的那段代码来跑，那么m【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】odel上的任何可能引起更新的属性变化，未经授权，禁止复制转载。未经授权，禁止复制转载。都会触发该组件更新，但是，实际上，这个组著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。件，只依赖了model的a,b这两个属性著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，其他属性的变化，其实每必要触发本组件的【本文首发于唐霜的博客】原创内容，盗版必究。更新。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。未经授权，禁止复制转载。

在mobx中，提供了一个observer【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】的方法，使用如下：

【作者：唐霜】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

const TodoView = observer(({ todo }) => (
    <li>
        <input type="checkbox" checked={todo.finished} onClick={() => todo.toggle()} />
        {todo.title}
    </li>
))

用observer包裹一个组件，那么这个【关注微信公众号：wwwtangshuangnet】【作者：唐霜】组件内使用那些store上的属性，就可以原创内容，盗版必究。【原创不易，请尊重版权】被收集到。而正因为收集到了对应的属性，所著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。以，只有当store中的item.tod转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。o发生变化时，才更新该组件。而在使用到s【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】tore的其他组件中，可能又依赖其他属性【转载请注明来源】转载请注明出处：www.tangshuang.net。总之只有被依赖的属性发生变化时，这个组【转载请注明来源】【未经授权禁止转载】件才更新。

那要怎么去实现呢？我们只需要揉合前面关于转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net订阅和依赖收集的两段代码，就可以实现了。

未经授权，禁止复制转载。未经授权，禁止复制转载。【未经授权禁止转载】

const observe = (model) => (InsideComponent) => {
  return React.memo(function OutsideComponent() {
    const data = new Proxy(model, { ... })
    // ... 省略了一堆
    const [vdom, deps] = collect(() => <InsideComponent model={data} />)
    const hash = getObjectHash(deps)
    // .. 省略了一堆
    useEffect(() => {
      model.subscribe(deps, forceUpdate)
      return () => model.unsubscribe(deps, forceUpdate)
    }, [hash])

    return vdom
  }, () => true) // true表示不更新（它代表新旧props相等，所以不更新）
}

中间省略了collect等那些。使用Re【转载请注明来源】未经授权，禁止复制转载。act.memo直接隔绝了组件内部和外部【版权所有，侵权必究】【转载请注明来源】，外部的props不会导致组件内的函数执本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】行。总而言之，通过上面这样一通操作，被o转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。bserve柯里函数返回的组件，就是一个【作者：唐霜】转载请注明出处：www.tangshuang.net基于根据依赖model上的对应的属性发生原创内容，盗版必究。本文作者：唐霜，转载请注明出处。变化时才更新的组件。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

条件分支依赖本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】

在前文提到，如果在依赖收集时，如果存在i著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netf…else，在第一次收集时【本文首发于唐霜的博客】未经授权，禁止复制转载。，部分依赖没有被收集到，怎么办呢？这里，【版权所有，侵权必究】原创内容，盗版必究。我想说一个话题，就是，我们常常希望做到准转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。确和全面，但是实际上，大部分情况下，我们【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】只需要覆盖到大部分需求，再对特殊场景进行【版权所有，侵权必究】【本文受版权保护】处理即可。

【作者：唐霜】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

为什么要讲一些题外话呢？因为，我们在收集【本文首发于唐霜的博客】【本文首发于唐霜的博客】依赖时，我们不需要一次收集全部依赖。举个【本文首发于唐霜的博客】未经授权，禁止复制转载。例子：

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

function SomeComponent({ model }) {
  const { a } = model
  if (a) {
    const { b } = model
  } 
  else {
    const { c } = model
  }
  // ....
}

这个典型的例子，我们再去看看，你会发现，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net其中的a是关键，而不是b,c，当a为tr【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ue时，b的变化影响组件的更新，而c不会原创内容，盗版必究。【本文首发于唐霜的博客】影响更新。既然如此，为什么我们要订阅c的【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。变化呢？同样的道理，a为false的时候原创内容，盗版必究。未经授权，禁止复制转载。，我们也不需要订阅b的变化。如果我们把全转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net部依赖一次性订阅，那实际上反而会有浪费。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

基于这个场景，我们需要动态的订阅和弃订被【作者：唐霜】【作者：唐霜】依赖的属性。当当前收集到的依赖发生变化时【本文首发于唐霜的博客】未经授权，禁止复制转载。，组件函数会重新运行，运行时，我们会收集【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net到新的依赖，当我们发现新的依赖列表和旧的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。依赖列表不同时，就代表我们要重新订阅了。

【未经授权禁止转载】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

结语【作者：唐霜】

【转载请注明来源】【作者：唐霜】【本文受版权保护】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】

本文讲解了一种基于依赖收集的组件更新思路【原创不易，请尊重版权】【转载请注明来源】，在具体讲解中，没有把具体的细节都写出来【转载请注明来源】转载请注明出处：www.tangshuang.net，需要读者自己去实践补充。其中关键点在于本文作者：唐霜，转载请注明出处。【本文受版权保护】：

【本文受版权保护】未经授权，禁止复制转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

【作者：唐霜】

未经授权，禁止复制转载。

【转载请注明来源】

【原创不易，请尊重版权】

脱离react生态的订阅发布模式数据模型

【原创内容，转载请注明出处】

【原创不易，请尊重版权】

未经授权，禁止复制转载。

依赖收集的实现【原创不易，请尊重版权】

【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】

转载请注明出处：www.tangshuang.net

坦然面对条件分支的依赖收集未经授权，禁止复制转载。

【未经授权禁止转载】

【作者：唐霜】未经授权，禁止复制转载。原创内容，盗版必究。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【转载请注明来源】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】未经授权，禁止复制转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【本文受版权保护】【转载请注明来源】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【未经授权禁止转载】【本文受版权保护】

2021-05-12 5162

唐霜

一种基于依赖收集的最小化更新组件技术

React组件性能优化的途径本文版权归作者所有，未经授权不得转载。

响应式本质【原创不易，请尊重版权】

依赖收集【转载请注明来源】

基于依赖更新组件【版权所有，侵权必究】

条件分支依赖本文版权归作者所有，未经授权不得转载。

结语【作者：唐霜】

为价值买单，打赏一杯咖啡

声明

关于

生态