写点什么

React 有什么优势?这里有一份入门指南

  • 2019-10-29
  • 本文字数:2885 字

    阅读完需:约 9 分钟

React 有什么优势?这里有一份入门指南

当 React 刚开始红的时候,一直觉得 JSX 的设计思想极其独特,属于革命性的创新,它性能出众,代码逻辑却非常简单,所以,受到很多开发者的关注和使用,认为它可能是将来 Web 开发的主流工具。


React 最早起源于 Facebook 的一个内部项目,因为公司对现有的 JavaScript MVC 框架都不满意,就决定自己开发一套,用来架设 Instagram 的网站。开发完成后,发现这套东西很好用,就在 2013 年 5 月开源了。

React 优势在哪里呢?


首先:虚拟 DOM,在 DOM 树的状态需要发生变化时,虚拟 DOM 机制会将同一 Event loop 前后的 DOM 树进行对比,如果两个 DOM 树存在不一样的地方,那么 React 仅仅会针对这些不一样的区域来进行响应的 DOM 修改,从而实现最高效的 DOM 操作和渲染。


比如,我们修改了 DOM 树上一些节点或 UI 组件对应绑定的 state,React 会即刻将其标记为“脏状态”,在一个 Event loop 结束时,React 会计算得出 DOM 树上需要修改的地方及其最终的状态,并仅仅针对这些地方进行一次性的重新渲染。


好处显而易见,并非每修改一次组件的 state,就会重新渲染一次,而是在 Event loop 结束后做一次计算,减少冗余的 DOM 操作。另外 React 只针对需要修改的地方来做新的渲染,而非重新渲染整个 DOM 树,自然效率很高。


其次:组件可嵌套,而且,可以模版化 —— 其实在 React 里提及的“组件”,常规是一些可封装起来、复用的 UI 模块,可以理解为“带有细粒度 UI 功能的部分 DOM 区域”。然后我们可以把这些组件层层嵌套起来使用,当然这样组件间会存在依赖关系。


至于模块化,类似于 ejs 那样可以作为独立的模块被引用到页面上来复用,它可以直接把 UI 组件当作脚本模块那样来使用,完全可以配合 CommonJS、AMD、CMD 等规范来 require 需要的组件模块,并处理好它们的依赖关系。


基于上述的两点,React 很自然的就获得一部分开发者的青睐。不过在这之前得先理清两件事情:


  1. React 是一个纯 View 层,不擅长于和动态数据打交道,因此它不同于,也替代不了常规的框架;

  2. React 很擅长于处理组件化的页面,在页面上搭组件的形式有点像搭积木一样,因此用上 React 的项目需求常规为界面组件化。

React 组件特征

简单点说,React 组件应该具有如下特征:



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


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


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


组件化一直是网页开发的利器,许多开发者最希望能够最大程度的重复使用过去的开发的组件,避免重复造轮子。在 React 中组件就是一切,前端开发可能需要花点时间转变思维,尤其过去我们往往习惯将 HTML 、CSS 和 JavaScript 分离,现在却要把它们都封装在一起。

React Component 书写的两种方式

以下是一般 React Component 书写的主要两种方式:


1.使用 ES6 的 Class


//  注意组件首字母需要大写class MyComponent extends React.Component {  // render 是 Class based 元件唯一必須的方法(method)  render() {    return (      <div>Hello, World!</div>    );  }}// 將 <MyComponent /> 组件插入 id 為 app 的 DOM 元素中ReactDOM.render(<MyComponent/>, document.getElementById('app'));
复制代码


2.使用 Functional Component 写法


<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <!-- 請先载入 index.html 中引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      // 代码写在这里!      ReactDOM.render(        <h1>Hello, world!</h1>,        document.getElementById('example')      );    </script>  </body></html>
复制代码


前面说到 React 有独有的 JSX 语法,那么到底什么是 JSX 呢?


JSX 在 ECMAScript 的基础上提供了类似于 XML 的扩展。 JSX 和 HTML 有点像,但也有不一样的地方。例如,HTML 中的 class 属性在 JSX 中 为 className。其他不一样的地方,你可以参考 FB 的 HTML Tags vs. React Components 这篇文章。


但是由于浏览器原生并不支持 JSX,因此我们需要将其编译为 JS,有很多方法能够 完成这个任务,后面我们会提到这些方法。此外,Babel 也能够讲 JSX 编译为 JS。


一些参考资料:


  • JSX in depth

  • Online JSX compiler

  • Babel: How to use the react transformer

JSX 两种使用方式

一般而言 JSX 通常有两种使用方式:


1.使用 browserify 或 webpack 等 CommonJS bundler 并整合 babel 预处理


