本文翻译自:https://blog.syncano.io/reactjs-reasons-why-part-1/

书写javascript 更加简单

(⚠️js 中混用html 也一直是外界所诟病的一点,好不容易把前端三驾马车分开,现在又搅合在一起)

react 使用一个新的叫做JSX 的语法,它能够让你将html 混入javascript 中一起写。你还是可以编写纯的javascript ,
但是还是建议你尝试一下这种新的写法,因为这样的方式让你的组件更加容易继承。
在render 函数(注:react 声明周期中一部分)中使用html 而不需要拼接字符串的方式是非常令人完美的,经过一段时间以后,这样的编写方式也会变得更加的顺手。
react 用一种特殊的 JSX转换器 将html 片段变成一个个函数。

组件化是未来web 的发展方向

shadow DOM 和一些框架例如 PolymerJS 最近产出了很多的问题。
react 不使用Shadow DOM,相反地它赋予开发者创建自己的组件的能力,这个组件你可以重复利用,结合,构建你自己的核心内容。
我觉得这中方式是单向产出最好的一种方式,因为它使得定义和操作你自己的组件变得非常的简单。

react 性能非常优秀

react创建了自己的虚拟DOM,你自己的组件实际生存的地方。这种方式赋予了开发者极大的灵活性 和惊人的性能优势。
因为react 计算了哪些需要DOM中实施的变化,然后相应的更新DOM树。
利用这种方式,react 避免了大量的DOM操作的消耗,实现了性能非常优异的更新机制。

对于搜索引擎优化非常有效

对于Javascript 框架来说最到的问题是它们对与搜索引擎都不太友好。尽管有些已经有了一些改善,搜索引擎通常对于识别Javascript 较重的
应用有一些困难。
react 在这些框架中脱颖而出,你可以将react 运行在server 端,同时虚拟DOM将render 以后在浏览器端呈现的还是普通的web页面形式。
不需要PhantomJS 和其他技巧。

给予开发者“开箱即用”的开发工具

当你使用react 开发时,别忘了在chrome 浏览器中安装react developer tools 。它使得调试应用非常地简单。
在浏览器中安装好这个拓展工具后,你可以在浏览器的元素板块直接查看virtual DOM ,就像你浏览普通的DOM树一样。
相当得令人称奇,哈!

Facebook 团队在维护这个项目

react 目前是开源项目,这个项目最开始是在Facebook 内部发展起来的。随后,facebook 意识到他们创建了一个非常酷的东西,所以他们向世界共享这个项目。(非常伟大)
facebook 使用react,Instagram’s也使用react。很多很成功的项目都使用react。

额外福利:在手机app 上可以使用react native

一但学会了react ,web应用不是问题。手机开发也可以使用react native 快速上手,学会了一样,再去学别的变得非常容易。

参考文献:
1) shadow DOM : https://www.toobug.net/article/what_is_shadow_dom.html
(我的理解是你看得见,但是摸不着的DOM 元素,影子DOM,这名字起的真好!
可以自己创建,但是无法外部遍历。在react产生之前,是为了隔离框架与外部的代码环境而生的东西。
另:浏览器其实默默的做了非常多的事情。)

6大爱上react 的理由的更多相关文章

  1. 去大公司还是去小公司工作——要进大公司的核心部门(提升视野,锻炼技能),远离没真本事的小公司,要自我驱动 good

    去大公司还是小公司工作?这个问题问大多数 IT 人都会选择前者.如果换一个问法,去大公司还是去初创公司(Startup)工作?或许有极小一部分人能改变一下决定 对于 IT 人来说,选择到大公司工作的理 ...

  2. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  3. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

  4. React对比Vue(02 绑定属性,图片引入,数组循环等对比)

    import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...

  5. react学习笔记(1):从前后端分离到项目部署

    我来到现在这家公司有一年多的时间,一直做的是财政系统相关的产品,前端的技术栈用的是传统的jQuery+bootStrap+requireJs,随着项目的开发,越来越多的弊病凸显出来. 首先是前后端的代 ...

  6. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  7. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  8. React.js/HTML5和iOS双向通信

    最近,我使用WKWebView和React.js进行双向通信,自己写了React.js嵌入到Native中. Native操作Web,通过两种方式传值 第一种,通过JS传值给Native 通过这种方式 ...

  9. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

随机推荐

  1. Hive-1.2.1_04_DML操作

    Hive官方文档:Home-UserDocumentation Hive DML官方文档:LanguageManual DML 参考文章:Hive 用户指南 1. Loading files into ...

  2. Linux 小知识翻译 - 「版本号」的命名方式

    包括OS,所有的软件都有版本号信息.一般来说,版本号的增大表示软件的功能增强了或者修正了一些Bug,也就是表示软件更新了. 版本号的命名方式没有统一的标准.每种软件都不一样. 大部分情况下,版本号以「 ...

  3. January 21st, 2018 Week 3rd Sunday

    Your attitude, not your aptitude, will determine your altitude. 决定你人生高度的,不是你的才能,而是你的态度. Actually, at ...

  4. January 06th, 2018 Week 01st Saturday

    In life the most interesting things tend to happen when you are on your way to do something else. 生活 ...

  5. HTTP数据组织方式

    HTTP网络传输中的数据组织方式有三种方式: 1.HTML方式 2.XML方式 3.JSON方式     XML介绍:XML称为可扩展标记语言,它与HTML一样,都是SGML(标准通用标记语言) XM ...

  6. c++11の的左值、右值以及move,foward

    左值和右值的定义 在C++中,可以放到赋值操作符=左边的是左值,可以放到赋值操作符右边的是右值.有些变量既可以当左值又可以当右值.进一步来讲,左值为Lvalue,其实L代表Location,表示在内存 ...

  7. go标准库的学习-crypto/md5

    参考:https://studygolang.com/pkgdoc 导入方式: import "crypto/md5" md5包实现了MD5哈希算法,参见RFC 1321. Con ...

  8. Linux Kernel 4.21已更新:优化AMD 7nm Zen2架构

    导读 AMD 7nm Zen2处理器预计将于明年第一季推出,采用下一代7nm EPYC. Linux Kernel 4.21已经更新,以优化AMD 7nm EPYC Rome(罗马)处理器. AMD ...

  9. Linux x64 -- 内核程序(驱动程序)读取任意进程数据实现

    四级页表结构 现在的64位Linux系统中,并没有使用全部的64位地址空间,而是使用其低48位,高16位并没有使用. 其中 39至47这9位用于索引PGD(page global directory) ...

  10. 稳压二极管&TVS二极管

    稳压二极管 稳压二极管利用的特性是:二极管被反向击穿之后,随着电流的变化,稳压二极管两端电压维持不变的特性: 普通二极管反向击穿后就坏了,但是稳压二极管却可以恢复,而且在被击穿后处在正常的工作状态: ...