React 与 React Native 底层共识：React 是什么

此系列文章将整合个人 React 视频教程与 React Native 书籍中的精华部分，给你们介绍 React 与 React Native 结合学习的方法，此小节主要介绍 React 的底层原理与机制。

目前 React 能够说是前端世界最火热的框架，具备高性能以及容易上手的特性，并且在掌握了 React 框架后，再学习其余相似 React 的框架也将变得更易上手。

关于 React 框架的高性能缘由以及底层的重要概念，咱们在后续的章节会陆续展开探讨，这一章节咱们先来经过一个实际的案例来探究 React 的重要概念与特性。

若是你对 React 框架已很是熟悉，能够选择性地跳过此章节，直接阅读后续章节便可。

1. React 框架的安装

学习 React 框架，咱们能够经过以下几种方式搭建开发环境进行快速地学习。

1.1 使用在线代码编辑器编写学习

在线编辑器中能够灵活地切换 React 的版本以及选择 Babel 做为 JSX 代码到 JavaScript 的预处理转换。 如官方推荐的在线代码编辑器 React 环境：CodePen。

1.2 本地开发环境的搭建

1.2.1 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。

Node.js 自己不是一个新的开发语言，也不是一个 JavaScript 框架，而是一个 JavaScript 的运行时。底层为 Google Chrome V8 引擎，并在此基础上进行了封装，可用于建立快速、高效、可扩展的网络应用。Node.js 采用事件驱动与非阻塞 I/O 模型，以使得 Node.js 轻量并高效。

Node.js 中包含了 npm 系统，npm 是 Node.js 的包生态系统，是最大的开源生态系统。你能够理解为基于 Node.js 框架，全世界的开发者提交了各类各样的功能类库到 npm 中，其余开发者在开发过程当中须要使用的大部分功能均可以在 npm 中找到已存在的库，彻底不须要本身再重复去“造轮子”。

Node.js 框架的安装只须要去 Node.js 官网 下载你对应平台的安装包直接安装便可。

1.2.2 安装官方脚手架项目

create-react-app 脚手架项目存在于 npm 包系统中，因此能够直接经过 npm 命令在命令行工具中进行安装。

npm install -g create-react-app

以后便可经过命令行进行 React 项目的初始化。

create-react-app your-app-project-name

2. React 中的 JSX、state 与 props

JSX、state 与 props 是 React 框架最重要最基础的三个知识点，而从根本上说，你在掌握了这三个知识点后就可使用 React 进行项目的开发了，其余的知识点基本上翻看下文档就能够快速掌握。

2.1 组件实例设计介绍

下面咱们经过 React 组件化设计了两个页面组件：

1. 入口组件定义为 Index；
2. Index 组件中加载了一个子组件，定义为 BodyIndex；
3. Index 组件会向 BodyIndex 组件中传递两个参数：id 和 name；
4. BodyIndex 组件中还有一个自身的属性 username，并会在组件加载 5 秒后自动修改定义的值。

经过此实例，你们须要注意实例中的以下几个知识点：

1. React 组件的定义；
2. JSX 代码的语法结构；
3. 组件属性 state 的定义；
4. 组件经过 props 传递参数的方法。

2.2 组件实例代码实现

2.2.1 组件 Index 的代码实现

/**  
* index.js 定义了 React 项目的入口，Index 组件 
*/    
      
var React = require('react');    
var ReactDOM = require('react-dom');    
import BodyIndex from './components/bodyindex';    
class Index extends React.Component {      
      
    //页面表现组件渲染    
    render() {    
        return (    
            <div>    
                <BodyIndex id={1234567890} name={"IndexPage"}/>    
            </div>    
        );    
    }    
}    
      
ReactDOM.render(<Index/>, document.getElementById('example'));

2.2.2 子组件 BodyIndex 的代码实现

/**  
* bodyindex.js 定义了一个 BodyIndex 子组件  
*/    
      
import React from 'react';    
export default class BodyIndex extends React.Component {    
    constructor() {    
        super();    
        this.state = {    
            username: "Parry"    
        };    
    }    
      
    render() {    
        setTimeout(() => {    
            //5秒后更改一下 state    
            this.setState({username: "React"});    
        }, 5000);    
      
        return (    
            <div>    
              
                <h1>子组件页面</h1>    
              
                <h2>当前组件自身的 state</h2>    
                <p>username: {this.state.username}</p>    
              
                <h2>父组件传递过来的参数</h2>    
                <p>id: {this.props.id}</p>    
                <p>name: {this.props.name}</p>    
          
            </div>    
        )    
    }    
}

2.3 组件实例的页面表现与代码解释

浏览器中的运行效果以下图所示，而且在 5 秒后子组件的 state 定义的 username 值由 Parry 变成了 React。

你能够直接在本地编写代码运行测试或直接下载配套源码直接运行，运行后，注意此 state 页面值更新的部分，整个页面没有进行任何的从新刷新加载，而只是进行了局部的更新。

注意这里的局部更新你可能想到了熟悉的 Ajax 页面无刷新的更新操做，可是逻辑代码部分没有进行任何的页面 DOM 元素操做，而这正是 React 的核心以及高性能特性所在，具体的底层原理咱们会在后续的章节深刻讲解。

对于实例代码中几个重要知识点的解释：

1. 组件定义头部使用 require 或 import 引入了一些必备的组件，后续 React 开发加载的第三方 npm 框架也使用此方法引入；
2. 组件 Index 中引入的子组件 BodyIndex 在页面布局中能够直接按照 HTML 的标签形式进行引用；
3. 子组件 BodyIndex 中经过 props 获取父组件传递过来的属性值；
4. 自身的属性经过 state 进行定义，页面的显示也直接经过 state 进行绑定，然后续在逻辑函数中修改了 state 值以后，页面绑定的值也会随之变动，而且变动的过程页面彻底是无刷新的，这正式 React 框架的重要特性，页面的全部变动都是经过 state 值的变动驱动的。

以上完整代码你能够在 JueJin-Book-React-Native-Demo 处下载。

系列文章其余相关资源

个人「React.js 入门与实战」视频教程：http://coding.imooc.com/class/83.html

个人《React Native 精解与实战》书籍：http://rn.parryqiu.com/

个人更多免费原创视频教程：https://devopen.club/

3. 小结

此章节和你们一块儿经过对 React 开发环境的构建以及一个实际的组件实例学习了 React 中最基础的三个概念：JSX、state 与 props，并领略到 React 构建的页面更新彻底是经过后台 state 值的变动驱动的，这有别于咱们以前接触的前台框架，是经过直接操做 HTML DOM 结构进行页面的更新。

而 React 框架这样设计的优点以及背后的底层原理，咱们在接下来的几个章节会进行逐步深刻地探讨，以便切合此系列文章的定位，而在使用 React 开发过程当中遇到的任何其余细节问题，你均可以经过下方的留言向我提问便可，这里限于篇幅就不对 React 框架的基本使用展开讲解。