React(从来如此便对么)
大家好,我卡颂。
这么多年大家习惯了使用JSX
描述UI
的React
。甚至部分场景下使用Vue
时也会选择JSX
而不是模版语法
。
好像一切就这么自然而然发生了。
然而,如果梳理历史的走向,模版语法
才是更自然的选择。接下来让我们看看React
选择JSX
背后的逻辑是什么?这是React
如今生态繁荣的关键因素么?
本文参考 HTML模板语言纵览模版语言简史 前端在有足够复杂度之前都是作为后端
MVC
框架的V
(view,即视图层)存在的,操作view
的主流方法是模版语法
。虽说
PHP
是最好的语言,但在早期PHP
更多是作为HTML
模版语言出现的,这也能从他的全称Hypertext Preprocessor
(超文本预处理器)中窥探出一丝端倪。文章图片
当浏览器请求网页时,服务端会执行模版中的
PHP
代码,将填充了变量值的HTML
会作为数据返回。比如如下模版,
name
会被填充为变量值:
很多服务端语言都实现了
PHP
风格的模版语法,比如:- 基于
Java
的JSP
- 基于
PHP
二次封装的smarty
- 基于
Ecmascript
的EJS
PHP
代码)会不可避免的和UI
(HTML
)混杂在一起。为了更好的展示
UI
,Github
的联合创始人Chris Wanstrath
开发了Mustache
。文章图片
这是一款重
UI
而轻逻辑的模版解析引擎,主流编程语言几乎都有各自的Mustache
实现。对于上面的例子,
Mustache
语法为:
My name is {{name}}
Mustache
能直观的表达UI
,但是缺失对逻辑的表达能力。更多模版语法
则尝试在UI
与逻辑之间寻找平衡。文章图片
比如
Django
的DTL
(Django Template Language)除了使用与Mustache
相同的 {{}}
语法表达UI
中的变量,还包含大量的常见逻辑,比如:if else
等流程控制逻辑
{% if condition %} ... display {% endif %}
for in
迭代逻辑
-
{% for user in userList %}
- {{ user.name }} {% endfor %}
- 过滤器
/* 将name转化为小写形式 */{{ name | lower }}
现如今,前端框架的
模版语法
中可以看到很多服务端曾使用的模版语法
的影子。如果你是个服务端工程师,看到如下
Vue
模版语法时想必会很亲切:my name is {{name | lower}}
所以,从后端
view
层分离并逐渐发展的前端框架,最符合直觉的方式就是采用模版语法
描述视图,比如09年出现的现象级前端框架angular
。文章图片
然而,
React
并不这么认为。用逆向思维思考 前端框架需要描述两样东西 ——
UI
与逻辑。模版语言
的底层逻辑是:即然前端使用HTML
描述UI
,那么我们就扩展HTML
语法,让他能描述逻辑。即:从
UI
出发,扩展UI
,描述逻辑。那我们换个思路,在前端用什么描述逻辑呢?
JS
。那我们能不能从逻辑(即
JS
)出发,扩展逻辑,让他能描述UI
,不就达到同样的效果吗?文章图片
这,就是
JSX
—— 一种JS
语法糖。后记 由于
JSX
以逻辑为起点,所以能轻松描述复杂的UI
变化。这使得React
社区的早期参与者可以快速实现各种复杂的基础库,丰富社区生态。对于前端框架的选型,一个重要的考量是:社区生态是否繁荣?
换言之,对于日常业务开发遇到的需求,能否很快速在社区中找到成熟的解决方案?
项目一旦确定了技术选型,中途再切换其他技术栈会付出极高成本。这进一步推动更多开发者参与社区建设,最终形成源源不断的正反馈。使得
React
长期霸榜工程师最愿意使用的前端框架。文章图片
这一切,从另辟蹊径发明
JSX
那一刻就埋下了伏笔。【React(从来如此便对么)】欢迎加入人类高质量前端框架研究群,带飞
推荐阅读
- 一个人的碎碎念
- 我从来不做坏事
- react|react 安装
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- 微习惯对待情绪和目标,如此能耐!
- 探探:她的世界一直有
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式