《React Native 精解与实战》书籍连载「React 与 React Native 简介」

<div class="blogpost-body cnblogs-markdown" id="cnblogs_post_body">
<img alt="截图" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-16c91ab1f8e80926c6f89ac5a3b61729.png">
此文是我的出版书籍<a href="http://rn.parryqiu.com/">《React Native 精解与实战》</a>连载分享，此书由机械工业出版社出版，书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战，以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示，精选了大量实例代码，方便读者快速学习。
书籍还配套了视频教程「80 节实战课精通 React Native 开发」，此视频课程建议配合书籍学习，书籍中原理性的东西讲解的比较清晰，而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。
书籍相关所有资料请访问：<a href="http://rn.parryqiu.com/">http://rn.parryqiu.com</a>
这一章节中我们将对 React 与 React Native 的基本概念进行介绍。从 React 产生的背景到 React 的框架详细介绍，同时也对 React 的底层实现原理进行了简单的介绍，然后过渡到对 React Native 的基本概念进行了介绍。
这一章节你将对 React 与 React Native 框架的发展、框架之间的关系有一个基本的了解，具体的技术细节在后续的章节将有更加详细的讲解与实战。
<h2 id="react-简介">1.1 React 简介</h2>
React 框架是一个非常优雅、现代的前端开发框架，下面我们将对 React 框架产生的背景与 React 框架的发展历史进行介绍，并通过一个小的实例更加直观地了解 React 框架的结构以及核心特性，在此基础上对 React 框架优秀性能表现的原因从底层进行了剖析。
<h3 id="react-产生的背景">1.1.1 React 产生的背景</h3>
React 框架最早孵化于 Facebook 内部，Jordan Walke 是框架的创始人。作为内部使用的框架，在 2011 年的时候 React 框架被用于 Facebook 的新闻流（newsfeed）以及 2012 年使用在了 Instagram 项目上。在 2013 年五月美国的 JSConf 大会上，React 框架项目被宣布了开源。
图 1-1 为 GitHub 上 React 的开源项目截图，GitHub 地址为：https://github.com/facebook/react/。
<img alt="截图" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d3c3f39056a358d033f4f70763367f86.png"> 图 1-1 GitHub 上的 React 项目
React 框架产生的缘由是在当时的技术背景下，前端 MVC （Model-View-Controller）框架性能不能满足 Facebook 项目的性能需求以及扩展需求，所以 Jordan Walke 索性就自己着手开始写 React 框架，这真是一种值得学习的精神。
在 Facebook 内部极其复杂的项目中，当时面临的一个问题是，MVC 架构的项目当 Model 和 View 有数据流动时，可能会出现双向的数据流动，那么项目的调试以及维护将变得异常复杂。
<h3 id="react-框架简介">1.1.2 React 框架简介</h3>
React 官方也说自己不是一个 MVC 框架（https://reactjs.org/blog/2013/06/05/why-react.html），或者说 React 只专注于 MVC 框架设计模式中的 View 层面的实现。 为了大大减少传统前端直接操作 DOM 的昂贵花费，React 使用 Virtual DOM （虚拟 DOM）进行 DOM 的更新。
图 1-2 为 React 框架的基本结构，此图清晰明了地描述出了 React 底层与前端浏览器的沟通机制。
<img alt="截图" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-ac4dd21ba14e4ba8ed7f140606f7c6b6.png"> 图 1-2 React 框架结构
React 的组件是用户界面的最小元素，与外界的所有交互都通过 state 和 props 进行传递。通过这样的组件封装设计，使用声明式的编程方式，使得 React 的逻辑足够简化，并可以通过模块化开发逐步构建出项目的整体 UI。
React 框架中还有一个重要的概念是单向数据流，所有的数据流从父节点传递到子节点。假设父节点数据通过 props 传递到子节点，如果相对父节点（或者说相对顶层）传递的 props 值改变了，那么其所有的子节点（默认在没有使用 shouldComponentUpdate 进行优化的情况下）都会进行重新渲染，这样的设计使得组件足够扁平并且也便于维护。
以下的示例代码演示了 React 框架基本组件定义以及单向数据流的传递。
完整代码在本书配套源码的 01-01-02 文件夹。
我们在 index.js 文件中定义 React 项目的入口，render 函数中使用了子组件 BodyIndex，并通过 props 传递了两个参数，id 和 name，用于从父组件向子组件传递参数，这也是 React 框架中数据流的传递方式。
<pre class="blockc