React学习之路二：从Hello World开始的初体验

       React最核心思想就是组件。组件就是独立的、可以重复利用的代码。这就是分而治之的思想，非常的牛逼。传统前端开发是把js、css和html文件分开进行管理，而基于组件的前端开发是把功能相同的组件的代码都放在一起，这样的重复使用更方便，而且真正达到了高内聚低耦合的思想。所有语言都是从hello world开始的，但是这是简单的显示Hello World没什么意思，上一章已经实现了，通过一个交互的Hello World程序来开始体会React吧。

1 Hello World

实现一个交互的React程序，可以显示和隐藏Hello World。代码如下：

MyReact.js

import React, { Component } from 'react';

class MyReact extends Component {
  constructor(){
      super(props);
      this.onClickShowButton = this.onClickShowButton.bind(this);
      this.onClickHideButton = this.onClickHideButton.bind(this);
      this.state = {
          message:"hello world",
          display:{display:'block'}
      };
  }

  onClickShowButton(){
      this.setState({display:{display:'block'}});
  }

  onClickHideButton(){
        this.setState({display:{display:'none'}});
  }

  render() {
    return (
      <div id="main">
          <p id="num" style={this.state.display}>{this.state.message}</p>
          <button onClick={this.onClickShowButton}>显示</button>
          <button onClick={this.onClickHideButton}>隐藏</button>
      </div>
    );
  }
}
export default MyReact;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyReact from './MyReact/MyReact.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<MyReact />, document.getElementById('root'));
registerServiceWorker();

下面对代码来进行讲解。

2 import&export

ES6实现了模块化，把每一个js文件看成一个单独的模块，每个模块可以通过export导出自己的变量、常量和函数，也可以通过import导入其他模块的变量、常量和函数。这样就实现了代码的重用，也可以很方便的对js文件进行维护。

2.1 导入import

1.导入全部模块的导出内容

import * as myConstant from "./Constant";

通配符*表示全部，并使用as制定了命名空间为myConstant，这样可以使用myConstant.xx的方式来使用Constant模块中的变量、常量和函数了。

2.导入一个或部分模块的导出内容

import {blueStyle, PI, redStyle} from "./Constant";

用花括号将要导入的内容括起来，多个就用逗号分隔开。当然也可使用as将导入的内容重新命名。

3.导入default内容

import React, { Component } from 'react';

上面导入的React没有加括号？Compoent加了括号，这是为什么？这是应为他们的导出不一样。在'react'模块中使用了，export default React和export Component。使用了export default导出的内容，再倒入的时候不用加括号，直接使用名字导入。

4.导入文件

import './App.css';

上面是比较常用的四种方式，详细的可以查看

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

2.2 导出

1.导出接口（可以是变量、常量、函数和表达式）

export const PI = 3.14159;

export let a = 24;

export function sayHello(name){
    return "hello "+ name;
}

export const redStyle = {color:'red'};

如果是控制样式的状态，一定要写成键值对的形式。也可以使用{a,b,c}导出部分接口，或者使用as重新命名。

2.重新导出其他模块的接口

export * from './b';

使用通配符*，from是不可缺的。假如这句话是在a.js使用的，那么在导入了a模块的模块也可使用b模块的内容了。

3.导出default接口

这个在import中讲过了。注意一点，在模块中可以有很多import和export，但是export default只能有一个。

详细的可以查看

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

3 自定义组件

MyReact是我们自定义的一个组件，目前最新的创建组件的方法就是使用ES6的语法来进行创建的。我们可以看到MyReact组件由四部分组成，构造函数constructor，两个按钮的按键逻辑，渲染函数render，还有一个导出语句。

3.1 构造函数constructor

从构造函数我们可以看出它完成了三个任务：继承父类，绑定事件，初始化state。

3.1.1 继承父类

使用super函数完成对父类的继承。调用super的原因在ES6中，在子类的constructor中必须先调用super才能引用this.

如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;

如果你在constructor中要使用this.props,就必须给super加参数：super(props)；

3.1.2 绑定事件

在ES6 语法下，类的每个成员函数在执行时的this 并不是和类实例自动绑定的。而在构造函数中， this 就是当前组件实例，所以，为了方便将来的调用，往往在构造函数中将这个实例的特定函数绑定this 为当前实例。

解决this绑定问题的其他方法还有：使用箭头函数定义时间，或者声明一个that的全局变量，在构造函数中将this赋值给that。

3.1.3 初始化state

有关state的内容会在后续章节进行讲解。大家先有一个印象，react中有两种数据：porps和state。它们分工很明确，prop 是组件的对外接口， state 是组件的内部状态，对外用prop ，内部用state 。

3.2 渲染函数render

render函数看起来很简单，就是一个返回函数，一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。返回的内容必须用一个元素包裹起来。返回的就是页面的内容，使用的也是html的标签。

JSX就是对JavaScript的扩展，在React中建议使用JSX。有关JSX的内容，大家可以参考：React官网。

4 ReactDOM.render()

Web前端开发关于性能优化有一个原则：尽量减少DOM 操作。虽然DOM操作也只是一些简单的JavaScript语句，但是DOM操作会引起浏览器对网页进行重新布局，重新绘制。

虽然JSX 看起来很像是一个模板，但是最终会被Babel 解析为一条条创建React 组件或者HTML 元素的语句，神奇之处在于， React 并不是通过这些语句直接构建DOM 树，而是首先构建Virtual DOM 。

既然DOM 树是对HTML 的抽象，那Virtual DOM 就是对DOM 树的抽象。VirutalDOM 不会触及浏览器的部分，只是存在于JavaScript 空间的树形结构，每次自上而下渲染React 组件时，会对比这一次产生的Virtual DOM 和上一次渲染的Virtual DOM，对比就会发现差别，然后修改真正的DOM 树时就只需要触及差别中的部分就行。

5 总结

本章只是通过一个简单的Hello World程序讲解了react程序如何工作的，作者水平和精力有限，很多地方还没有介绍，希望给大家起到引导的作用。其中大家可以自行学习es6的新增内容。