Atitit.web ui  组件化 vs  mvc

  组件化  与 mvc并不矛盾。。单双方适用的地方有所不同。。

React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件

每个组件都是自我继集成html,css,js的。。

在每一个组件的内部,才使用mvc分离core和ui。。

作者::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ) 汉字名:艾龙,  EMAIL:1466519819@qq.com

转载请注明来源: http://www.cnblogs.com/attilax/

对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

React认为一个组件应该具有如下特征:

(1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

(2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

(3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

许多框架使用Handlebars或Mustache等模板引擎来处理视图层。但React相信视图和控制器应该相互依存在一起而不是使用第三方模板引擎

React不孤立双向绑定,儿angru孤立。。

React的问题与缺点:

资料少

可视化模板不容易得到dw的支持。。作为模版,得到类似dw 这类可视化Html ide的支持的是必须的。。

Atitit.web ui  组件化 vs  mvc的更多相关文章

  1. atitit.React   优缺点 相比angular react是最靠谱的web ui组件化方案了

    atitit.React   优缺点 相比angular react是最靠谱的web ui组件化方案了 1. React的组件化才是web ui部件的正确方向1 1.1. 组件化集成html ,css ...

  2. atitit.web ui 结构建模工具总结

    atitit.web ui 结构建模工具总结 1. 王者.dreamweaver 1 2. Frontpage/SharePoint Designer(FrontPage) 2010... 1 3.  ...

  3. UI组件化介绍

    组件化相关概念 怎么理解组件化开发 https://www.cnblogs.com/zs-note/p/7093323.html 前端组件化框架之路 https://blog.csdn.net/hap ...

  4. 前端web应用组件化(一) 徐飞

    https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...

  5. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  6. 推荐使用Tiny Framework web开发UI组件

    TINY FRAMEWORK 基于组件化的J2EE开发框架,from:http://www.tinygroup.org/   名字 Tiny名称的来历 取名Tiny是取其微不足道,微小之意. Tiny ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  9. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

随机推荐

  1. Entity Framework 6 Recipes 2nd Edition(13-4)译 -> 有效地创建一个搜索查询

    问题 你想用LINQ写一个搜索查询,能被转换成更有效率的SQL.另外,你想用EF的CodeFirst方式实现. 解决方案 假设你有如下Figure 13-6所示的模型 Figure 13-6. A s ...

  2. C# - 缓存OutputCache(一)基础配置

    本文是通过网上&个人总结的 1. 介绍 OutputCache输出缓存是复制ASP.NET页面,保存在内存的机制.这种行为有助于提高性能,通过返回的缓存达到网页及时响应的目的,减少客户机器需要 ...

  3. xcode8.1 插件失效的问题

    1,查看 Xcode 插件安装目录 ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins 鼠标点一下桌面, command+shi ...

  4. Android笔记——Bundle类的作用

    Bundle类用作携带数据,它类似于Map,用于存放key-value键值对形式的值.相对于Map,它提供了各种常用类型的putXxx()/getXxx()方法,如:putString()/getSt ...

  5. Eclipse中文语言包安装和设置中文Doc

    1.安装中文语言包 Eclipse所有的扩展功能都是以插件的形式添加上去的,安装插件时有多种形式,下面是比较常用的两种: 直接将插件中的文件复制到Eclipse对于的目录中.优点是安装时很方便,缺点是 ...

  6. C# 复制PDF页面到另一个PDF文档

    C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...

  7. android 视频录制 混淆打包 之native层 异常的解决

    原文地址:http://www.cnblogs.com/linguanh/    (滑至文章末,直接看解决方法) 问题起因: 前5天,因为项目里面有个类似 仿微信 视频录制的功能, 先是上网找了个 开 ...

  8. 《PDF.NE数据框架常见问题及解决方案-初》

    <PDF.NE数据框架常见问题及解决方案-初> 1.新增数据库后,获取标识列的值: 解决方案:    PDF.NET数据框架,已经为我们考略了很多,因为用PDF.NET进行数据的添加操作时 ...

  9. Oracle 故障处理总结

    Oracle 故障处理总结(更新中..) 各类数据库问题描述模板 记录一则ORA-00054,ORA-00031解决过程 记录一则ORACLE MOVE操作后重建索引过程被强制中断导致的ORA-810 ...

  10. 探寻<a>中的href和onclick

    一.知识点: onclick的方法参数必须加引号 href跳转参数有长度限制 href中执行js会把encodeURIComponent()编码之后的东西自动解码,有时会影响参数传递 a标签中的onc ...