上一篇文章介绍了我的前端数据源治理思想，【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】其中提到了非常重要的数据源的概念。在推动本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】团队按照这个数据源思想进行实施时，受到了著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。不小的阻力。除了团队成员对架构、业务特性原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。对技术的要求、长远眼光等的认识不足外，还【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。有一点就是分层设计对直来直去的前端开发很未经授权，禁止复制转载。【本文首发于唐霜的博客】难接受，因为要写多个文件更多代码，而且分【作者：唐霜】原创内容，盗版必究。散在不同处的代码看上去都是在为一件事服务原创内容，盗版必究。【版权所有，侵权必究】。

在前端很少讲一些编程原则，所谓SOLID本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。在前端根本行不通，但是，想要写出健壮的，未经授权，禁止复制转载。【作者：唐霜】长期可持续维护的代码，就必须去理解这些在著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】其他编程领域通用的设计模式、原则、范式。

多态，在数据源上其实是比较容易体现的。听【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。上去比较难理解。我认为前端应用因为和数据【转载请注明来源】【原创不易，请尊重版权】请求绑的太死，导致你需要通过处理异步（也【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。就是Promise的resolved）来未经授权，禁止复制转载。原创内容，盗版必究。解决更新界面的问题。比如angular里著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】面，你必须得注入$q来触发界面更新，在r本文作者：唐霜，转载请注明出处。【作者：唐霜】eact里面，你得随时随地调用setSt【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ate来更新。这使得异步动作被死死的绑定本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。在组件中，而且你必须按照异步思维撰写组件【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net。但在我看来，特别是react中，我们应【版权所有】唐霜 www.tangshuang.net【作者：唐霜】该是同步思维，我们的天上会有一个神在观察本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net世界的变化，然后将世界刷新成新的模样。对【原创内容，转载请注明出处】未经授权，禁止复制转载。于身处这个世界的人，我们不需要也不能够观原创内容，盗版必究。【作者：唐霜】察这个变化，这个变化在世界之外，就像这个本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。变化在组件之外，不应该在组件内部一样。而原创内容，盗版必究。【未经授权禁止转载】直接在组件内部写异步请求就是企图僭越去做本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】神该做的事情，例如下面的代码：

function SomeComponent() {
  const [data, setData] = useState({})

  useEffect(() => {
    fetchData().then((data) => {
      setData(data)
    })
  }, [])

  return (
    <div>{data.title}</div>
  )
}

虽然代码本身没有错，但是这种写代码的意图【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】是有问题的，这里的思维是我一进来默认是{本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net}，然后我发起一个请求，这个请求一定会从【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net外面得到一个数据，我要用这个数据出发一个【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】变化。

这个思路是怎样的？这个思路一定是有一个动【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net线的，先怎样，好暂时结束，再怎样，结束。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。也就是说你在这个函数里面，你是需要自己去本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net想象一种难以理解的流动性的。

我们来看看另一种思维：

function SomeComponent() {
  const [data] = useData(someSource)

  return (
    <div>{data.title}</div>
  )
}

这里，这个组件从实际行为上，也会和前面一转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net样被渲染两次，但是思路完全变了。对于我这【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】个组件而言，我的动线是，拿数据，渲染，结【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。束。虽然会被渲染两次，但是无论被渲染多少【未经授权禁止转载】原创内容，盗版必究。次，都是这样的一个思维方式。

你一看代码，心想，这有什么难的，不就是封【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。装了一个hook函数吗？

但是你得到这个结论的时候，实际上是从结果【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】反推你想要的解释。而真正理解了的人，他一【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。定是从自己的思维开始出发，最终得到了这样著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】的结果，实际上是完全不同的两种思维方式。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net即使你通过“封装”反推出“和我写的两次渲【未经授权禁止转载】本文作者：唐霜，转载请注明出处。染没有差别“，也无法否定别人”拿数据，渲本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。染，结束“这么一条动线的思维是更优秀的。

如果你能理解这一点，那么，我们就可以把这本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net个问题想的更深。

数据从哪里来？一定是通过ajax请求吗？【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。如果哪一天换成rpc呢？

数据的来源是多态，但是对于我们上面这个组未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。件本身而言，我并不需要为每一种情况去做区【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。分，我只需要统一一种处理方式即可，所以的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。数据来源，对我来说，我并不需要关心，我只【原创内容，转载请注明出处】【版权所有，侵权必究】是用它而已，而且我也知道这个data.t【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。itle就是我需要的。面对这个多态，我们【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】最好是用ts去写出它的接口，然后有不同的【作者：唐霜】本文版权归作者所有，未经授权不得转载。数据源，也就是我上面传入的someSou转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。rce对象来具体实现，我们后续可以传入另【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】一种实现someSource2，但是这并【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】不影响我们任何的代码逻辑，只是在some【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。Source2自己内部实现时，稍有不同而【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】已。

有了这样的理解，我相信，逐渐的，你也会尝【作者：唐霜】【版权所有，侵权必究】试自己去寻找一种在前端和数据源之间，可以本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。有效将不同数据源进行管理起来的方式。比较未经授权，禁止复制转载。【原创不易，请尊重版权】幸运的是，我走的比较快一些。