2.在浏览器端做解析


请大家注意 JSX 的语法书写方式:


<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <!-- 請先载入 index.html 中引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      // 代码写在这里!      ReactDOM.render(        <h1>Hello, world!</h1>,        document.getElementById('example')      );    </script>  </body></html>
复制代码


一般载入 JSX 方式有:

內嵌

<script type="text/babel">  ReactDOM.render(    <h1>Hello, world!</h1>,    document.getElementById('example')  );</script>
复制代码

从外部引入

  <script type="text/jsx" src="main.jsx"></script>   
复制代码


总结:以上都是我对 React 简单的了解,包括 React 的优势、组件化的特征、React Component 的方法、以及 React 中为何要使用 JSX,以及 JSX 基本概念和用法。在 React 里,所有的事物都是以 Component 为基础,通常会将同一个 Component 相关的资源放在一起,而在撰写 React Component 时我们常会使用 JSX 的方式来提升书写效率。


JSX 是一种语法类似 XML 的 ECMAScript 语法扩充,可以发挥 JavaScript 的强大能力,放弃蹩脚的模板语言。当然 JSX 并非强制使用,你也可以选择不用,因为最终 JSX 的内容都会转化成 JavaScript。


以上就是对 React 入门的部分理解。


本文转载自公众号云加社区(ID:QcloudCommunity)。


原文链接:


https://mp.weixin.qq.com/s/c1Z_JCGfkZvZK4xLtCMjIQ


2019-10-29 10:492027

评论

发布
暂无评论
发现更多内容

都在看的18WJava核心成长笔记 让我成功收获字节、阿里、腾讯大厂Offer!

学Java关注我

Java 编程 架构 架构师 程序人生】

想拿到10k-40k的offer,这些技能必不可少!作为程序员的你了解吗?

Java架构师迁哥

当时尚撞上区块链,为潮酷创意赋予专属

CECBC

时尚产业

150页的剑指Offer解答PDF,它来了!!!

秦怀杂货店

ceph-csi源码分析(1)-组件介绍与部署yaml分析

良凯尔

Kubernetes 源码分析 Ceph CSI

DAPP系统开发运营版,DAPP系统开发案例源码

系统开发咨询1357O98O718

介绍一款能取代 Scrapy 的爬虫框架 - feapder

星安果

Python 爬虫 Scrapy feapder

封神总结!12W字“多线程与高并发实战手册”成功助我涨薪19K

比伯

Java 程序员 架构

JVM-技术专题-虚拟机知识遗漏盘点

码界西柚

JVM

2个月从0到1,一年5次迭代,百度“量桨”效率喷涌背后的工作秘诀

脑极体

高效获取信息的几点经验

彭宏豪95

效率 信息 阅读 4月日更

Redis-Cluster集群

Sakura

4月日更

思维训练

Ryan Zheng

深入理解Spring框架之AOP子框架

邱学喆

aop 动态代理 cglib ProxyConfig AspectJ

怎么做到的?3个月入职蚂蚁金服(Java岗)从年薪10W到年薪30W

Java架构师迁哥

Vue源码思想在工作中的应用

执鸢者

Vue 大前端

封神总结!蚂蚁金服+滴滴+美团+拼多多+腾讯15万字Java面试题

Java架构追梦

Java 阿里巴巴 架构 面试 金三银四

区块链如何推动数字化转型?

CECBC

区块链

BUG!从编写 Loader 到窥探大佬 Debug 全过程

HZFEStudio

小程序 webpack 构建工具

【网络】【操作系统】详解select、poll、epoll

Linux服务器开发

后端 网络编程 Linux服务器开发 网络io eopll

Web3.0时代需要什么样的企业级协作工具?

猫Buboo

四面拿到京东Java岗 30K offer 全过程分享

Java架构师迁哥

Go 的 UTF-8 实现

Rayjun

utf-8 Go 语言

解决方案的设计与积累——课程总结

Deborah

Redis的常见问题

赖猫

c++ redis Linux 后端

微信读书又更新,吃灰已久的Pencil又能拿出来遛一遛了。

彭宏豪95

效率工具 读书 阅读 4月日更 微信读书

ceph-csi源码分析(2)-组件启动参数分析

良凯尔

Kubernetes 源码分析 Ceph CSI

ARST-日常打卡3

pjw

iOS 面试策略之语言工具-Swift

iOSer

ios swift 面试

流量分析中常见的指标简单总结

五分钟学大数据

4月日更

比微信文件传输助手更好用的传输工具|Telegram

彭宏豪95

微信 效率 文件传输 4月日更 Telegram

React 有什么优势?这里有一份入门指南_文化 & 方法_卢文喆_InfoQ精选文章