鹅厂优文 | ReactJS一点通
欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~
作者：卢文喆 腾讯云 UI工程师
导语 | 当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组件应该具有如下特征：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的 UI 组件；
（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
组件化一直是网页开发的利器，许多开发者最希望能够最大程度的重复使用过去的开发的组件，避免重复造轮子。在 React 中组件就是一切，前端开发可能需要花点时间转变思维，尤其过去我们往往习惯将 HTML 、CSS 和 JavaScript 分离，现在却要把它们都封装在一起。
以下是一般 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 写法
// 使用 arrow function 来设计 Functional Component 让 UI 设计更便捷，避免互相干扰（side effect）
const MyComponent = () => (
<div>Hello, World!</div>
);
// 將 <MyComponent /> 组件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));
前面说到 React 有独有的 JSX 语法，那么到底什么是 JSX 呢？
JSX在ECMAScript的基础上提供了类似于XML的扩展。 JSX和HTML有点像，但也有不一样的地方。例如，HTML中的class属性在JSX中 为className。其他不一样的地方，你可以参考FB的HTML Tags vs. React Components 这篇文章。
但是由于浏览器原生并不支持JSX，因此我们需要将其编译为JS，有很多方法能够 完成这个任务，后面我们会提到这些方法。此外，Babel也能够讲JSX编译为JS。
一些参考资料：
一般而言 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>
从外部引入
总结：以上都是我对 React 简单的了解，包括 React 的优势、组件化的特征、React Component 的方法、以及 React 中为何要使用 JSX，以及 JSX 基本概念和用法。在 React 里，所有的事物都是以 Component 为基础，通常会将同一个 Component 相关的资源放在一起，而在撰写 React Component 时我们常会使用 JSX 的方式来提升书写效率。 JSX 是一种语法类似 XML 的 ECMAScript 语法扩充，可以发挥 JavaScript 的强大能力，放弃蹩脚的模板语言。当然 JSX 并非强制使用，你也可以选择不用，因为最终 JSX 的内容都会转化成 JavaScript。
以上就是对 React 入门的部分理解。
问答
如何扩展React.js组件？
相关阅读
AI从入门到放弃：CNN的导火索，用MLP做图像分类识别？
开发效率太低?您可能没看这篇文章
微信车票背后的设计故事
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识
此文已由作者授权腾讯云+社区发布，更多原文请点击
搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！
海量技术实践经验，尽在云加社区！
鹅厂优文 | ReactJS一点通的更多相关文章
- 鹅厂优文|打通小程序音视频和webRTC
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯视频云终端技术总监常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ.QQ物联 等产品 ...
- 鹅厂优文 | 怎样用AI运维
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由 织云平台团队 团队发布在腾讯云+社区 诞生背景 最近这些年,运维行业提出了不少概念,各种各样的"XX运维"可以说 ...
- 鹅厂优文 | 决策树及ID3算法学习
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~. 作者:袁明凯|腾讯IEG测试开发工程师 决策树的基础概念 决策树是一种用树形结构来辅助行为研究.决策分析以及机器学习的方式,是机器学习中的 ...
- 鹅厂优文|主播pk，如何实现无缝切换？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文作者,rexchang(常青),腾讯视频云终端技术总监,2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手 ...
- 面试总结：鹅厂Linux后台开发面试笔试C++知识点参考笔记
文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 文章是由自己笔试面试腾讯的笔记整理而来,整理的时候又回顾了一遍,中间工 ...
- 16天5面，我终于拿到了鹅厂Offer
目录 1 - 为什么要在年底离职 1.1 惊觉:没有什么成长 1.2 投简历,敲打自己 1.3 面试它来了 1.4 提前触到目标? 2 - 我的鹅厂面试 2.1 技术一面 Java 语言相关 通用学科 ...
- 化学专业大二转战Android开发，终于拥有了鹅厂暑期实习offer
我是双非学校,应用化学专业,一年前我大二,现在我大三.一年前我两手空空,现在我拥有了鹅厂暑期实习的offer. 虽然结果是好的,但我春招实习的道路远没有这么简单和辉煌,它是无比坎坷的:每个人应该量力而 ...
- [转]【鹅厂网事】全局精确流量调度新思路-HttpDNS服务详解
小编:对于互联网,域名是访问的第一跳,而这一跳很多时候会“失足”,导致访问错误内容,失败连接等,让我们在互联网上畅游的爽快瞬间消失,而对于这关键的第一跳,鹅厂也在持续深入研究和思考对策,今天小编就邀请 ...
- 三年半Java后端面试鹅厂，三面竟被虐的体无完肤
经过半年的沉淀,加上对MySQL,redis和分布式这块的补齐,终于开始重拾面试信心,再次出征. 鹅厂 面试职位: go后端开发工程师,接受从Java转语言 都知道鹅厂是cpp的主战场,而以cpp为背 ...
随机推荐
- 发个招聘贴，魔都求手游C++后端，UNITY前端，开发实习生
上海游旺网络科技有限公司成立于2015年5月,是一家极具潜力的新创移动游戏公司.公司初创团队均来自腾讯,盛大,畅游,墨麟,蜗牛等知名互联网公司,公司创始人团队参与制作过<鬼吹灯><Q ...
- EBS R12 探索之路【EBS 经典SQL分享】
http://bbs.erp100.com/thread-251217-1-1.html 1. 查询EBS 系统在线人数 SELECT U.USER_NAME ,APP.APPLICATION_SHO ...
- leetcode-爬楼梯(动态规划）
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...
- C# 控件绘制
绘制方法: 1.在控件的paint事件中绘制 2.绘制成图片,然后作为背景图或图片贴到工作区. Bitmap bmp = new Bitmap(IWidth, this.Height); Graphi ...
- C# Linq 学习笔记
刚刚学习了 Siki老师 的C#教程Linq部分,以下是笔记 需要引用命名空间 using System.Linq; 然后我们需要准备数据 武林高手类 /// <summary> /// ...
- 修改ActiveReports验证文字“给不能为 null 的参数指定一个 null 值”
转:http://gcdn.gcpowertools.com.cn/showtopic-13759.html ActiveReports官方网站:http://www.gcpowertools.com ...
- 【cocos2d-x 手游研发小技巧（7）图片资源加密，Lua文件加密】
游戏开发中常遇到资源保护的问题. 目前游戏开发中常加密的文件类型有:图片,Lua文件,音频等文件,而其实加密也是一把双刃剑. 需要安全那就得耗费一定的资源去实现它.目前网上也有用TexturePack ...
- 知物由学 | 未来安全隐患：AI的软肋——故意欺骗神经网络
本文由 网易云发布. “知物由学”是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道.“知物由学 ...
- PageAdmin CMS网站制作教程实例：如何制作一个报名表？
PageAdmin CMS网站建设实例:如何制作一个报名表? 有时我们根据需求需要制作一些自定义表,该如何去制作呢? 我们以制作一个报名表为例: 登录后台地址,进入后台, 2.在顶部导航中找到系统,并 ...
- ES6躬行记（22）——Promise
在JavaScript中,回调函数是处理异步编程的常用解决方案,但层层嵌套的回调金字塔(如下代码所示)一直受人诟病,因为不仅在视觉上更加混乱,而且在管理上也更为复杂. setTimeout(() =& ...