1.1 React 介绍
1.1.1 React 是什么
React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
来自：React 官方网站
React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
来自：React 官方网站
狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括：
React.js
ReactRenders: ReactDOM / ReactServer / ReactCanvas
Flux 模式及其实现（Redux , Fluxxor）
React 开源组件
React Native
GraphQl + Relay
任何技术都是一样，技术本身的核心不会太复杂，但是围绕这个主体会有很多依附的知识点形成了体系化的技术栈。 所以我们谈学习 React 并不仅仅是学习 React 本身，而是学习这套开发体系，整个技术栈， 本书也是围绕这个技术栈系统的讲解。
本书中除了 React Native 以外都会进行系统的讲解，React Native 是相对于 WEB 来说另外一个较大的技术体系，本书会把重点放于 React Web 开发。
1.1.2 React 中的基本概念
我们先来认识一下 React 中的基本概念
React.js
React.js 是 React 的核心库，在应用中必须先加载核心库。
ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法， 第一个参数是 React 组件，第二个参数为 HTMLElement。
JSX
JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。
组件
组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达， 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。
VIRTUAL DOM
React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。
单向数据流：one-way reactive data flow
React 应用的核心设计模式，数据流向自顶向下
1.1.3 Hello React World
我也是性子急的人，按照技术界的惯例，在学习一个技术前，首先得说一句: “Hello World!”。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="http://facebook.github.io/react/js/react.js"></script><script src="http://facebook.github.io/react/js/react-dom.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">var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('example')
);
</script></body></html>读者可以复制代码到一个新的 HTML 文件中，并通过浏览器打开，上面的 html 中目前我们只用关心 script 标签内的代码，script 标签内的语法为 JSX 语法，ReactDOM 是 React 的 DOM 渲染器。
了解了基本概念以及看过 Hello World 后，读者可能会开始产生疑问了：
jsx 语法怎么和 HTML 写法一样？
答：是的，看上去一样， 但jsx 和 HTML 本质的不同是 jsx 直接在函数中写 xml 标签。在 1.2 节中，会详细介绍 jsx 以及和 HTML 做更多的对比。
看上去 React 除了 jsx 以外，并没有什么特殊的地方，不就是将模板字符串渲染到 DOM 中吗？你能告诉我 React 和其他框架有什么不同之处吗？
答：答案见 1.1.4 节
Hello World 也并不能看出 React 的能力，你能先告诉我 React 能做些什么吗？
答：答案见 1.1.5 节
1.1.4 React 的独特之处
相比其他前端框架，为什么 React 独树一帜，能够脱颖而出呢？
组件的组合模式
单向数据流的设计
高效的性能
分离的设计
1.1.4.1 组件的组合模式
组合模式：组合模式有时候又叫做部分-整体模式，它使我们树型结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。
React 就是基于组合模式， 无论是应用等级还是一个表单亦或是一个按钮都视为一个组件， 然后基于组件的组合构建整个应用，这样的结构一直是前端界想要却迟迟不来的 web component。
React 中组件的组合：
基于组合模式的优点：
构建可重用的组件：组件的开发能够形成公司的组件库，每个业务的开发都能积累可重用的组件。
无学习障碍：天然符合 HTML 的结构， 对前端开发者来说几乎没有学习障碍。
具有弹性的架构：组合模式很简单却很有效，能够构建简单的页面也能构建大型的前端应用。
源码高可维护性：开发只是工作中的一部分，应用的上线才是噩梦的开始，很多大型应用因为复制的业务逻辑导致无法快速响应业务需求，可维护性低。
1.1.4.2 单向数据流的设计
我们都知道 Javascript 是脚本语言，不能像静态语言一样通过编译定位为题，想要清晰的定位到应用中的 bug 需要深入了解业务代码，对于大型前端应用来说，因为业务代码量很大且复杂，很难定位到 bug。 然而 React 的单向数据流的设计让前端 bug 定位变得简单， 页面的 UI 和数据的对应是唯一的,我们可以通过定位数据变化就可以定位页面展现问题。
单向数据流设计：
1.1.4.3 高效的性能
这里要提一个概念， 可能你已经了解或听说了，就是 virtual dom。 React 之所以能够这样设计要归功于 Virtual DOM 算法， 基于算法可以让只有需要改变的元素才去重渲染。在后面的内部实现章节中会详细讲解 virtual DOM 算法的实现
1.1.4.4 分离的框架设计
React.js 现在的版本已经将源码分开为 ReactDOM 和 React.js . 这就意味着 React 不仅仅能够在 web 端工作， 甚至可以在服务端（nodejs），Native 端运行。
与此同时， 我们可以自定义自己的渲染器， 实现比如 Three.js， Pixi.js， D3.js 的 React 方式渲染。
1.1.5 React 应用范围
React 可应用的范围：
web 端应用
原生应用 - IOS、Android、Native 应用
Node.Js 服务端渲染
1.1.5.1 Web 端应用
Web 应用是 React 的出发点，我们可以通过 React 构建从简单的 TODOAPP 到大型的电商购物网站应用。 同时除了能够处理 HTML 以外， 在 Web 端， 我们同样可以通过 React 来实现数据可视化， 图表展现，甚至是游戏开发：
1.1.5.2 原生应用
除了 Web 端以外，我们可以使用同样的 jsx 语法构建 IOS 或者 Android 应用， 这要归功于 facebook 开源的 React Native。 基于 React Native ， 我们将可以使用 jsx 来实现具有原生应用性能的 UI 运行于 IOS 和 android 中，同时我们也可以通过 NW.js 或者 Electron 来实现基于 React 的桌面应用。
1.1.5.3 服务端渲染
React 除了在 Web 和 Native 环境以外， 也可以通过 React 实现在服务器端渲染出 HTML。
1.1 React 介绍的更多相关文章
- react介绍、环境搭建、demo运行实例
React官网:https://reactjs.org/docs/create-a-new-react-app.html cnpm网址:http://npm.taobao.org/ 1.react介绍 ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- 1. React介绍 React开发环境搭建 React第一个程序
什么是 React React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景 Faceboo ...
- React教程（一） React介绍与搭建
React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用 spa(单页面应用) react 组件化模块化 开发模式 React通过对DOM的模拟(虚拟dom) ...
- React 介绍
ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind The sm ...
- 【React】- 1、React介绍
React的开发背景 构建数据不断变化的大型应用 大量DOM操作 <---- 自动DOM操作 数据变化 逻辑及其复杂 <---- 状态对应内容(自动变化) 特点: - 简单 ...
- React介绍（讲人话）
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px "PingFang SC"; color: #616161 } span. ...
- vue和react的介绍
这几年前端框架发展的不错,出了不少框架,像微软自己的knockoutjs,angular,vue和最近比较火的react等,之前我有写过前两者的相关文章,今天主要说一下后两者. 介绍 是一个用于构建用 ...
- 36.React基础介绍——2019年12月24日
2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...
随机推荐
- cesium左侧列表定位目标
cesium左侧列表定位目标 功能:根据左侧列表经纬度等信息的值,进行搜索定位. 列表: 1 点击清除按钮可以清空所有input的值 2 点击查找可以定位到位置,如果输入的值不在范围内,会有弹出框 ...
- Spring Cloud服务安全连接
Spring Cloud可以增加HTTP Basic认证来增加服务连接的安全性. 1.加入security启动器 在maven配置文件中加入Spring Boot的security启动器. <d ...
- hduoj-1301 Jungle Roads(最小生成树-克鲁斯卡尔和普里姆求解）
普里姆求解: #include<cstdio> #include<cmath> #include<cstring> #include<iostream> ...
- 数据结构与算法简记--redis有序集合实现-跳跃表
跳表 定义 为一个值有序的链表建立多级索引,比如每2个节点提取一个节点到上一级,我们把抽出来的那一级叫做索引或索引层.如下图所示,其中down表示down指针,指向下一级节点.以此类推,对于节点数为n ...
- CTU OPEN 2017 Go Northwest! /// 简单公式
题目大意: 给定n个点 求任选一对点连成的直线斜率为1或-1的概率 对于点(x1,y1) 和 点(x2,y2) 斜率 k=(y1-y2)/(x1-x2) 当k=1 则 (y1-y2)/(x1-x2)= ...
- psql 命令
(1)使用命令行连接数据库 psql -U postgres -h localhost -p 5433 (2)列出所有的数据库 \l -- 查看所有数据库 (3)进入某个数据库 \c name -- ...
- python获取网页源代码
最简单的网页取源(不用模拟浏览器的情况) import requests def getHTML(url): try: r = requests.get(url,timeout=30) r.raise ...
- ionic2(3) 密码键盘组件 ionic2-pincode-input 使用
1.效果展示: 2.安装: npm install ionic2-pincode-input --save 3.app.module.ts配置 app.module.ts import { NgMod ...
- 2018-8-10-win10-uwp-ApplicationView
title author date CreateTime categories win10 uwp ApplicationView lindexi 2018-08-10 19:16:53 +0800 ...
- 项目案例之GitLab的数据迁移
项目案例之GitLab的数据迁移 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方 ...