React入门

1.1 React 是什么

React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自：React
官方网站

狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括：

1. React.js
2. ReactRenders: ReactDOM / ReactServer / ReactCanvas
3. Flux模式及其实现（Redux , Fluxxor）
4. React 开源组件
5. GraphQl + Relay

任何技术都是一样，围绕这个技术主体会有很多依附的知识点（技术延伸、工具等），从而形成了体系化的技术栈。 所以，学习 React 并不仅仅是学习 React 本身，而是学习这套开发体系，是学习整个技术栈。 而React Native 是相对于 WEB 来说另外一个较大的技术体系。

1.2 React 中的基本概念

下面，先来认识一下 React 中的基本概念

React.js
React.js 是 React 的核心库，在应用中必须先加载核心库。

React-dom.js
ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法， 第一个参数为 React 组件，第二个参数为 HTMLElement。

JSX
JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。

组件
组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达， 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。

虚拟DOM (Virtual DOM)
React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。

单向数据流：one-way reactive data flow
React 应用的核心设计模式，数据流向自顶向下。

1.3 React 的独特之处

相比其他前端框架，为什么 React 独树一帜 能够脱颖而出呢？

1. 组件的组合模式
2. 单向数据流的设计
3. 高效的性能
4. 分离的设计

1.3.1 组件的组合模式

组合模式：组合模式有时候又叫做部分-整体模式，它使我们树型结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。

React 就是基于组合模式， 无论是应用等级还是一个表单亦或是一个按钮都视为一个组件， 然后基于组件的组合构建整个应用，这样的结构一直是前端界想要却迟迟不来的 web component。

React 中组件的组合：

基于组合模式的优点：

构建可重用的组件：组件的开发能够形成公司的组件库，每个业务的开发都能积累可重用的组件。 无学习障碍：天然符合 HTML 的结构，
对前端开发者来说几乎没有学习障碍。 具有弹性的架构：组合模式很简单却很有效，能够构建简单的页面也能构建大型的前端应用。
源码高可维护性：开发只是工作中的一部分，应用的上线才是噩梦的开始，很多大型应用因为复制的业务逻辑导致无法快速响应业务需求，可维护性低。

1.3.2 单向数据流的设计

因为Javascript 是脚本语言，不能够像静态语言一样通过编译定位bug，想要清晰的定位到应用中的 bug 需要深入了解业务代码。 然而, React 的单向数据流的设计让前端 bug 定位变得简单， 页面的 UI 和数据的对应关系是唯一的。通过定位数据变化就可以定位页面展现问题。

单向数据流设计：

1.3.3 高性能

为什么高性能？就是因为 virtual dom。 React 之所以能够这样设计要归功于 Virtual DOM 算法， 基于这个算法，可以让只有需要改变的元素才去重渲染。这样一来就大大的提高了性能。

1.3.4 分离的框架设计

React.js 现在的版本已经将源码分开为 ReactDOM 和 React.js 。这也就意味着 React 不仅仅可以在 web 端工作， 也可以在服务端（nodejs），Native 端运行。

1.4 React 应用范围

1. web 端应用
2. 原生应用 - IOS、Android、Native 应用
3. Node.Js 服务端渲染