专栏首页web前端教室浅浅的聊一下React

浅浅的聊一下React

要写一个组件,当然是从需求开始设计它。但要组件的边界,就是这个组件,它的最多能做什么?一个通用的组件,它也是有倾向性的,不可能适合完全所有的情况,越重,就越不通用。组件这种东西从来都是需求推动的。并不是我们坐在那没什么事就想着写个组件出来。

这方面比较典型的就是React。它是Fackbook搞出来的,早期有人说,它比较适合FB的业务风格,但现在你们看国内业界用的也挺火。

从前端操作的老套路来讲,要搞前端首先就是操作DOM和一些控制&组件的状态,但这些东西又麻烦又不标准,要么用全局变量,要么用本地存储,要么用变量传来传去,很容易出错,难维护不好高度。

于是就有人想,算了,不零碎的搞DOM了,干脆在状态或数据变化的时候,整个的重新渲染UI算了,这样就不用总是手动控制各个开关,也省得用什么本地存储了。

但是操作DOM本身就是一个低效率的操作,一个小组件还可以,如果是一个1000行的大table,如果因为其中某个val的变化,就重新渲染整个表格,也是很难以接受的。所以就想办法只更新有变化的部分,于是Virtual Dom(虚拟DOM)出来了。就是有变化的时候比较一个,只更新不一样的地方。到了这一些,基本所有的都是组件了,因为组件了才好 new Obj嘛,才好操作。

这个时候,你会发现所有的DOM和DATA,还有相关的JS,都在某一个组件中了,整个网页好像只剩下body了,那干脆把HTML也拉进来算了,于是JSX出现了。什么是JSX,自己百度一下。然后UI这个V层的东西它的状态和装载的数据已经是天然的分隔了,所以状态和属性就出现了。到这一步的时候,你会发现React好像一直搞的都是MVC里面的V层?完全正确,网上有一种说法,你把整个React当成一个V层的模板引擎,当成一个可以使用JS特性的HTML模板,这就比较好理解了。

同学们在学习或练习组件化的时候,要时刻注意分清“交互逻辑和数据逻辑的区别”,我在这里提这一句,其实只是提醒你一下。

在之前的先行者课程之中,我经常强调,写组件要么是易于维护,要么是为了复用性。为了达到复用性,必须在组件内部JS中实现DOM、CSS、DATA的处理,和业务逻辑的抽像,而业务逻辑是带有行业性的。你不能想像一个电商的组件也能完全应用在QQ空间那种网站中,业务类型就不同。

JSX还有一点比较“逆”时代而动,这话怎么说呢。前端最早的MVC是HTML是M,CSS是V,JS是C,因为是静态页面嘛,所以HTML就变成M层了。你想想看,做一个页面需要三个文件,明明是一个东西却要分成三份。但JSX通过它不寻常的语法,把JS和HTML,和CSS都给搞到一起了,这也算是一种回归吧。

为什么标题叫浅浅的呢,因为我这刚刚看这本书,没法不浅

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 先行者计划群视频 每周一课 -- 什么是前端组件?(文字简版)

    image.png 在今天同学们发我的作业中,我给一个同学回复说,你这不是组件化,只是一个效果的实现。他问我,那还要什么呢?我不是特别理解。 今天咱们先聊一下,...

    web前端教室
  • web前端架构-新一次的尝试机会

    上一家电商公司烧了半年,有点烧不动了,我就赶紧跑了。 感谢上一家电商公司,让我有机会操刀搞了一次电商交易类网站的架构体验。 这次换了一家公司,做语音媒体的。就是...

    web前端教室
  • 【课堂笔记】先行者 3.0版本的vueJs课程的第三次课

    今次是vue课程的第3次课,内容大体上是: 一、事件; 在vue当中,事件是使用v-on指令,它可以定义一个方法来调用。 语法: <input v-on:...

    web前端教室
  • vue 组件使用中的细节点

    有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<...

    吴裕超
  • 解读京东的积木理论

    我之前在做业务需求的时候,很多的个性化需求并不能快速响应,实现后有时也很难保证系统的可阅读性。不过好消息是,我今年在做京东内容领域的组件化改造和能力输出,之前的...

    公众号_松华说
  • 组件化通用模式

    一、前言 模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变...

    企鹅号小编
  • 企业 SOA 设计(2)–组件化产品开发平台

    上一篇《企业 SOA 设计(1)–ESB 设计》中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成;另一方面...

    用户1172223
  • 先行者计划群视频 每周一课 -- 什么是前端组件?(文字简版)

    image.png 在今天同学们发我的作业中,我给一个同学回复说,你这不是组件化,只是一个效果的实现。他问我,那还要什么呢?我不是特别理解。 今天咱们先聊一下,...

    web前端教室
  • 【美团技术团队博客】前端组件化开发实践

    前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

    美团技术团队
  • 基于AngularJS的个推前端云组件探秘

    AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计...

    个推君

扫码关注云+社区

领取腾讯云代金券